Design System Usage
This website is built using version 3.0 of the 2H Design System by 2H Media.
Learn more about 2H MediaIntroduction
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.
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.
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.
Links
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>
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
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 mar.
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
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.
Details
Accordion Section without JS
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
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.
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.
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.
Subheading
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
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. 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
- 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.
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
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.
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 textDouble-click this headline to edit the text.
This is a block of text. Double-click this text to edit it.
More Realistic amount of textMore Realistic amount of textSecondary 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.
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
- Password
- Disable 2-factor authentication
Step 2
Setup
Timing
- We complete the integration for you
- Deals will auto populate
- Zero extra fees
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.
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.
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.
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.
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.
Contact Form
Powered by Contact Form 7
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
Display Content Over Images
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.