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
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 moreAlice 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 moreHere'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 moreHere's some content
Here is some content. The height of the banner will fit to the content size.
Click here for moreHere's some content
Here is some content. The height of the banner will fit to the content size.
Click here for moreHere's some content
Here is some content. The height of the banner will fit to the content size.
Click here for moreHere's some content
Here is some content. The height of the banner will fit to the content size.
Click here for moreHere'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>