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.

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.

Contextual Text Colors

Available color variations.

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?