Right sidebar

The right sidebar is a column that shows up on Section home pages and Basic pages. It is used for related and relevant information on that topic.

There are a handful of components that can be used in a sidebar. Each component is modular and shows up based on the content entered and relevance of that component. See information about each component below.

Specs

The sidebar takes up 3 columns plus the 2px left border and 16px of padding between the border and the content
Each component has a border-left or padding that is 16px away from the content of the components.
Heading font size: baseB0 (all screen sizes)
Heading line height: baseB1 (all screen sizes)
Link and description font size: base2 (all screen sizes)
Link and description line height: base4 (all screen sizes)
Link and description paragraph spacing: base-6 (all screen sizes)
Mobile sidebar has a 1px border-top in gray 5

Text does not scale up/down in the standard formula outlined in the Typography section.

If a sidebar is blank on a page type that has a sidebar, the content does not stretch to fill the space - the space remains blank.

Inspect content components in public site components in Figma

Used for related links outside of the current section home. Has a max of 7 links.

Safety feature

Pulls content from a selected page in “Features on the road”. Content editor can select only one. Each feature should have a title, image, and short description that can be pulled in.

Contact

Some pages will have a contact person for that topic. Contact information should provide a name or department, a secondary description line, and relevant contact methods – email addresses or phone numbers.

Some pages will cover content that has a GovDelivery topic set up. For those pages, a subscription button in the sidebar allows the user to go to sign up for updates related to that topic.