Figures will stretch full-width when used within an o-wrapper--wide. The image takes up the full width of the screen, with the figure content centred on the screen, as if in a container with max-width of 1200px. Add a class of c-figure--full-width to the figure for this to work.

Captions move out to the very edges (top left, bottom right etc) of the image.

Full width figures

Simple text caption
A plain caption below an image

Alice In Wonderland

'I mean what I say,' the Mock Turtle replied in an offended tone. And the Gryphon added 'Come, let's hear some of YOUR adventures.'

Click here for more

Alice In Wonderland

'I mean what I say,' the Mock Turtle replied in an offended tone. And the Gryphon added 'Come, let's hear some of YOUR adventures.'

Click here for more 
<figure class="c-figure c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=901">
  <figcaption class="c-figure__caption c-figure__caption--bottom-right"><i class="c-icon c-icon--camera c-figure__caption-icon"></i> Simple text caption</figcaption>
</figure>
<figure class="c-figure c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=903">
  <figcaption class="c-figure__caption c-figure__caption--below">A plain caption below an image</figcaption>
</figure>
<figure class="c-figure c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=905">
  <div class="c-figure__content c-figure__content--top-left c-figure__content--half">
    <h3>Alice In Wonderland</h3>
    <p>'I mean what I say,' the Mock Turtle replied in an offended tone. And the Gryphon added 'Come, let's hear some of YOUR adventures.'</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
</figure>
<figure class="c-figure c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=907">
  <div class="c-figure__content c-figure__content--bottom-right c-figure__content--third">
    <h3>Alice In Wonderland</h3>
    <p>'I mean what I say,' the Mock Turtle replied in an offended tone. And the Gryphon added 'Come, let's hear some of YOUR adventures.'</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
</figure>

Full width banner figures

Here's some content

Here is some content. The height of the banner will fit to the content size.

Click here for more

Here's some content

Here is some content. The height of the banner will fit to the content size.

So if you have loads and loads of content, the banner will get taller and taller and taller.

And taller.

Click here for more

Button using .cta

Here's some content

Here is some content. The height of the banner will fit to the content size.

Click here for more

Here's some content

Here is some content. The height of the banner will fit to the content size.

Click here for more

Here's some content

Here is some content. The height of the banner will fit to the content size.

Click here for more

Here's some content

Here is some content. The height of the banner will fit to the content size.

Click here for more
Simple text caption that might end up crashing into the content

Here's some content

Here is some content. The height of the banner will fit to the content size.

This content should be some information, which is illustrated well by the image beneath.

The caption down there in the corner could be a description of the image, or a copyright notice relating to the image itself.

Click here for more 
<figure class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=909">
  <div class="c-figure__content c-figure__content--left c-figure__content--half">
    <h3>Here's some content</h3>
    <p>Here is some content. The height of the banner will fit to the content size.</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
  </div>
</figure>
<figure class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=911">
  <div class="c-figure__content c-figure__content--right c-figure__content--half">
    <h3>Here's some content</h3>
    <p>Here is some content. The height of the banner will fit to the content size.</p>
    <p>So if you have loads and loads of content, the banner will get taller and taller and taller.</p>
    <p>And taller.</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
    <p class="cta"><a href="#">Button using .cta</a></p>
  </div>
  </div>
</figure>
<figure class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=916">
  <div class="c-figure__content c-figure__content--left c-figure__content--third">
    <h3>Here's some content</h3>
    <p>Here is some content. The height of the banner will fit to the content size.</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
  </div>
</figure>
<figure class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=919">
  <div class="c-figure__content c-figure__content--right c-figure__content--third">
    <h3>Here's some content</h3>
    <p>Here is some content. The height of the banner will fit to the content size.</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
  </div>
</figure>
<figure class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=921">
  <div class="c-figure__content c-figure__content--left c-figure__content--quarter">
    <h3>Here's some content</h3>
    <p>Here is some content. The height of the banner will fit to the content size.</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
  </div>
</figure>
<figure class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=923">
  <div class="c-figure__content c-figure__content--right c-figure__content--quarter">
    <h3>Here's some content</h3>
    <p>Here is some content. The height of the banner will fit to the content size.</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
  </div>
</figure>
<figure class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=985">
  <figcaption class="c-figure__caption c-figure__caption--bottom-right"><i class="c-icon c-icon--camera c-figure__caption-icon"></i> Simple text caption that might end up crashing into the content</figcaption>
  <div class="c-figure__content c-figure__content--left c-figure__content--half">
    <h3>Here's some content</h3>
    <p>Here is some content. The height of the banner will fit to the content size.</p>
    <p>This content should be some information, which is illustrated well by the image beneath.</p>
    <p>The caption down there in the corner could be a description of the image, or a copyright notice relating to the image itself.</p><a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
  </div>
</figure>

Full-width clickables

Alice In Wonderland

'I mean what I say,' the Mock Turtle replied in an offended tone. And the Gryphon added 'Come, let's hear some of YOUR adventures.'

Alice In Wonderland

'I mean what I say,' the Mock Turtle replied in an offended tone. And the Gryphon added 'Come, let's hear some of YOUR adventures.'

 
<a href="https://www.york.ac.uk" class="c-figure c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=986">
  <div class="c-figure__content">
    <h3>Alice In Wonderland</h3>
    <p>'I mean what I say,' the Mock Turtle replied in an offended tone. And the <span class="u-link">Gryphon</span> added 'Come, let's hear some of YOUR adventures.'</p>
    <button class="c-btn c-btn--medium c-btn--block c-btn--primary">Click here for more</button>
  </div>
</a><a href="https://www.york.ac.uk" class="c-figure c-figure--banner c-figure--full-width">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=987">
  <div class="c-figure__content">
    <h3>Alice In Wonderland</h3>
    <p>'I mean what I say,' the Mock Turtle replied in an offended tone. And the <span class="u-link">Gryphon</span> added 'Come, let's hear some of YOUR adventures.'</p>
    <button class="c-btn c-btn--medium c-btn--block c-btn--primary">Click here for more</button>
  </div>
</a>

Options (see figures page)