Organisms
For the most part, organism components can be dropped in wherever they're needed or desired. Often they're added via layouts, though, so be careful to account for any duplicates that may arise from one-off usage.
Copyright
Example
Copyright, license, and documentation
Options
Code
Usage
General guidance
The copyright section contains the copyright statement, as well as licensing links if applicable, and the copyright menu.
Accessibility
Just some sample text in the accessibility section for now.
Footer
Example
Options
Code
Usage
General guidance
The footer section contains site contact information, socials, and the footer menu.
Accessibility
Just some sample text in the accessibility section for now.
Form
Example
Options
Code
Usage
General guidance
The form section can use the mode property in conjunction with a slug to call an entity from a form collection. It can also build a form with any suitably-constructed entity with all the necessary props.
Accessibility
Just some sample text in the accessibility section for now.
Header
Example
October 9, 2020 — Ferndale, MI Search widget
Example
Options
Code
Usage
General guidance
The search widget is a toggleable icon that opens a search form for keyword searching the whole site. Only one should appear per page in order to avoid id attribute conflicts.
Accessibility
Just some sample text in the accessibility section for now.
Options
Code
Usage
General guidance
The header section contains the logo and identifying information. It also houses the search widget markup.
Accessibility
Just some sample text in the accessibility section for now.
Header (Pre)
Example
Options
Code
Usage
General guidance
The header pre is an optional section for the front page, to draw attention above the fold.
Accessibility
Just some sample text in the accessibility section for now.
Hero
Example
Organisms
Options
Code
Usage
General guidance
The hero contains the page title, and sometimes more information like the meta description or other details.
Accessibility
Just some sample text in the accessibility section for now.
Nav
Example
Options
Code
Usage
General guidance
The nav section contains the main menu. It is a headroom-style sticky menu by default.
Accessibility
Just some sample text in the accessibility section for now.
Copyright
Example
-
Accessibility
Writing guide for inclusivity
-
Be concise
Write enough to get your point across, but no more.
-
Content principles
Quick overview of our guiding content principles.
Options
Code
Usage
General guidance
The related section can highlight content of the same type as the page you’re on.
Accessibility
Just some sample text in the accessibility section for now.
Section
Example
Example section
This is a paragraph of text
Options
Code
Usage
General guidance
Sections separate large distinct portions of content on a page.
Accessibility
Just some sample text in the accessibility section for now.