Design System Usage

This website is built using version 3.0 of the 2H Design System by 2H Media.

What is a Design System?

In very general terms, a design system is a component library paired with a set of usage instructions. Together, they can be used to rapidly develop new web content which is expandable and consistent.

Atomic Design

The 2H Design System by 2H Media is based on the principles of Atomic Design. The elements that make up an atomic design system include:

Containers: Elements that hold any number of other elements.
Atoms: Single components.
Molecules: Small groups of Atoms that do not stand alone - helpers for more complex elements.
Organisms: More complex groups of Atoms and Molecules that stand on their own - they do not require additional Atoms or Molecules to function.
Templates: Collections of Organisms arranged to make up a complete webpage devoid of content.
Pages: Filled Templates that are served to visitors of the website.

This usage guide walks through Containers, Atoms, Molecules, and Organisms. By understanding how they fit together, a designer can build a Template that a copy writer can fill out to create a finished webpage.

Jump To Section

Containers

A Container is a full horizontal element which contains a collection of content. Atoms, Molecules and Organisms must always be placed within a Container. As the screen size gets smaller or larger, the content inside a Container adjusts to the width of the screen, making the website "responsive".

Types of Containers

The 2H Design system uses 4 types of Containers:

.thds-container The standard container for most content. It has wide margins on all sides allowing for optimal readability for written content.
.thds-container .thds-container_width_wide The wide container. It inherits all styles from the standard container but has narrower left and right margins to accommodate Molecules and Organisms which may require more space.
.thds-container .thds-container_width_full The full-width container. It inherits all styles from the standard container but has no left and right margins, allowing for full-width elements such as hero images.
.thds-container .thds-container_width_full .thds-container_background The colourful container. It inherits all styles from the full width container and should contain a standard container or a wide container. It features a full-width coloured background to visually represent a distinctly different section. The colour can be chosen be adding any of the following classes:
- .thds-container_background_Primary
- .thds-container_background_Secondary
- .thds-container_background_Tertiary

Atoms

An Atom represents the simplest type of element - it cannot be divided further into multiple meaningful elements. All visible and/or interactive parts of the website are made up of Atoms.

Types of Atoms

The 2H Design system uses the following types of Atoms:

Typography

To allow for a variety of different sized components, the design system includes several type styles that share a consistent sizing scheme.

Available Font Sizes & Weights

The following visual representations include all of the typography classes that can be used within the design system.

type-display-2xl

type-display-xl

type-display-l

type-display-m

type-display-s

type-heading

type-subheading

type-body-xl

type-body-l

type-body

type-body-s

Note that each of the above type styles can be applied to either a heading or a text block. The design is independent from the markup.*

*For this fork of the design system, default colours were assigned to the markup such that h1 and h2 elements use the primary color, and h2 - h6 elements use the secondary color.

Cards

A Card is similar to a Container in that it contains a collection of content. However; a Card must always be placed within a Container, just like any other Atom. A card features a distinct border to separate or group specific types of content.

Types of Cards

The 2H Design system uses 3 types of Cards:

.thds-card The standard Card. It features a drop-shadow and slightly rounded corners.
.thds-card .thds-card_no-padding The no-padding Card. It inherits all styles from the standard Card but has no padding allowing for content such as images to fill the entire Card.
.thds-card .thds-card_clickable The clickable Card. It inherits all styles from the standard Card and features a subtle hover effect to indicate that it can be used as a call to action.

Lists

Lists can be used to improve information hierarchy and disrupt dense content. Additionally, Lists can be used in layout elements such as side bars to create additional structure.

Types of Lists

The 2H Design System uses 2 families of Lists. Unordered Lists group any set of related items. Ordered Lists group only sets of ordered items such as steps in a set of instructions.

Unordered Lists

.thds-list The standard List. It is displayed in a vertical style and has no decoration.
.thds-list .thds-list_bulleted The bulleted List. It inherits all styles from the standard List but includes square bullets.
.thds-list .thds-list_display_inline The inline List. It inherits all styles from the standard List but is displayed horizontally.

