Foundation CSS Label
Last Updated :
24 Mar, 2022
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>
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...