Native Blocks
Text Styles
Desktop
Mobile
Style Variations: Eyebrow
Breaking News
Breaking News
Style Variations: Display
Display heading: lorem ipsum dolor
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
H1
Display heading: lorem ipsum dolor sit amet
Display heading: lorem ipsum dolor sit amet, consectetur
H2
Display heading: lorem ipsum dolor sit amet, consectetur
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
H3
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
H4
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
H5
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
H6
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Paragraph – Large
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Display heading: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Paragraph – Medium
Paragraph Medium: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Paragraph Medium: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Paragraph – Small
Paragraph Medium: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Paragraph Medium: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Unordered List – Large
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Unordered List – Medium
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
HR
Buttons
Primary Buttons
Style Variations: Outline
Primary Buttons
Style Variations: Outline
Forms
Normal
Dark Mode
Light Mode
Images
Audit your image treatments, give them names, and give it specs. These styles will be applied via a class so
your options are vast, just try to keep the number of image style options below 5.
Groups – Containers Styles
A wrapper that has a unique design style, think layer styles in Sketch. This can have custom inner padding,
background color/image, design accents, box shadows, etc.
Icon Set Name
70 x 70
48 x 48
