Typography

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.

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.

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.

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
    1. You might feel like you are being really "organized" o
    2. Nested navigation in UIs is a bad idea too, keep things as flat as possible.
    3. 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:

  1. Bonnie Green with 70 points
  2. Jese Leos with 63 points
  3. 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 image

    Neil Sims

    email@flowbite.com

    $320
  • Neil image

    Bonnie Green

    email@flowbite.com

    $3467
  • Neil image

    Michael Gough

    email@flowbite.com

    $67
  • Neil image

    Thomas Lean

    email@flowbite.com

    $2367
  • Neil image

    Lana Byrd

    email@flowbite.com

    $367

Horizontal list

Use this example to create a horizontally aligned list of items.

Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?