Text
Text Levels
Text levels are pre-defined
classes you can use when the default
Headings or text
are not enough. When used they define the font-family
, font-size
, line-height
, letter-spacing
, and in some cases font-weight
.
For example, an <h4>
could look like any of the examples below.
Level 0
Use the class text-level-0
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Level 1
Use the class text-level-1
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Level 2
Use the class text-level-2
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Level 3
Use the class text-level-3
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Level 4
Use the class text-level-4
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Level 5
Use the class text-level-5
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Level 6
Use the class text-level-6
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Level 7
Use the class text-level-7
on any element
containing text
.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Text Helpers
We have provided some helper
classes to tweak
the text to your liking.
Text Center
Use the class text-center
to align the text to the center
.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.
Text Right
Use the class text-right
to align the text to the right
.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.
Text Left
Use the class text-left
to align the text to the left
.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.
Text Italic
Use the class text-italic
to emphasise
the text.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.
Text Bold
Use the class text-semibold
to bold
the text.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.
Text Semibold
Use the class text-semibold
to slightly bold
the text.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.
Text Uppercase
Use the class text-uppercase
to capitalise
all of the text. It also applies some letter-spacing
.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.
Text Spaced
Use the class text-spaced
to add top
and bottom
spacing.
Laboris minim cillum elit pariatur commodo consectetur in consequat sint occaecat adipisicing voluptate pariatur mollit.