Default Heading Text
Examples using standard h1
to h6
html tags
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Heading with color Text
Examples using standard h1
to h6
html tags
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Heading-Inverse
Examples using heading-inverse
css
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Heading primary to danger
Examples using heading-primary
to
heading-danger
css
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Paragraph Text
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature.
Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look.
You can use the mark tag to highlight text.
Text alignment
Easily realign text to components with text alignment classes.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
Text transform
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
Capitalized text.
Letter spacing
Utilities for controlling the tracking (letter spacing) of an element.
Lorem ipsum dolor sit amet. Tight letter spacing.
Lorem ipsum dolor sit amet. Normal letter spacing.
Lorem ipsum dolor sit amet. Wide letter spacing.
Line Height
Utilities for controlling the leading (line height) of an element.
Lorem ipsum dolor sit amet. Dolor sit amet.
Lorem ipsum dolor sit amet. Dolor sit amet.
Lorem ipsum dolor sit amet. Dolor sit amet.
Lorem ipsum dolor sit amet. Dolor sit amet.
Text-styles
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
This line rendered as italicized text.