List Item
List Item
List Item

List Item
List Item
List Item

List Item
List Item
List Item

Ordered Lists

.thds-list .thds-list_numbered The numbered List. It inherits all styles from the standard List but includes numbered markers.
.thds-list .thds-list_display_inline .thds-list_numbered The inline numbered List. It inherits all styles from the standard List and inline List, and includes numbered markers.

List Item
List Item
List Item

List Item
List Item
List Item

Buttons

A Button is the most important call to action on the website. Buttons draw attention to the highest value links that visitors can interact with. Each page should include at least 1 Button.

Types of Buttons

The 2H Design System uses 2 types of Buttons:

.thds-button The standard Button. It features a strong brand color to immediately draw the eye of a visitor.
.thds-button .thds-button_secondary The secondary Button. It creates differentiation when two Buttons are displayed together. The secondary Button has lower priority than the standard Button.

Button Text Link
Button Text Link

Badges

A Badge is typically used in a more complicated list. Badges clearly separate small pieces of content from their surroundings.

Types of Badges

The 2H Design System uses 2 types of Badges:

.thds-badge The standard Badge. Badge content does not wrap.
.thds-button .thds-badge_clickable The clickable Badge. It inherits all styles from the standard Badge. Additionally, it features a strong brand color and a hover effect to indicate that it doubles as a call to action.

Badge Clickable Badge Badge Clickable Badge

Images

Images are a crucial part of any design system. To maintain proper spacing while displaying Images, give each Image the "thds-image" style.

Hyperlinks

To ensure that all Links are styled using brand styles and colors, give each Link the "thds-link" class.

Note that inline Links must be created within a "Rich Text" Oxygen element instead of a "Text" element. Accompanying copy text should be wrapped in a paragraph with an appropriate text class. See the following example:

<p class="type-body>
Text here <a href="" class="thds-link">Link - Rich Text</a> and here.
</p>

Text here Link - Rich Text and here.

Icons

Where Icons are required, it is recommended that Streamline app be used to generate Icon code which can be copied into a Rich Text Oxygen element. Icons should be 30px for best results.

All strokes and fills should be removed from the in-line code, and the "thds-icon" class should be applied to the Icon.

Types of Icons

The 2H Design system uses 2 types of Icons:

.thds-svg The standard Icon. It is intended for use with Streamline Regular

.thds-svg.thds-svg_bold The bold Icon. It inherits all styles from the standard Icon. However; it uses a fill instead of a stroke. It is intended for use with Streamline Bold

Molecules

A Molecule consists of a small number of Atoms working in combination. A Molecule is more complex than an Atom but is still highly repeatable. Additionally, a Molecule typically requires other elements in order to serve a function.

Types of Molecules

The 2H Design System uses the following types of Molecules:

Inline Entries

An Inline Entry is a List of Badges and supporting text. Each Badge represents a distinctly separate "object" such as a date, a class, etc. The supporting text further defines the object and provides added context. If additional information is required, the supporting text can also include a link.

February 20, 2020 This section is for a list with long links to specific things.
February 20, 2020 This section is for a similar list but with long text instead of links.

Quotes

A Quote is made up of 2 elements:

.thds-blockquote__quote The Quote itself. This text represent what someone has said. It is bold and centre aligned.
.thds-blockquote__attribution The attribution. This text credits the person who said the Quote. It is also centre aligned and has lower visual presence than the Quote itself.

“A quote should be incredibly impactful.” — Matthew Herchel, Marketing Strategist

Inline Quote

Sometimes, a quote needs to be longer and/or fit into a paragraph flow more cleanly:

.thds-blockquote__quote_inline A left-aligned quote with a preceding quotation mark.

Lorem ipsum is simply dummy text of the printing industry. It has been used as placeholder text for hundreds of years. It has since been adopted by the graphic design industry.

Instructions

The Instruction block consists of pairs of repeating svg bullets and text. This is not an html list element.

Lorem ipsum is simply dummy text of the printing industry. It has been used as placeholder text for hundreds of years. It has since been adopted by the graphic design industry.

