Display headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Display 1
Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.
Display 2
In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est sodales augue rutrum tincidunt. Quisque a malesuada purus.
Display 3
Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.
Display 4
Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.
Display 5
Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget.
<h1 class="text-2xl">text-2xl</h1>
<h1 class="text-xl">text-xl</h1>
<h1 class="text-lg">text-lg</h1>
<h1 class="text-base">text-base</h1>
<h1 class="text-sm">text-sm</h1>
Headings
We invest in the world’s potential
Payments tool for companies
Get back to growth with the world's #1 CRM.
Regain control over your days
Better Data Scalable AI.
We invest in the world’s potential
Team management
AelioPRO
AelioThis is secondary text
Inline text elements
Styling for common inline HTML5 elements.
Your title goes here
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.
Nulla attr vitae elit libero, a pharetra augue.
<p class="lead">
Your title goes here
</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
Contextual Text Colors
Available color variations.
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.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<p class="text-muted">
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
</p>
<p class="text-primary">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p class="text-success">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<p class="text-info">
Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>
<p class="text-warning">
Etiam porta sem malesuada magna mollis euismod.
</p>
<p class="text-danger">
Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p class="text-dark">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p class="text-white">
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
</p>
<p class="text-black-50">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p class="text-white-50">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
Unordered list
A list of items in which the order does not explicitly matter.
Password requirements:
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ #
Password requirements:
- At least 10 characters
- At least one lowercase character
- At least one special character, e.g., ! @ # ?
-
List item one
- You might feel like you are being really "organized" o
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
-
List item two
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
-
List item three
- Again please don't nest lists if you want
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
Ordered list
Use the ol tag to create an ordered list of items with numbers.
Top students:
- Bonnie Green with 70 points
- Jese Leos with 63 points
- Leslie Livingston with 57 points
Unstyled
Use the list-none class to disable the list style bullets or numbers.
Password requirements:
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
Description list
Create a description list by using the dl tag and set the term and name with the following example.
- Email address
- yourname@flowbite.com
- Home address
- 92 Miles Drive, Newark, NJ 07103, California, USA
- Phone number
- +00 123 456 789 / +12 345 678
List with icons
Use this example to create a list of items with custom SVG icons instead of the default bullets.
- Individual configuration
- No setup, or hidden fees
- Team size: 1 developer
- Premium support: 6 months
- Free updates: 6 months
Advanced layout
This example can be used to show more details for each list item such as the user’s name, email and profile picture.
-
Neil Sims
email@flowbite.com
$320 -
Bonnie Green
email@flowbite.com
$3467 -
Michael Gough
email@flowbite.com
$67 -
Thomas Lean
email@flowbite.com
$2367 -
Lana Byrd
email@flowbite.com
$367
