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
Options
Code
Usage
General guidance
The header section contains the logo and identifying information.
Accessibility
Just some sample text in the accessibility section for now.
Header + Main nav
Example
Options
Code
Usage
General guidance
The header section contains the logo and identifying information. It also houses the main menu and search widget markup.
Accessibility
Just some sample text in the accessibility section for now.
Header + Main nav + Hamburger menu
Example
Options
Code
Usage
General guidance
The header section contains the logo and identifying information. It also houses the main menu and search widget markup.
Accessibility
Just some sample text in the accessibility section for now.
Header (Pre)
Example
This section can be customized for a fancy, important, temporary feature on the home page. You will probably want to put a fancy background here or otherwise catch users' eyes.
Make your own site easilyOptions
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.
Related
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.
Utility
Example
Utility (verb) navigation
Options
Code
Usage
General guidance
The utility navigation section is for verb-based navigation actions like “Contact us”, as opposed to nouns like About that belong in the main nav.
Accessibility
Just some sample text in the accessibility section for now.
Utility (external)
Example
Utility (external) navigation
Options
Code
Usage
General guidance
The external utility navigation section is for affiliated and other brand sites related to the current site.
Accessibility
Just some sample text in the accessibility section for now.