Skip to main content
Search

Introduction block

What is an introduction block?

The introduction block gives us the ability to focus the user on a section of content within the page. This block is designed to introduce a series or group of related content cards and provide a preview and series of links to the content you are introducing.

It works by fixing the scroll of the page on this block and the user can then scroll the cards within this section until they reach the bottom of the content within the block. At this point the user can continue to scroll the page.

Related

View all blocks

Anatomy

Introduction block

Image of an introduction block

Specification

  • Block title (optional)
  • Block description (optional)
  • Image (required)
  • Card title (required)
  • Card description (required)
  • Card CTA (optional)

Usage guidelines

Do's

  • Use the title and description within this block to set the scene for why this content is grouped.
  • As this has an internal scroll of content use this block to work as a stop within the page to capture the user’s focus on your list of content within the block.
  • Choose an image which has a high impact and will catch the user’s eye.
  • Write succinct copy which draws the user in but doesn’t overwhelm. Use the inverted pyramid technique to help.
  • The introduction block is flexible and can house a large list of cards if needed however be careful with this approach. As a guideline stick to six cards as a maximum. Anything more and it might be wise to consider another approach.

Don'ts

  • The introduction block should only be used when you need to display more than three cards. Consider using the showcase block or other types of cards if you need to display three or less items.
  • Don’t use more than one introduction block per page.