A featured topics grid is used on higher level pages in the site IA to provide on-page navigation to the sub topics of that page.

Examples

2x with Icons Variant

View by Screen Size

2x without Icons Variant

View by Screen Size

3x with Icons Variant

View by Screen Size

3x without Icons Variant

View by Screen Size

4x with Icons Variant

View by Screen Size

4x without Icons Variant

View by Screen Size

Implementation

ElementDesign NotesContent Notes
Background Block Whole block is linked. Corners are rounded to $radius-m. Fill $gray-01. On hover/active, background changes to $digital-blue.

Padding:
 
Brand Icons

2x, 4x: Select icon that directly relates to the subject matter. This component is designed for the Media Collection template and links go to Topic Pages which include the same icon at a larger size in an Icon Hero.

3x: The 3x variant is designed for pages where a dense set of subtopics or subpages would be best presented as a grid without icons.

Make sure the same icon is never used for different links on the same page. If possible, avoid using the same icon for different meanings for a given audience (may be unavoidable in some cases given the limited icon set).

Text
  • Use $subhead-4 in $digital-blue
  • Text may wrap up to 2 lines but should stay vertically centered within the background block.
  • On hover/active, text changes to $white
Text should be the title of the page being linked to, and be no more than 1 line across breakpoints – 10-20 characters is typical. May be up to ~30 characters if a longer title is absolutely necessary, which will wrap to 2 lines on some breakpoints – check for/avoid awkward wrapping when this happens and adjust page name if needed.
Show All Expandable Control Presence depends on number of items in grid

This is only shown if the full set of links is greater than the initial set shown (ie, if a 2x or 4x grid only has 4 items or less, or a 3x grid only has 6 items or less, Show All is not shown).

After clicking "Show all" the link changes to a "Show less" link that sits at the bottom of the grid. Clicking "Show less" reverts to the original state.

Use a smooth transition per Digital Standards guidelines on animation, consistent with those used for Accordions and Expandables.

Use standard link style/behavior with right and up arrows from FontAwesome.

Includes buffer space below to make sure sufficient spaces separates this component from the next component on the page.

The full set of links can be as few as 2 using 2x, 3 using 3x, or 4 using 4x (ie, always have 1 full row at minimum)

Make sure to curate and maintain topics so the list doesn't get too long – no more than 20 (approximately, no hard limit here).