VN102: Action Squares

Use for suggesting next steps to featured topics, such as tools and other resources.

Component Detail

A minimum of two horizontal boxes that suggest next steps. Each box contains a headline referring to the title of the featured topic, and can include short descriptor copy beneath it with a click-able arrow or link to the page on which the action may be accomplished. Using more than four squares will create a “Show More” button at the bottom of the first row of squares.

Interaction

CTA sends users to the corresponding topic page.

Design Example

Action Squares with Image Example

Subheading

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem3 placerat. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem3 placerat. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem3 placerat. Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit

TEXT WITH DIFFERENT STYLE

  • Bullet list
  • Bullet list
  • Bullet list 1
  • Bullet list 1

  1. Numbering
  2. Numbering
  3. Numbering

LEARN MORE

Usage Guidelines
WHEN TO USE

Use for suggesting next steps to featured topics, such as tools and other resources.

WHEN TO AVOID

When visuals are required to convince a user to click through to the next page.

ALTERNATIVE OPTIONS