Skip to main content

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

© Copyright 2024 Equinox Residential LLC. Content is available under the
Creative Commons icon
CC BY-SA 4.0 .
Code is subject to the MIT License.
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

Shoot us a message {% include forms/form--input.html classes="" description=false label="Name" name="fullname" required=false type="text" %} {% include forms/form--input.html classes="" description=false label="Email" name="email" required=true type="email" %} {% include forms/form--input.html classes="" description=false label="Phone number" name="phone" required=true type="text" %} {% include forms/form--input.html classes="" description=false label="Street address" name="address" required=true type="text" %} {% include forms/form--textarea.html classes="" description=false label="Tell us about your project" name="message" required=true rows="4" %} {% include forms/form--input.html classes="" description=false label="When would you like to start your project?" name="start_date" required=true type="text" %} {% include forms/form--input.html classes="" description=false label="How did you hear about us?" name="source" required=true type="text" %}
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

Special promotion! (fake heading for doc outline)

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 easily
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.

Related

Example

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.

Copyright, license, and documentation

© Copyright 2024 Equinox Residential LLC. Content is available under the
Creative Commons icon
CC BY-SA 4.0 .
Code is subject to the MIT License.