Skip to content
Related Articles

Related Articles

Foundation CSS Label

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Mar, 2022
View Discussion
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Foundation CSS Label</title>
        <link rel="stylesheet" href=
              crossorigin="anonymous">       
    </head>
    <body>
        <center>
           <h2 style="color:green;">GeeksforGeeks</h2>
           <h3>Foundation CSS Label</h3>
         
           <span class="label">Label 1</span>
           <span class="label">Label 2</span>
           <span class="label">Label 3</span>
           <span class="label">Label 4</span>
        </center>
    </body>
</html>


Output:

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Foundation CSS Label Coloring classes</title>
      
    <link rel="stylesheet" href=
    crossorigin="anonymous">
      
    <style>
        .label{
            font-size: 1.5rem;
        }
    </style>
</head>
  
<body>
    <center>
        <h2 style="color:green;">
            GeeksforGeeks
        </h2>
  
        <h3>Foundation CSS Label Coloring</h3>
  
        <div class="label success">
            Success
        </div>
  
        <div class="label alert">
            Alert
        </div>
  
        <div class="label warning">
            Warning
        </div>
    </center>
</body>
</html>


Output:

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Label Icons    </title>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
            <strong>Foundation CSS Label Icons</strong>
        <br>
        <span class="label">
            <i class="fi-magnifying-glass"></i> Magnifying Glass
        </span>
        <span class="label">
            <i class="fi-social-github"></i> Github
        </span>
        <span class="label">
            <i class="fi-zoom-out"></i> Zoom-out
        </span>
        <span class="label">
            <i class="fi-bluetooth"></i> Bluetooth
        </span>
        <span class="label">
            <i class="fi-mail"></i> Mail
        </span>
    </center>
</body>
</html>


Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!