Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
Kitchen Sink has the elements to work in websites and applications. The Label is the inline style used to define the labels for the input element.
Foundation CSS Kitchen Sink Label Class:
- label: It is used to define the label for the input element.
Types of labels:
- primary label: It is used to create the primary label with a blue color.
- secondary label: It is used to create the secondary label with a grey color.
- success label: It is used to create the success label with a green color.
- alert label: It is used to create the alerting label with a red color.
- warning label: It is used to create the warning label with a yellow color.
Syntax:
<span class="primary label">Primary</span>
Example 1: This example describes the Kitchen Sink Label in Foundation CSS.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Label</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Label</h3>
<strong>Primary label:</strong>
<span class="primary label">Primary Label</span><br>
<strong>Secondary label:</strong>
<span class="secondary label">Secondary Label</span>
</body>
</html>
|
Output:
Kitchen Sink Label
Example 2: This example describes the Kitchen Sink Label with different label classes in Foundation CSS.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Label</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Label</h3>
<strong>Success Label: </strong>
<span class="success label">Success Label</span><br>
<strong>Alerting Label: </strong>
<span class="alert label">Alert Label</span><br>
<strong>Warning Label: </strong>
<span class="warning label">Warning Label</span><br>
</body>
</html>
|
Output:
Kitchen Sink Label
Reference: https://get.foundation/sites/docs/kitchen-sink.html#label