Hover content

Originally designed as the Study Area block, this design can be used to showcase multiple links to other related pages or external entities.

Upon hovering over a list item the header, body text and background image will change to reflect that item’s title.

Rules

  • Minimum of 4 items
  • Each item must include a title, description header, body text and background image
  • Can only be used once on a page
  • This is a full-width banner on all screens and sits flush with side navigation.

Content limits

  • Description header & list item title: 50 characters (Max)
  • Description body text: 170 characters (Max)

Live examples

Example

Heading

Short description here.

Heading 1

Heading 1 content.

Heading 2

Heading 2 content.

Heading 3

Heading 3 content.

Heading 4

Heading 4 content.

Heading 5

Heading 5 content.

Heading 6

Heading 6 content.

Alternative blocks