UI Components

Media Element

A common pattern that sees an image followed by a block of information.

Default Media Element

Image on the left, block of information on the right.

Example

Fozzie Kebab

Fozzie Kebab

123 Fake Street, Bristol

<div class="c-mediaElement">
    <div class="c-mediaElement-img">
        <img src="/assets/img/examples/restaurant-logo.gif" alt="Fozzie Kebab" itemprop="image">
    </div>
    <div class="c-mediaElement-content">
        <h3 itemprop="name">Fozzie Kebab</h3>
        <p class="u-showAboveMid" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">123 Fake Street, Bristol</p>
    </div>
</div>

Stacked Media Element

Default media element on wide viewports, on narrow it reverts to the image on the top, with the block of information below it.

Example

Fozzie Kebab

Fozzie Kebab

123 Fake Street, Bristol

<div class="c-mediaElement c-mediaElement--stack">
    <div class="c-mediaElement-img">
        <img src="/assets/img/examples/restaurant-logo.gif" alt="Fozzie Kebab" itemprop="image">
    </div>
    <div class="c-mediaElement-content">
        <h3 itemprop="name">Fozzie Kebab</h3>
        <p class="u-showAboveMid" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">123 Fake Street, Bristol</p>
    </div>
</div>

Fully Stacked Media Element

Stacked on all view widths – image on the top, the block of information below it.

Example

Fozzie Kebab

Fozzie Kebab

123 Fake Street, Bristol

<div class="c-mediaElement c-mediaElement--fullstack">
    <div class="c-mediaElement-img">
        <img src="/assets/img/examples/restaurant-logo.gif" alt="Fozzie Kebab" itemprop="image">
    </div>
    <div class="c-mediaElement-content">
        <h3 itemprop="name">Fozzie Kebab</h3>
        <p class="u-showAboveMid" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">123 Fake Street, Bristol</p>
    </div>
</div>

Modifiers

Image outlined

Example

Fozzie Kebab

Fozzie Kebab

123 Fake Street, Bristol

<div class="c-mediaElement">
    <div class="c-mediaElement-img c-mediaElement-img--outlined">
        <img src="/assets/img/examples/restaurant-logo.gif" alt="Fozzie Kebab" itemprop="image">
    </div>
    <div class="c-mediaElement-content">
        <h3 itemprop="name">Fozzie Kebab</h3>
        <p class="u-showAboveMid" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">123 Fake Street, Bristol</p>
    </div>
</div>

Text large

Example

Fozzie Kebab

Fozzie Kebab

123 Fake Street, Bristol (large)

<div class="c-mediaElement">
    <div class="c-mediaElement-img">
        <img src="/assets/img/examples/restaurant-logo.gif" alt="Fozzie Kebab" itemprop="image">
    </div>
    <div class="c-mediaElement-content">
        <h3 itemprop="name">Fozzie Kebab</h3>
        <p class="u-showAboveMid c-mediaElement-text--large" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">123 Fake Street, Bristol (large)</p>
    </div>
</div>