Content blocks

Hero

The hero is a large image led content block prominently placed on a landing page. The hero image is often the first visual a user encounters on the site and its purpose is to promote and wayfind a user to the site's most important content.

.hero__title should indicate where the link will take a user and .hero__body is used to provide additional context to intrigue the user. The .hero__copy should be concise and restrained to prevent potential content overflow issues at smaller viewports.

Many users can skip past these types of block, expecting them to be simple promotion. So use them for promotion, not as the sole navigation to key content.


      <section class="hero l-offset-copy">
        <figure class="media">
          <a href="#"><img src="http://placehold.it/1300x400" alt=""></a>
        </figure>
        <a class="hero__copy" href="#">
          <h2 class="hero__title">
            Hero D
          </h2>
          <p class="hero__body">
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
          </p>
          <div class="readmore ico ico-readmore-arrow">
            Read more
          </div>
        </a>
      </section>

Teaser

Used to promote content, services or other sites.

Vitae accumsan nulla tincidunt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus nisi tempor lacus luctus, vitae accumsan nulla tincidunt.

How to use this pattern

These content blocks can be image-led, typography-led or content-led and can handle all kinds of media (eg images, video). Content within the teasers should be concise and light on text, and characters limited to prevent potential content overflow issues.

Variations

Standard teaser with arrow

Links to other pages can be emphasised using an arrow.


      <article class="teaser ">
      
        <div class="teaser__copy has-arrow">
          <h2 class="teaser__title">
            <a href="http://www.bbc.co.uk">Etiam eu enim auctor fermentum orci in</a>
          </h2>
            <p>Donec dapibus nisi tempor lacus luctus, vitae accumsan nulla tincidunt. Nulla efficitur libero eros.</p>
        </div>
      
      
        <a href="http://www.bbc.co.uk" class="teaser__arrow">
          <span class="visuallyhidden">Read more</span>
        </a>
      </article>
      

Teaser with image

For a teaser that sits full width with an image to the right add .has-media--side

Teaser with two-thirds image

For a teaser that sits full width with an image filling two-thirds of the block add .has-media--side and .has-media--two-thirds

Teasers in a three region block

To achieve equal heights for teasers, as dictated by the design, the data-attribute data-equal-height needs to be set on the wrapping element.

Notice box

To carry key messages a step removed from the content of the page copy.

How to use this pattern

Generally these give the user additional context to the content on the page (eg this is archived, this is in beta). These should not to be used to simply give prominence to page content.

Variations

Standard notice box

Box: box--bg-white / Border: box--brd-mblue

Integer sit amet libero non ipsum tempor

Aenean vitae massa ultrices lectus pellentesque sollicitudin. Aenean sit amet ipsum tortor. Praesent convallis, velit in semper finibus, erat leo porta magna, vulputate pharetra diam erat non orci.

Subtle notice box

Border: box--brd-mgreyblue

Integer sit amet libero non ipsum tempor

Aenean vitae massa ultrices lectus pellentesque sollicitudin. Aenean sit amet ipsum tortor. Praesent convallis, velit in semper finibus, erat leo porta magna, vulputate pharetra diam erat non orci.

Archive notice box

Used at the head of pages where content is no longer updated. Ideally this should link the user onto more current content.
Box: box--bg-lgreyblue / Block: box--bg-navyblue

Title
Erat leo porta magna

Aenean vitae massa ultrices lectus pellentesque sollicitudin. Aenean sit amet ipsum tortor. Praesent convallis, velit in semper finibus, erat leo porta magna, vulputate pharetra diam erat non orci.

What is this pattern

Alert box is an extension of notice box, held within this pattern.

Alert box

Extends the notice box pattern but uses classes of .box--success, .box--info, .box--warning and .box--danger. Bespoke font, background and border alert colours are all combined in the one class.

Note: These colour variables are to be used only in the alert box.

Success alert box

Uses .box--success

Without header

This alert box indicates a successful or positive action.

With header

Success

This alert box indicates a successful or positive action.

Info alert box

Uses .box--info.

Info

This alert box indicates a neutral informative change or action.

Warning alert box

Uses .box--warning.

Warning

This alert box indicates a warning that might need attention.

Danger alert box

Uses .box--danger and .box--padding-large

Danger

This alert box indicates a dangerous or potentially negative action.

How to use this pattern

Don’t overuse them or they will lose their impact. Only ever have one visible at any time. Consider if less intrusive methods would be suitable (eg an inline error message).

By default use large padding (.box--padding-large), though medium (.box--padding-medium) and small (.box--padding-small) padding are available if suitable.

Low key navigation menus. This pattern can be used without both its title and subtitle.

Show/hide

Used with contextually relevant supporting content. By default the content is hidden to avoid overwhelming users.

The link text on the show/hide must always be descriptive of the content it contains eg Basic HTML markup explained .

Note: You must style the content within .show_hide__target using the base typographic styles.

Collapsible heading

Vestibulum augue tellus, tincidunt id iaculis et, fringilla non felis. Aliquam sed tortor justo.

  • Praesent vitae varius ligula
  • Nulla molestie quam non
  • Vestibulum non diam pretium

Collapsible heading which is really long to test out wrapping Vestibulum augue tellus

Vestibulum augue tellus, tincidunt id iaculis et, fringilla non felis. Aliquam sed tortor justo.

  • Praesent vitae varius ligula
  • Nulla molestie quam non
  • Vestibulum non diam pretium


        <section class="is-collapsible show_hide__container is-collapsible--button" data-collapsible>
          <h2 class="show_hide__trigger">Collapsible heading</h2>
          <div class="show_hide__target">
            
              
            
          </div>
        </section>
  

Comments

Displays comments made by users on specific articles.

3 Comments

  1. Bob

    Aliquam luctus augue non dolor aliquam ac faucibus magna dictum. Nulla facilisi. Integer sit amet eros dui, eget vulputate leo. Etiam sit amet metus vel ante sollicitudin hendrerit nec quis elit. Ut non ornare erat. Maecenas viverra, libero a tempus adipiscing, sapien est tristique nibh, sit amet molestie lorem ante vitae mauris.

    Reply
    1. Walter

      I really enjoyed this book. It captures the essential challenge people face as they try make sense of their lives.

      Reply
    2. Sian

      I really enjoyed this book. It captures the essential challenge people face as they try make sense of their lives.

      Reply
  2. Nick Brown

    I really enjoyed this book. It captures the essential challenge people face as they try make sense of their lives.

    Reply

How to use this pattern

To make it clear these are separate from the content of the page this pattern should only be used on the grey background, and not on the (white) body text area.

Media object

A media object is a pair of elements - one which is graphical and appears on the left and the other which is text and appears on the right. Used in search results, event lists, resources etc. Anywhere where some text has a graphical element supporting it.

Media object supporting text


              <div class="media-object">
                <div class="media-object__media">
                  <a href="">
                    <img src="//placehold.it/59x59" alt="Image alt text" />
                  </a>
                </div>
                <div class="media-object__body">
                  Media object supporting text
                </div>
              </div>
    

The image hangs left and text does not wrap underneath it.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Donec ullamcorper nulla non metus auctor fringilla.