Pathfinder

The pathfinder is used to funnel the user to a certain area.

Note: If the pathfinder content does not have a summary, use the <span> tag for the pathfinder title instead of a heading tag for accessibility. Refer to the without summary example for the usage details.

Three columns

Without image

Without image and summary

The class pathfinder__title can be used on both heading and span markups. For pathfinder content without a summary, use the <span> tag for the title.

Four columns

Use the class pathfinder--checkerboard to ensure the background colour properly alternates between each of the rows.

Without image

Without image and summary

The class pathfinder__title can be used on both heading and span markups. For pathfinder content without a summary, use the <span> tag for the title.