Figures :: Digital Pattern Library

Figures are structured markup for displaying images with additional content and/or captions.

We use the figure element, with figcaption used for captions. A c-figure__content element is used to add content to a figure, which is usually 50% wide but can be modified to be a third or quarter size.

Figures are sized by the size of the image. If you add a url option it will stop being a figure element and become a linked anchor. This means the figcaption should switch to being a normal div and any links inside the content must be utility links (i.e. a <span class="u-link">) rather than an anchor.

There is a separate page for examples of full-width figures.

Figure captions

The usual caption is positioned in the corner of the image:

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=973">
  <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>

The default location is in the bottom right corner, but can be positioned in any corner:

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=975">
  <figcaption class="c-figure__caption c-figure__caption--top-left"><i class="c-icon c-icon--camera c-figure__caption-icon"></i> This is another caption</figcaption>
</figure>
<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=976">
  <figcaption class="c-figure__caption c-figure__caption--top-right"><i class="c-icon c-icon--camera c-figure__caption-icon"></i> Here is yet another caption</figcaption>
</figure>
<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=977">
  <figcaption class="c-figure__caption c-figure__caption--bottom-left"><i class="c-icon c-icon--camera c-figure__caption-icon"></i> Last caption, I promise</figcaption>
</figure>

It can also be positioned below the image:

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=972">
  <figcaption class="c-figure__caption c-figure__caption--below">A plain caption below an image</figcaption>
</figure>

Figure content

The default width of the caption is a 50% at huge/large/medium sizes. On small/tiny screens the caption moves to be below the image. Banner content (like captions) can be positioned top-left, top-right, bottom-left or bottom-right, and can be half, third or quarter size.

Positions

Top left (default)

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=983">
  <div class="c-figure__content c-figure__content--top-left">
    <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>

Top centre

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=984">
  <div class="c-figure__content c-figure__content--top-centre">
    <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>

Top right

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=985">
  <div class="c-figure__content c-figure__content--top-right">
    <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>

Bottom right

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=986">
  <div class="c-figure__content c-figure__content--bottom-right">
    <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>

Bottom centre

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=987">
  <div class="c-figure__content c-figure__content--bottom-centre">
    <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>

Bottom left

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=988">
  <div class="c-figure__content c-figure__content--bottom-left">
    <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>

Sizes

Half (default), position top-right

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=882">
  <div class="c-figure__content c-figure__content--top-right 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>

Third, position bottom-centre

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=884">
  <div class="c-figure__content c-figure__content--bottom-centre 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>

Quarter, position bottom-left

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=886">
  <div class="c-figure__content c-figure__content--bottom-left c-figure__content--quarter">
    <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>

Clickable figures

Buttons in clickable figures should be <button>s and any links in the text should be <span>s with a class of u-link (they will all link to the same location as the main clickable URL).

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">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=890">
  <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>

Edge cases

Caption and content

You can include both content and a caption on figures:

Simple text caption that might end up crashing into the content

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=887">
  <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--top-left">
    <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>

Really huge content in a small box

If the content is too big for the image Javascript will kick in and update the banner height to automatically fit the content.

<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/400/?image=888">
  <div class="c-figure__content c-figure__content--top-left 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>
<figure class="c-figure">
  <img class="c-figure__image" src="https://picsum.photos/1200/400/?image=889">
  <div class="c-figure__content c-figure__content--bottom-right c-figure__content--quarter">
    <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>

Options

Atoms

figure
- image: the URL of an image (required)
- url: the URL to link the figure to
- caption:
  - text: the text to appear in the caption (string)
  - position: the position of the caption
- content:
  - text: the HTML to appear in the content (string)
  - position: the position of the content (_left _ or right)
- type: the type of figure (classname added to .c-figure--xxx)