Examples

The Article layout Figma component includes variants with and without vertical navigation across all breakpoint sizes.

With Sidenav

Without Sidenav

Guidance

When to use

If you’re presenting detailed information on a specific topic or theme that has already been contextualized by a landing page. Some topics that can be nicely represented on this type of page include guides or how-tos, technical documentation, and program descriptions — in short, any subject that requires in-depth explanation.

Guidelines

• Do not include forms on Article pages.
• You may choose to include other CMSDS components in an Article page, aside from what’s shown in Figma. Consider the Article layout as a starting point, not a limitation.
• Consider avoiding components that require user interaction to reveal content, such as accordions. The intent is to display in-depth information openly.

When to consider alternatives

Don’t use an article page to introduce your users to your agency or organization — a landing page is better suited to that purpose. The level of detail present on article pages can overwhelm users who are just becoming acquainted with your organization.

Usage

• Use a precise headline to quickly communicate your page’s purpose. If the page content is especially complex, you may consider using a subheadline to further clarify its meaning.
• Write concise copy. Favor short sentences (and paragraphs) over longer ones, and use straightforward language, avoiding jargon. Remember, copy blocks don’t need to be long to be comprehensive.
• For guidance on specific components, see the page markup for the individual components.

Used in this pattern

• Grid
• Base styling
• Base typography
• Vertical Navigation

Accessibility

The Article layout is provided here as documentation and guidance, not as a coded component.

• Content designers should ensure that their content meets their product’s content writing guidelines for clarity and ease of understanding.
• Visual designers and engineers should adhere to the accessibility guidance of components included on pages using the Article layout.

Accessibility testing

Components included on Article pages should be tested for accessibility according to their documentation.

This page, as a whole, should be tested to ensure that there are no focus traps and that navigation from section to section is as expected.