Typography
Heading Examples
text-xs (12px)
text-sm (14px)
text-base (16px)
text-lg (18px)
text-xl (20px)
text-2xl (24px)
text-3xl (30px)
text-4xl (36px)
text-5xl (48px)
text-6xl (60px)
text-7xl (72px)
text-8xl (96px)
text-9xl(128px)
Inline text elements
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Contextual Text Colors
Your awesome text goes here.
Donec ullamcorper nulla non metus auctor fringilla.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Unordered
A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered
A list of items in which the order does explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Unstyled
This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- Lorem ipsum dolor sit amet
-
Integer molestie lorem at massa
- Phasellus iaculis neque
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
Inline
Place all list items on a single line with
inline-block
and some light padding.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Blockquotes
Your awesome text goes here.
I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.
Use text utilities as needed to change the alignment of your blockquote.
I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.
I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.