EvoToolkit - v3.7.2 (Changelog)

Media

The media object is a useful pattern for when you need to align an image alongside content. It was originally shared here.

Source

Contributors

Luke Harrison

Table of contents

Base

Modifiers

Base

Cat
Text content
Cat
Text content w small spacing 
<div class="o-media u-mb-regular">
	<div class="o-media__image">
		<img src="/static/img/cat-11da71f943.jpg" alt="Cat">
	</div>
	<div class="o-media__body">
		Text content
	</div>
</div>

<div class="o-media u-mb-regular">
	<div class="o-media__image u-pr-small">
		<img src="/static/img/cat-11da71f943.jpg" alt="Cat">
	</div>
	<div class="o-media__body">
		Text content w small spacing
	</div>
</div>

Modifiers

A list of modifiers for the media component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Collapse

The collapse modifier allows you to break the media object until the given breakpoint is hit. This would typically be used for small screens, where an image side by side with text may not fit.

Cat
Media object from MD breakpoint onwards 
<div class="o-media o-media--collapse@max-md">
	<div class="o-media__image u-pr-small">
		<img src="/static/img/cat-11da71f943.jpg" alt="Cat">
	</div>
	<div class="o-media__body">
		Media object from MD breakpoint onwards
	</div>
</div>