Link figures are used as an 'in-page' navigation - often on landing pages where we're using a full-width page and there's no subnavigation.

Use the grid system to arrange them on a page.

Available in a range of colours, for better or for worse. Use wisely.

Here is some content.

Here is some content.

Here is some content.

 
<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--quarter">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/400/600/?image=982">

        <div class="c-figure__content c-figure__content--pink">
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--quarter">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/400/600/?image=983">

        <div class="c-figure__content c-figure__content--teal">
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--quarter">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/400/600/?image=984">

        <div class="c-figure__content c-figure__content--gold">
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Content title

Here is some content.

Content title

Here is some content.

Content title

Here is some content.

 
<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/400/600/?image=986">

        <div class="c-figure__content c-figure__content--charcoal">
          <h3>Content title</h3>
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/400/600/?image=987">

        <div class="c-figure__content c-figure__content--pink">
          <h3>Content title</h3>
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/400/600/?image=988">

        <div class="c-figure__content c-figure__content--teal">
          <h3>Content title</h3>
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Content title

Here is some content.

 
<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--half">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/400/600/?image=989">

        <div class="c-figure__content c-figure__content--gold">
          <h3>Content title</h3>
          <p>Here is some content.</p>
          <button class="c-btn c-btn--medium c-btn--block">Click here for more</button>
        </div>
      </a>
    </div>
  </div>
</div>
This is a caption

Content title

Here is some content.

 
<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--full">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/800/800/?image=991">
        <figcaption class="c-figure__caption c-figure__caption--top-right"><i class="c-icon c-icon--camera c-figure__caption-icon"></i> This is a caption </figcaption>

        <div class="c-figure__content c-figure__content--charcoal">
          <h3>Content title</h3>
          <p>Here is some content.</p>
          <button class="c-btn c-btn--medium c-btn--block">Click here for more</button>
        </div>
      </a>
    </div>
  </div>
</div>

Edge cases

If there's too much content in a link figure, JS kicks in and makes the image fit vertically.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

Here is some content.

 
<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--quarter">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/600/400/?image=991">

        <div class="c-figure__content c-figure__content--pink">
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--quarter">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/600/400/?image=992">

        <div class="c-figure__content c-figure__content--teal">
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--quarter">
      <a class="c-figure c-figure--link" href="http://google.com">
        <img class="c-figure__image" src="https://picsum.photos/600/400/?image=993">

        <div class="c-figure__content c-figure__content--gold">
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
          <p>Here is some content.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Options (see figures page)