This is a block of text. Double-click this text to edit it.

Details

The Details element can be used to show information only upon clicking the parent element.

Summary

Content

Summary

Content

Automatically Close Related Details Sections

To ensure that only 1 details section in any given group can be open at a time, ensure that all details sections in the group share the same name attribute.

Summary

Content

Summary

Content

Organisms

An Organism is a collection of Molecules and/or Atoms that makes sense when viewed on its own. At the highest level, page content can consist of a small series of Organisms.

Types of Organisms

The 2H Design System uses the following types of Organisms:

Hero Sections

A Hero Section introduces a webpage with a striking full-width image and the primary page header. This is the first impression visitors will have of any given webpage.

Components of a Hero Section

The Hero Section consists of 3 main elements:

.thds-hero A wrapper that contains the rest of the Hero content
.thds-hero__image The background image for the Hero Section. Note that it is not displayed on mobile.
.thds-hero__content A container that holds the primary page header and any additional Hero content.

Types of Hero Sections

The Hero Section has 4 layout options:

.thds-hero The standard Hero Section with the content centered on the image.
.thds-hero.thds-hero_content_bottom A variant Hero Section in which the content is bottom aligned, and the image is 30% smaller to create an overlapping effect.
.thds-hero.thds-hero_content_left A variant Hero Section in which the content is left aligned, and the image is 30% smaller to create an overlapping effect.
.thds-hero.thds-hero_content_right A variant Hero Section in which the content is right aligned, and the image is 30% smaller to create an overlapping effect.

Primary Title

Introductory text

Optional Link

Primary Title

Introductory text

Optional Link

Primary Title

Introductory text

Optional Link

Primary Title

Introductory text

Optional Link

Double-click this headline to edit the text.

Copy Sections

A Copy Section consists of a heading and a paragraph. If additional text content is required, a Copy Section can also include any number of additional subheadings and paragraphs.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis. Aliquam ac blandit sem. Vivamus finibus pretium erat, at facilisis diam malesuada et. Nullam rutrum malesuada tempus. Sed et gravida leo, ut tristique lectus. Morbi nisl neque, placerat ut leo vel, congue dignissim libero.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis. Aliquam ac blandit sem. Vivamus finibus pretium erat, at facilisis diam malesuada et. Nullam rutrum malesuada tempus. Sed et gravida leo, ut tristique lectus. Morbi nisl neque, placerat ut leo vel, congue dignissim libero.

Intro Sections

An Intro Section consists of 3 columns. The columns contain a header, a short descriptive paragraph, and a list respectively. This creates a concise format for introducing a topic such as a service. Intro Sections can be used consecutively to create lists of topics.

Strategy

Building without strategy is risk. Let’s design a sprint that positions you in front of your audience today.

Branding & Positioning
Marketing & Business
Data Insights
Branding, Design, & Agile

Image Intro Sections

An Image Intro Section is a variant of the Intro Section Organism. It features a more condensed layout with the header and short paragraph sharing a column. This allows for a square image to be included. Additionally, the column containing the list has an added header and includes links to additional resources.

Strategy

Building without strategy is risk. Let’s design a sprint that positions you in front of your audience.

Strategy

Branding & Positioning
Marketing & Business
Data Insights
Branding, Design, & Agile

Aside Sections

An Aside Section consists of a series of rows, each containing a Copy Section and an image. The left/right position of the image relative to the Copy Section alternates from row to row to create a more dynamic page layout.

Aside Quotes

A variant of the aside section with blockquote integration.

Primary Calls to Action (CTAs)

A Primary Call To Action consists of a singular card, a center aligned bold header, and a center aligned button. These elements work in combination to draw the reader into the Call To Action. With limited exceptions, all pages should end with a Primary Call to Action.

Types of Primary CTAs

There are two variants of the Primary Call To Action. The standard variant features a single button to direct users to perform a specific action. The expanded variant features a secondary button to present a similar but alternative action. For example, "Call Now" and "Email Now".

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

More Realistic amount of text

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

More Realistic amount of text More Realistic amount of text

