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. Aliquid iure, nostrum saepe
Level 1
Use the class text-level-1 on any element containing text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iure, nostrum saepe, non quam veniam ex praesentium
Level 2
Use the class text-level-2 on any element containing text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iure, nostrum saepe, non quam veniam ex praesentium qui dolorem expedita voluptatibus
Level 3
Use the class text-level-3 on any element containing text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iure, nostrum saepe, non quam veniam ex praesentium qui dolorem expedita voluptatibus, culpa error natus id maiores sed temporibus
Level 4
Use the class text-level-4 on any element containing text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iure, nostrum saepe, non quam veniam ex praesentium qui dolorem expedita voluptatibus, culpa error natus id maiores sed temporibus nemo officiis.
Level 5
Use the class text-level-5 on any element containing text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iure, nostrum saepe, non quam veniam ex praesentium qui dolorem expedita voluptatibus, culpa error natus id maiores sed temporibus nemo officiis.
Level 6
Use the class text-level-6 on any element containing text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iure, nostrum saepe, non quam veniam ex praesentium qui dolorem expedita voluptatibus, culpa error natus id maiores sed temporibus nemo officiis.
Level 7
Use the class text-level-7 on any element containing text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iure, nostrum saepe, non quam veniam ex praesentium qui dolorem expedita voluptatibus, culpa error natus id maiores sed temporibus nemo officiis.
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.