Media

Media combines visual elements with text to give context and alignment within content.

Full width

<figure class="nsw-media">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog"> 
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy

Full width without background

<figure class="nsw-media nsw-media--transparent">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy

Full width video

<figure class="nsw-media">
  <div class="nsw-media__video">
    <iframe src="https://www.youtube.com/embed/HNHu2zRPSB4" title="Digital.nsw launch with Victor Dominello MP at NSW Parliament House" frameborder="0" allowfullscreen=""></iframe>
  </div>
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy

Centre 90%

<figure class="nsw-media nsw-media--90">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy

Centre 80%

<figure class="nsw-media nsw-media--80">
  <img src="https://picsum.photos/id/237/2000/1250 alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy

Centre 70%

<figure class="nsw-media nsw-media--70">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy

Centre 60%

<figure class="nsw-media nsw-media--60">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy
<figure class="nsw-media nsw-media--left-50">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy

Right 50%

<figure class="nsw-media nsw-media--right-50">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.</figcaption>
</figure>  

 

Copy
<figure class="nsw-media nsw-media--left-40">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing.</figcaption>
</figure>  

 

Copy

Right 40%

<figure class="nsw-media nsw-media--right-40">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
  <figcaption>A long caption, ee mei labores adipiscing.</figcaption>
</figure>  

 

Copy
<figure class="nsw-media nsw-media--left-30">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
</figure>  

 

Copy

Right 30%

<figure class="nsw-media nsw-media--right-30">
  <img src="https://picsum.photos/id/237/2000/1250" alt="A picture of a black dog">
</figure>  

 

Copy

Use media to add an image or video that supports and reinforces the content. Ensure media used is relevant and impactful.

Each media component needs to be allocated a width and position. We recommend using width percentages in increments of ten at the positions below:

  • Widths of 30%, 40% and 50% should have a position of left or right.
  • Widths of 60%, 70%, 80%, 90% and 100% should have a position of centre

Captions

Captions by default contain a background to visually connect the text to the image or video. If your caption text would be better placed without a background, this option is also available.

Read more about using captions.