Secondary Calls to Action

A Secondary Call To Action consists of a series of 4 cards, each containing an icon, a link, and a description. The clickable cards encourage visitors to explore the different sections of the website without one Call To Action having visual priority over the others.

Link >
Description

Location Maps

The Location Map consists of a header and a subheader, the map itself, and a small collection of contact information including clickable telephone and email.

Head Office

4 Yewholme Drive, Guelph, Ontario
T: 1-519-835-3009
E: hello@2h.media

Team Members

A Team Member is represented by a card containing a staff photo, employee name, job title, biography, a CTA to a separate webpage, a LinkedIn icon and supporting LinkedIn URL. It is recommended that if the employee does not have a LinkedIn, the URL be set to the company LinkedIn page.

Employee Name

Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.

Team Members are intended to be displayed in a Card grid:

Employee Name

Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.

Employee Name

Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.

Employee Name

Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.

Values Sections

A Values Section consists of 3 columns, each containing an icon, a heading, and a short description. The columns are wrapped in a Colored Container. This section can be used to visually display company values or product/service selling points.

Heading

Description

Heading

Description

Heading

Description

3 Column Cards

The 3 Column Card includes 3 sets of heading, subheading, and short paragraph.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Grid

The Image Grid displays rows of images in a customizable format. Combine the following modifiers to achieve the desired look:

.thds-image-grid The base styles for the image grid. Always use these.
.thds-image-grid_center Make the image grid evenly spaced.
.thds-image-grid_cover Cuts off the images for a cleaner grid.
.thds-image-grid_halves Forces a two-column grid.
.thds-image-grid_thirds Forces a three-column grid.
.thds-image-grid_quarters Forces a four-column grid.

.thds-image-grid_halves

.thds-image-grid_thirds

.thds-image-grid_quarters

.thds-image-grid_quarters .thds-image-grid_center

.thds-image-grid_quarters .thds-image-grid_cover

Banner CTA

The Banner CTA includes up to 2 calls to action buttons. Left and right variants are included to allow more flexibility in pictures.

Ready to get started?

519-835-3009 hello@2h.media

Ready to get started?

519-835-3009 hello@2h.media

Card Grid

The Card Grid is designed as a 2-column grid capable of showcasing any combination of single large cards and clusters of 4 smaller cards.

Client Name >

Flexible Grid System

The Card Grid can be adjusted to a 3-column grid or a 4-column grid by applying the class thds-card-grid_thirds or thds-card-grid_quarters respectively.

Client Name >

Card Grid - detailed

Showcase Further Details

This variant of the Card Grid is intended to be paired with a Toolset filter-list to showcase portfolio items or workshops.

Client Name >

Single sentence description

Badge Badge Badge Badge Badge Badge

Client Name >

Single sentence description

Badge Badge Badge Badge Badge Badge

Minimalist CTA

Share a CTA Without Breaking Flow

The Minimalist CTA is intended to be used in the middle of a webpage. Its subtle appearance is intended to be visible without so much presence that it breaks the visual flow of the document.

Learn more about how we build brands:

More Branding >

Branding Services >

Contact Form

This basic contact form can be built in the Contact Form 7 plugin. The styles that govern the form attempt to address some of the limitations of the plugin. Specifically, auto-generated <br> tags are set to "display:none" and a style was added, to be used in combination with placeholder text, to hide labels while leaving them in the document flow for screen readers (thds-contact-form__label_hidden).

Image Overlay

This image overlay uses a gradient to make text somewhat more legible. Though less visually clear than the hero sections above, this is a popular design element.

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Double-click to edit button text.

Roles Table

The Roles Table element uses .thds-roles-table and .thds-roles-table__row classes to eliminate margins on the rows and add alternating background shading. Each row contains a thds-grid_quarters element.

Role

Team

Location

Inquire

Job Title

Department

Province

info@h2nano.ca

Job Title

Department

Province

info@h2nano.ca

Job Title

Department

Province

info@h2nano.ca

If you require assistance using this Design System please contact 2H Media

Contact 2H Media