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:
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.
The 2H Design system uses 4 types of Containers:
The 2H Design system uses several types of Atoms:
The following visual representations include all of the typography classes that can be used within the design system.
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.
The 2H Design system uses 3 types of Cards:
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.
The 2H Design System uses 2 types of Buttons:
The 2H Design System uses 2 types of Badges:
Text here Link - Rich Text and here.
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.
The 2H Design system uses 2 types of Icons:
The 2H Design System uses 2 types of Molecules:
“A quote should be incredibly impactful.” — Matthew Herchel, Marketing Strategist
The 2H Design System uses several types of Organisms:
The Hero Section consists of 3 main elements:
The Hero Section has 4 layout options:
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.
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.
4 Yewholme Drive, Guelph, Ontario
T: 1-519-835-3009
E: [email protected]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.
Read More >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.
Read More >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.
Read More >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis.
Read More >
Description
Description
Description