Design System Usage

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

Introduction

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

The Canvas of the Website

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_colorful 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_colorful_Primary
- .thds-container_colorful_Secondary
- .thds-container_colorful_Tertiary
- .thds-container_colorful_UI-2

Atoms

The Building Blocks of the Website

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 several types of Atoms:

Typography

A Uniform Type System

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.

Cards

Create Additional Distinction

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

Group Sets of Related Items

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

Visible Call to Action

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

Highlight Information

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

Worth a Thousand Words

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

The Most Basic Call to Action

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

Give Content Personality

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

Bonded Atoms Working Together

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 2 types of Molecules:

Inline Entries

Lists with Descriptions

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

Highlight Impactful Statements

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

Instructions

Draw Attention to Each Step

The Instruction block consists of pairs of repeating svg bullets and text. This is not a List.

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.

Organisms

Elements that Function Independently

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 several types of Organisms:

Hero Sections

Start Off Strong

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
[email protected]Optional Link

Primary Title

Introductory text

Optional Link

Copy Sections

The most common type of page content

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

Header

Subheader

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.

Subheader

Intro Sections

Concise Content Delivery

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

Expanded Content

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

Strategy

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

Aside Sections

Break up Pages with Text and Images.

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.

Header

Subheader

Header

Subheader

Primary Calls to Action

Direct Visitors to Specific Actions

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

Help Visitors Explore

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

Enhance the Contact Page

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.

Contact Us

Head Office

4 Yewholme Drive, Guelph, Ontario
T: 1-519-835-3009
E: [email protected]

Team Members

View Employee Information

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.

Job Title

Employee Name

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

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

Job Title

Employee Name

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

Job Title

Employee Name

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

Job Title

Employee Name

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

Values Sections

Highlight Key Selling Points

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 card

Structured Data

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

Step 1

Access

Heading

Email
Password
Disable 2-factor authentication

Step 2

Setup

Timing

We complete the integration for you
Deals will auto populate
Zero extra fees

Step 3

Support

Questions?

Image Grid

Flexible Content

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

Showcase A Friendly Face

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

Portfolio Hero SLider

Lead With Accomplishments

This organism is built to showcase portfolio items on the homepage. It requires an active Toolset integration to function.

Portfolio Item Title

Read Case Study >

Primary Title

Introductory text

Optional Link

Card Grid

Flexible Grid System

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 >

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

Contact 2H Media