EvoToolkit - v3.0.0 (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
<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>

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.

Spacing

Spacing modifiers allow you to create space between the image and text.

Cat
Media object with tiny spacing
Cat
Media object with small spacing
Cat
Media object with regular spacing
Cat
Media object with large spacing
Cat
Media object with huge spacing
Reverse media object with huge spacing
Cat
Reverse media object with large spacing
Cat
Reverse media object with regular spacing
Cat
Reverse media object with small spacing
Cat
Reverse media object with tiny spacing
Cat
<div class="o-media o-media--spacing-micro u-mb-regular"> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> <div class="o-media__body"> Media object with tiny spacing </div> </div> <div class="o-media o-media--spacing-small u-mb-regular"> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> <div class="o-media__body"> Media object with small spacing </div> </div> <div class="o-media o-media--spacing-regular u-mb-regular"> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> <div class="o-media__body"> Media object with regular spacing </div> </div> <div class="o-media o-media--spacing-large u-mb-regular"> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> <div class="o-media__body"> Media object with large spacing </div> </div> <div class="o-media o-media--spacing-huge u-mb-regular"> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> <div class="o-media__body"> Media object with huge spacing </div> </div> <div class="u-align-right"> <div class="o-media o-media--spacing-huge u-mb-regular"> <div class="o-media__body"> Reverse media object with huge spacing </div> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> </div> <div class="o-media o-media--spacing-large u-mb-regular"> <div class="o-media__body"> Reverse media object with large spacing </div> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> </div> <div class="o-media o-media--spacing-regular u-mb-regular"> <div class="o-media__body"> Reverse media object with regular spacing </div> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> </div> <div class="o-media o-media--spacing-small u-mb-regular"> <div class="o-media__body"> Reverse media object with small spacing </div> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> </div> <div class="o-media o-media--spacing-micro u-mb-regular"> <div class="o-media__body"> Reverse media object with tiny spacing </div> <div class="o-media__image"> <img src="/static/img/cat-11da71f943.jpg" alt="Cat"> </div> </div> </div>

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