Foundation CSS Label

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.  

Labels are the caption for an item in a user interface ie., it provides the metadata for the specified field. It can be styled using the particular Foundation CSS classes.

Foundation CSS Label:

• Basics: In this, we give label class to an element to create a Foundation CSS label.
• Coloring: We can add many color classes to our label to give additional meaning.
• Icons: We can also attach icons to our labels.

Syntax:

<span class="label coloring-class">
 <i class="icons-class"></i>
</span>

Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.

Example 1: This is a basic example illustrating basic labels created using Foundation CSS.

Output:

👁 Image

Example 2: This is a basic example illustrating coloring labels created using Foundation CSS.

Output:

👁 Image

Example 3: This is a basic example illustrating label icons created using Foundation CSS.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/label.html