.png)
Utility Classes
Utility classes are not specific to any website, design, style, or layout. Utility classes manage important CSS properties used throughout many pages, sections, or elements.
These utility classes are copied from the design style guide in the IxD project. Watch this video for a short tutorial.
Quick Reference
1 rem = 16px. Rem's are relative to the root browser font size (default 16px)
Structure
display: flex
direction: left to right wrap down
align: x= left, y= center
gap: 1rem
Headings
Apply the H1 style to any text.
Font-family: source sans pro
Weight: 400
Font-size: 72px or 4.5rem
Line-height: 1.3-
Color: black
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Apply the H2 style to any text.
Font-family: source sans pro
Weight: 400
Font-size: 48px or 3rem
Line-height: 1.3-
Color: black
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Apply the H3 style to any text.
Font-family: source sans pro
Weight: 700
Font-size: 35px or 2.188rem
Line-height: 1.4-
Color: black
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Apply the H4 style to any text.
Font-family: source sans pro
Weight: 700
Font-size: 24px or 1.5rem
Line-height: 1.5-
Color: black
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Apply the H5 style to any text.
Font-family: source sans pro
Weight: 700
Font-size: 19px or 1.188rem
Line-height: 1.7-
Color: black
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Apply the H6 style to any text.
Font-family: source sans pro
Weight: 700
Font-size: 16px or 1rem
Line-height: 1.7-
Color: black
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Text Classes
Sets assigned styles to the rich text element.
A Rich text element (RTE) is the perfect element for creating long-form content like blog posts, about pages, biographies, etc. Instead of adding individual heading, paragraph, list, or image elements, you can double-click into a Rich text element to create and format text, custom code, and media elements.
Sets assigned styles to the rich text element.
A Rich text element (RTE) is the perfect element for creating long-form content like blog posts, about pages, biographies, etc. Instead of adding individual heading, paragraph, list, or image elements, you can double-click into a Rich text element to create and format text, custom code, and media elements.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
size: 1.313rem
text-size-large
size: 1.125rem
text-size-medium
size: 1rem
text-size-regular
size: 0.875rem
text-size-small
size: 0.75rem
text-size-tiny
text-decoration: strikethrough
text-style-strikethrough
text-style: italicize
text-style-italic
opacity: 60%
text-style-muted
text-transform: capitalize
text-style-allcaps
word-break: normal
text-wrap: no wrap
The text in this no wrap style will continue to the right of the page because it does not wrap down. Lorem ipsum odor amet, consectetuer adipiscing elit. Ante eleifend convallis netus donec viverra gravida velit. Ligula leo netus magnis est praesent taciti faucibus. Velit erat pulvinar pulvinar cras aptent proin hendrerit.
text-color: #2d62ff
text-decoration: underline
text-style-link
padding(left,right): 1.25rem
font-size: 1.25rem
height: 1.5- (- means unitless)
border-left: width 0.25rem, color #e2e2e2
Lorem ipsum odor amet, consectetuer adipiscing elit. Ante eleifend convallis netus donec viverra gravida velit. Ligula leo netus magnis est praesent taciti faucibus. Velit erat pulvinar pulvinar cras aptent proin hendrerit. Erat varius varius vivamus porta ex ac. Risus scelerisque ipsum ipsum nam velit senectus dolor eleifend. Habitasse amet velit; finibus nam turpis accumsan non mattis vivamus. Mauris hac orci rhoncus id suscipit sollicitudin. Vitae cursus urna a class dictum elit suscipit.
-webkit-line-clamp: 2
This limits the text line to 2 lines and truncates the remaining text. Lorem ipsum odor amet, consectetuer adipiscing elit. Ante eleifend convallis netus donec viverra gravida velit. Ligula leo netus magnis est praesent taciti faucibus. Velit erat pulvinar pulvinar cras aptent proin hendrerit. Erat varius varius vivamus porta ex ac. Risus scelerisque ipsum ipsum nam velit senectus dolor eleifend. Habitasse amet velit; finibus nam turpis accumsan non mattis vivamus. Mauris hac orci rhoncus id suscipit sollicitudin. Vitae cursus urna a class dictum elit suscipit.
-webkit-line-clamp: 3
This limits the text line to 3 lines and truncates the remaining text. Lorem ipsum odor amet, consectetuer adipiscing elit. Ante eleifend convallis netus donec viverra gravida velit. Ligula leo netus magnis est praesent taciti faucibus. Velit erat pulvinar pulvinar cras aptent proin hendrerit. Erat varius varius vivamus porta ex ac. Risus scelerisque ipsum ipsum nam velit senectus dolor eleifend. Habitasse amet velit; finibus nam turpis accumsan non mattis vivamus. Mauris hac orci rhoncus id suscipit sollicitudin. Vitae cursus urna a class dictum elit suscipit.
opacity: 40%
Sample text is being used as a placeholder for real text that is normally present.
opacity: 50%
Sample text is being used as a placeholder for real text that is normally present.
opacity: 80%
Sample text is being used as a placeholder for real text that is normally present.
opacity: 100%
Sample text is being used as a placeholder for real text that is normally present.
Colors
color: black
Heading
color: #004c98
Heading
color: white
Heading
background-color: #fff
background-color: #004c98
background-color: #f7cf3d
background-color: #0065cb
background-color: #f7f7f8
Max-Width
breakpoint: all
width: 100%
max-width: none
breakpoint: all
width: 100%
max-width: none
The max width is set to none. For full responsiveness, use max-width-full unless design requirements necessitate a specific max width for tablet.
breakpoint: all
width: 100%
max-width: none
The max width is set to none. For full responsiveness, use max-width-full unless design requirements necessitate a specific max width for mobile-portrait.
breakpoint: all
width: 100%
max-width: none
The max width is set to none. For full responsiveness, use max-width-full unless design requirements necessitate a specific max width for mobile-landscape.
width: 100%
max-width: 80rem
width: 100%
max-width: 64rem
width: 100%
max-width: 48rem
width: 100%
max-width: 32rem
width: 100%
max-width: 20rem
width: 100%
max-width: 16rem
width: 100%
max-width: 12rem
Padding Classes
The padding system follows this logic [padding-direction] + [padding-size]. e.g. padding-bottom + padding-small
Padding-direction
Padding-Size
Padding-Section
padding(top,bottom): 3rem
padding(top,bottom): 5rem
padding(top,bottom): 8rem
Margin Classes
The padding system follows this logic [margin-direction] + [margin-size]. e.g. margin-bottom + margin-small
Margin-Direction
Margin-Size
margin: 0rem
margin: 0.125rem
