Media

Available image and video components in the Design System


Image full width in text

Accessibility Note: The figure and figcaption elements are not currently accessibility supported by the majority of browsers. Until the figure and figcaption elements are widely accessibility supported by browsers and/or assistive technology it is recommended that a label for the image is provided in the alt attribute, e.g. 'photo 1', so that users of assistive technologies know that the image is related to the figcaption.

photo 1
Image caption (photo 1)

Recusabo pericula per an, aeque reprehendunt vis ei. Id per erat convenire voluptatum, lorem aeque perfecto ea ius. Et per mundi accusamus, pro simul feugiat luptatum eu. Graeco persius accusamus sed ei, augue novum perfecto ei quo. Dicta vitae impedit vim te.

<div class="jumpnav"></div>
<section>
  <div class="accessibility-note">
    <p>
      Accessibility Note: The figure and figcaption elements are not currently accessibility supported by the majority of browsers. Until the figure and figcaption elements are widely accessibility supported by browsers and/or assistive technology it is recommended that a label for the image is provided in the alt attribute, e.g. 'photo 1', so that users of assistive technologies know that the image is related to the figcaption.
    </p>
  </div>
  <figure class="full-width" role="group">
    <img alt="photo 1" src="http://placekitten.com/700/400" /><figcaption>Image caption (photo 1)</figcaption>
  </figure>
  <p>
    Recusabo pericula per an, aeque reprehendunt vis ei. Id per erat convenire voluptatum, lorem aeque perfecto ea ius. Et per mundi accusamus, pro simul feugiat luptatum eu. Graeco persius accusamus sed ei, augue novum perfecto ei quo. Dicta vitae impedit vim te.
  </p>
</section>
      

Section full width with background image

Accessibility note: because the background image is purely decorative, no alt text is required.

Vel veniam tempor definiebas at. No modus albucius vis, ad duis fabellas per. Et vim viris habemus referrentur, in mei liber scaevola. Ponderum referrentur consectetuer sea eu, illud temporibus vim ei. Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an.

<section>
  <div class="accessibility-note">
    <p>
      Accessibility note: because the background image is purely decorative, no alt text is required.
    </p>
  </div>
</section>
<div class="fullwidth" style="background-image:url(/assets/example/contrast.jpg)">
  <section>
    <p>
      Vel veniam tempor definiebas at. No modus albucius vis, ad duis fabellas per. Et vim viris habemus referrentur, in mei liber scaevola. Ponderum referrentur consectetuer sea eu, illud temporibus vim ei. Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an.
    </p>
  </section>
</div>
      

Videos

Just wrap your Vimeo or Youtube embed code with a <div class="video"> and you're done. Fully responsive of course. Go ahead and resize your browser :-)

Vimeo

<section class="video">
  <iframe allowfullscreen="true" frameborder="0" height="563" mozallowfullscreen="true" src="//player.vimeo.com/video/21149746?title=0&amp;byline=0&amp;portrait=0&amp;color=003366" title="video player" webkitallowfullscreen="true" width="1000"></iframe>
</section>
      

Youtube

<section class="video">
  <iframe allowfullscreen="true" frameborder="0" height="315" src="//www.youtube.com/embed/nlF7qp5GNPI" title="video player" width="420"></iframe>
</section>
<section class="video video--21-9">
  <iframe allowfullscreen="true" frameborder="0" height="315" src="//www.youtube.com/embed/0XuNcBK6aDs" title="video player" width="420"></iframe>
</section>