Section landing
Landing pages help users see what is in a section of the navigation and access those pages.
Anatomy
Title
A section landing page has a title at the top.
Top links
Directly below the title are 2 top links with titles, summaries, optional images. The link titles and summaries can be automatically pulled from the pages they link to.
Responsive
On small screen sizes, the angle disappears and the boxes become full width with the standard margin within the Primary Grid.
They follow standard text scaling formula outlined in the Typography section.
Specs
The background shape and image stretch to full bleed on desktop
The content for both cards is inside the wider grid and does not continue to stretch out past the max width
The top links boxes use the angled skew and feature card shadow
Child page links are limited to 2 and use the child page link style
Secondary links
In the middle of the page are landing links or clickable cards with titles, summaries, optional images. These link to more child pages. The link titles and summaries can be automatically pulled from the pages they link to.
Responsive
They follow standard text scaling formula outlined in the Typography section.
Specs
Container margin: 80px auto
The content here is in a large grid on desktop
Each link is 6 columns wide with a standard 30px gutter between
Tertiary links
This third tier holds all remaining child pages in Landing Link format. The link titles and summaries can be automatically pulled from the pages they link to.
Responsive
They follow standard text scaling formula outlined in the Typography section.
Specs
Tertiary links are wrapped in a full bleed white background color
Border-top: 1px solid gray 10
The content here is in a large grid. Each link is 10 columns wide, centered
Container margin: 48px auto
Space between: 32px
Other Specs
Background-color: gray 5
This page type has the performance highlights at the top of the footer (not all templates do)
Inspect pathway page in public site mockups in Figma
Last updated