Skip to main content
Search

Showcase block

What is a showcase block?

The showcase block shows three images which can be clicked on to show a small preview of the content you are highlighting and the call to action to allow a user to navigate to the content.

This block is designed to promote content exploration and provide a preview of the content you are highlighting.

 

Related

View all blocks

Anatomy

Showcase block

Specification

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

Usage guidelines

Do's

  • Use for showcasing your high value content
  • Try to place this block at or near the top of a page.
  • Choose images which have 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
  • Within the card holder container ensure buttons are aligned to the bottom when using this card

Don'ts

  • Don’t use the showcase block to display less than three items of content
  • Don’t use the showcase block for anything other than letting the user explore high value content
  • Don’t use more than one showcase block per page
  • Don’t choose images which make reading the text difficult
  • There should be no padding between the cards in the showcase block

Behaviour

  • When hovering over the image the title text will raise and show the see more text. This acts as affordance that there is an interaction on click
  • If a user clicks on a card more detail about the link will be displayed and a button will be displayed to allow the user to visit the content being showcased.

Example showcase block

Card holder container title

Card holder container description

Card title

See more

Card title

Card description

CTA

Card title

See more

Card title

Card description

CTA

Card title

See more

Card title

Card description

CTA