Media layouts are on of the most classic layouts for the web. Media layouts are meant to do a couple of simple things:

• Contain a figure on the left, and body on the right.
• Be able to easily have inner media layouts within an out media layout.

Default

Classic media layout example.

HTML

<div class="t-content">
    <div class="l-media">
        <div class="l-media-figure" style="font-size: 2em;">
            <inv-icon glyph="'briefcase'"></inv-icon>
        </div>
        <div class="l-media-body">
            <h3 class="u-mt0">Body copy here.</h3>
            <p>You can have paragraphs...</p>
            <p>And all sorts of elements in the body. The figure should remain at the top left of the body content.</p>
        </div>
    </div>
</div>

Media in Media

Showcasing the ability to have media in media.

HTML

<div class="t-content">
    <div class="l-media">
        <div class="l-media-figure" style="font-size: 2em;">
            <inv-icon glyph="'briefcase'"></inv-icon>
        </div>
        <div class="l-media-body">
            <h3 class="u-mt0">Body copy here.</h3>
            <p>You can have paragraphs...</p>
            <p>And all sorts of elements in the body. The figure should remain at the top left of the body content.</p>
            <div class="c-button">Some body action!</div>
            <div class="l-media u-ml- u-mv-">
                <div class="l-media-figure">
                    <inv-icon glyph="'briefcase'"></inv-icon>
                </div>
                <div class="l-media-body">
                    <h3 class="u-mt0">Child copy!</h3>
                    <p>And all sorts of elements in the body. The figure should remain at the top left of the body content.</p>
                    <div class="c-button">Some body action!</div>
                </div>
            </div>
        </div>
    </div>
</div>