Skip to main content

Molecules

Molecules are characterized by having more than just one little thing to them, and by not being a form input.

Accordion

Example

I haven't gotten my invitation. Are you still mailing them out?

We mailed out all invitations a while ago. If you did not receive one you probably were not invited. It's a small wedding, sorry.

Options
Code
Usage

General guidance

Accordions are used for progressive disclosure. Specifically, they can be used for things like FAQs, where the alternativue would be anchor links in a table of contents for showing the headings, then clicking to show the answer/detail.

Accordions should not be used to hide large amounts of content. That is being dishonest to the user about the content on the page. To mediate this, the accordion could be open by default.

Accessibility

Just some sample text in the accessibility section for now.

Alert

Example

Options
Code
Usage

General guidance

Alerts let the user know something more important and timely that body text.

Accessibility

Just some sample text in the accessibility section for now.

Byline

Example

Options
Code
Usage

General guidance

Bylines give metadata about a page, post, or entity.

Accessibility

Just some sample text in the accessibility section for now.

Card

Example

Options
Code
Usage

General guidance

Cards are represent content that has its own page.

@see https://inclusive-components.design/cards/

Accessibility

Just some sample text in the accessibility section for now.

@see https://inclusive-components.design/cards/

Collection hierarchy

Example

Options
Code
Usage

General guidance

A collection hierarchy represents all the items in a collection, as organized in the collection’s directory structure. It can serve as a secondary navigation, especially on pages for docs.

Accessibility

Just some sample text in the accessibility section for now.

Docblock

Example

Example

Options
Code
Usage
Accessibility
Options
Code
Usage

General guidance

Docblocks are used by the internal component system to show examples and documentation for other components.

Accessibility

Just some sample text in the accessibility section for now.

Event details

Example

Options
Code
Usage

General guidance

Event details can be placed in the page hero for an event, or perhaps elsewhere. Events have details that other collections do not, so putting the dates and locations somewhere other than the body may yield greater attention to it.

Accessibility

Just some sample text in the accessibility section for now.

Menu

Example

Options
Code
Usage

General guidance

Menus can be used to group related navigation links together in order to display an implied information architecture.

Accessibility

Just some sample text in the accessibility section for now.

Previous/Next

Example

Options
Code
Usage

General guidance

A prev/next pager is a good way to drive engagement on serialized pages where a user may want to continue reading in source order.

Accessibility

Just some sample text in the accessibility section for now.

Product summary

Example

SKU: SBFRT-0001

Price: 82.99

Options
Code
Usage

General guidance

Product summary is the product equivalent of a byline or event details component. It shows the SKU, price, and other fixed fields for a product.

Accessibility

Just some sample text in the accessibility section for now.

Product widget

Example

Options
Code
Usage

General guidance

Product widgets set up a buy button for snipcart with a quantity selector.

Accessibility

Just some sample text in the accessibility section for now.

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.