Badges

Badges are small components useful for labeling and providing additional information. We will use them to finish our contact section.

Basic example

Badge is an element for the use of drawing attention to additional interface information with eye-catching appeal, typically displaying unread messages count.

Example heading New

The construction is very simple, but let's explain the classes present here one by one:

  • inline-block: This applies display: inline-block to the element. It means the element will be inline, but can have width and height, like a block element.

  • whitespace-nowrap: This applies white-space: nowrap to the element. This prevents the text inside the element from wrapping onto the next line.

  • rounded-md: This applies medium rounded corners to the element.

  • bg-primary-100: This applies a background color to the element. The color applied is defined by the primary-100 color in your Tailwind CSS configuration.

  • px-4: This applies horizontal padding (left and right) to the element, equivalent to 1rem or 16px.

  • py-3: This applies vertical padding (top and bottom) to the element, equivalent to 0.75rem or 12px.

  • text-center: This centers the text inside the element.

  • text-lg: This applies large text size to the element.

  • align-top: This applies vertical-align: top to the element. This would only take effect if the element is inline or inline-block.

  • font-bold: This applies font-weight: bold to the element, making the text bold.

  • leading-none: This sets the line-height to 1, meaning the line height will be the same as the font size.

  • text-primary-700: This applies a text color to the element. The color applied is defined by the primary-700 color in your Tailwind CSS configuration.

Icon inside

We can put an icon in a label very easily:

Note that when we use an icon instead of text, we can get rid of many of the previously mentioned text classes.

Now let's add labels to our project.

Step 1 - add text to the badge

In our project we will use a badge with an icon inside, and we will add text next to it. We will put together it in a flexbox.

Press

press@example.com

+1 234-567-87

Thanks to flexbox, we can define how the badge should be aligned in relation to the text.

By default it's aligned to the top. However, if we add .items-center or .items-end class next to the .flex, then we can modify the alignment.

Press

press@example.com

+1 234-567-87

Press

press@example.com

+1 234-567-87

Press

press@example.com

+1 234-567-87

Step 2 - create 4 badges within a grid

Let's create 4 badges for our contact form and place them in the grid, two columns in a row.

Press

press@example.com

+1 654-234-65

Sales questions

sales@example.com

+2 875-345-73

Technical support

support@example.com

+1 234-567-87

Bug report

bugs@example.com

+3 735-325-44

Step 3 - add badges to the Contact section

Now let's add our badges to the second column in the Contact Section.

And this is what it should look like in the end:

Demo and source code for this lesson
Prev Next
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.