Section 10.1
#Typography.Headings
Headings
This is an h1
This is an h2
This is an h3
This is an h4
This is an h5
This is an h6
sass/utilities/_typography.scss
, line 5
Section 10.2
#Typography.Paragraphs
Paragraphs
Paragraph
Note: Our paragraphs have a default margin-bottom of 1rem
sass/utilities/_typography.scss
, line 17
Section 10.3
#Typography.Utilities
Typography Utilities
Below are some of our typography utilities.
sass/utilities/_typography.scss
, line 30
Section 10.3.1
#Typography.Utilities.Case
Case
Case encompasses both word and sentence case.
Example:
This is uppercase.
This is lowercase.
This is capitalize.
This IS SENTENCE caSe.
Markup:
Markup
<p class="text--uppercase">This is uppercase.</p>
<p class="text--lowercase">This is lowercase.</p>
<p class="text--capitalize">This is capitalize.</p>
<p class="text--sentencecase">This IS SENTENCE caSe.</p>
sass/utilities/_typography.scss
, line 86
Section 10.3.2
#Typography.Utilities.Color
Color
text-{ color }
, text-{ color }--hover
combines our greyscale, brand colors, and secondary colors maps.
Greyscale | |||
---|---|---|---|
text-white |
text-lighter |
text-light-mid |
text-light |
text-base |
text-dark |
text-black |
Brand colors | |||
---|---|---|---|
text-navy |
text-skyblue |
text-med-blue |
text-beige |
text-peach |
text-salmon |
text-brown |
text-orange |
Example:
Orange Text | Blue Text on Hover | Navy Text, Sky Blue on Hover
Markup:
Markup
<div class="card block-container mb-3 flex--align-center">
<div class="block block-6">
<p>
<span class="text-orange">Orange Text</span> |
<span class="text-med-blue--hover">Blue Text on Hover</span> |
<span class="text-navy text-skyblue--hover">Navy Text, Sky Blue on Hover</span>
</p>
</div>
</div>
sass/utilities/_typography.scss
, line 36
Section 10.3.3
#Typography.Utilities.General
General
General utilities add class-based css transforms like uppercase
and bold
. See the chart below for the full list.
General | |||
---|---|---|---|
text--underline |
text-underline--hover |
text--bold |
text--nowrap |
text--center |
text--right |
text--capitalize |
text--uppercase |
text--lowercase |
text--sentencecase |
text--italic |
NOTE: A flex-- utility should be used were possible. |
---|
The text-underline--hover
class will add an animated underline to links or any element you add the class to. By default, the underline color is the
standard link color in the platform(light blue). If you want to change the color of the element and the underline on hover you can add a text-{color}--hover
class. This will change the color of the underline as well as the element with the hover color class.
Markup:
Markup
<div class="card block-container mb-3 flex--align-center">
<div class="block">
<p>Text underline on hover <a class="text-underline--hover">standard</a>.</p>
<p>Text underline on hover <a class="text-underline--hover text-red--hover">red</a>.</p>
</div>
</div>
sass/utilities/_typography.scss
, line 98
Section 10.3.4
#Typography.Utilities.Sizing
Sizing
text--size-{ size }
leverages percetages for smaller or larger text. The defaut font-size
is 1rem
.
Text sizing | |
---|---|
text--size-xxs |
50% |
text--size-xs |
70% |
text--size-sm |
85% |
text--size-md |
115% |
text--size-lg |
125% |
text--size-xl |
150% |
text--size-xxl |
200% |
Example:
Text xl
Markup:
Markup
<div class="card block-container mb-3 flex--align-center">
<div class="block">
<p class="text--size-xl">Text xl</p>
</div>
</div>
sass/utilities/_typography.scss
, line 63
Section 10.3.5
#Typography.Utilities.TextShadow
Text Shadow
You can add a text-shadow to an element using colors from our greyscale map.
Greyscale | |||
---|---|---|---|
text--shadow-white |
text--shadow-lighter |
text--shadow-light-mid |
text--shadow-light |
text--shadow-base |
text--shadow-dark |
text--shadow-black |
Example:
This text has a base color shadow.
Markup:
Markup
<p class="text--shadow-base">This text has a base color shadow.</p>
sass/utilities/_typography.scss
, line 127