Banners :: Digital Pattern Library

Banners act in a similar was to figures. The biggest difference is that, in a banner, the figure is resized to fit the content, rather than the size of the image. So a banner must have some c-figure__content or it will be very small.

Theres a special page for full-width figures.

Position

You can position banner content left or right. You can use top-left, bottom-right etc. but they are aliases for left or right. The default is left.

<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=769">
  <div class="c-figure__content c-figure__content--left">
    <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--banner">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=770">
  <div class="c-figure__content c-figure__content--right">
    <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

A banner's figure__content can be half (default), third or quarter sizes. These sizes only apply at huge sizes - they all go to half size at large and 100% at medium and below.

<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=771">
  <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>
</figure>
<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=772">
  <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>
    <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--banner">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=773">
  <div class="c-figure__content c-figure__content--left c-figure__content--third">
    <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>
</figure>
<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=774">
  <div class="c-figure__content c-figure__content--right c-figure__content--third">
    <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>
</figure>
<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=775">
  <div class="c-figure__content c-figure__content--left c-figure__content--quarter">
    <p>Here is some content. The height of the banner will fit to the content size.</p>
  </div>
</figure>
<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=776">
  <div class="c-figure__content c-figure__content--right c-figure__content--quarter">
    <p>Here is some content. The height of the banner will fit to the content size.</p>
  </div>
</figure>

Captions

Captions work in the same way as with regular figures.

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

As with 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).

<a href="https://www.york.ac.uk" class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/1200/600/?image=780">
  <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

Loads and loads of content

<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=778">
  <div class="c-figure__content">
    <p>The March Hare took the watch and looked at it gloomily: then he dipped it into his cup of tea, and looked at it again: but he could think of nothing better to say than his first remark, 'It was the BEST butter, you know.'</p>
    <p>Alice had been looking over his shoulder with some curiosity. 'What a funny watch!' she remarked. 'It tells the day of the month, and doesn't tell what o'clock it is!'</p>
    <p>'Why should it?' muttered the Hatter. 'Does YOUR watch tell you what year it is?'</p>
    <p>'Of course not,' Alice replied very readily: 'but that's because it stays the same year for such a long time together.'</p>
    <p>'Which is just the case with MINE,' said the Hatter.</p>
    <p>Alice felt dreadfully puzzled. The Hatter's remark seemed to have no sort of meaning in it, and yet it was certainly English. 'I don't quite understand you,' she said, as politely as she could.</p>
    <p>'The Dormouse is asleep again,' said the Hatter, and he poured a little hot tea upon its nose.</p>
    <p>The Dormouse shook its head impatiently, and said, without opening its eyes, 'Of course, of course; just what I was going to remark myself.'</p>
    <a class="c-btn c-btn--medium c-btn--block c-btn--primary" href="#">Click here for more</a>
  </div>
</figure>

No content

If you don't put any content in a banner, it will be 20px high (because of the padding), until small screens, when it will appear normally. This isn't very good.

<figure class="c-figure c-figure--banner">
  <img class="c-figure__image" src="https://picsum.photos/800/400/?image=779">
</figure>