---
title: Media Element
section-title: UI Components
docs: true

navgroup: styleguide
navsub: ui-components
navactive: mediaElement
---
<p>A common pattern that sees an image followed by a block of information.</p>
<h2 class="sg-sectionHeading">Default Media Element</h2>
<p>Image on the left, block of information on the right.</p>
{{#>demo-block }}
<div class="c-mediaElement">
    <div class="c-mediaElement-img">
        <img src="{{ ../baseUrl }}/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>
{{/demo-block }}
<h2 class="sg-sectionHeading">Stacked Media Element</h2>
<p>Default media element on wide viewports, on narrow it reverts to the image on the top, with the block of information below it.</p>
{{#>demo-block }}
<div class="c-mediaElement c-mediaElement--stack">
    <div class="c-mediaElement-img">
        <img src="{{ ../baseUrl }}/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>
{{/demo-block }}
<h2 class="sg-sectionHeading">Fully Stacked Media Element</h2>
<p>Stacked on all view widths – image on the top, the block of information below it.</p>
{{#>demo-block }}
<div class="c-mediaElement c-mediaElement--fullstack">
    <div class="c-mediaElement-img">
        <img src="{{ ../baseUrl }}/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>
{{/demo-block }}
<h2 class="sg-sectionHeading">Modifiers</h2>
<p>Image outlined</p>
{{#>demo-block }}
<div class="c-mediaElement">
    <div class="c-mediaElement-img c-mediaElement-img--outlined">
        <img src="{{ ../baseUrl }}/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>
{{/demo-block }}
<p>Text large</p>
{{#>demo-block }}
<div class="c-mediaElement">
    <div class="c-mediaElement-img">
        <img src="{{ ../baseUrl }}/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>
{{/demo-block }}