Foundation CSS Kitchen Sink Switch
Last Updated :
01 Mar, 2022
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and 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. In this article, we will discuss the Kitchen Sink Switch in Foundation CSS.
Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Switch is used to add the toggle switches to change their states.
Kitchen Sink Switch Classes:
- switch: This class is used to add the switch to toggle between 2 states.
- tiny: This class is used to define the switch as a tiny size switch.
- small: This class is used to define the switch as a small size switch.
- large: This class is used to define the switch as a large size switch.
Syntax:
<div class="switch tiny">
....
</div>
Example 1: The below example illustrates the use of the Kitchen Sink Switch with the switch tiny class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<style>
.switch-paddle {
background-color: green;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div class="grid-container">
<h6>Kitchen Sink tiny switch</h6>
<div class="switch tiny"
style="margin-left: 50px;">
<input class="switch-input"
id="switch-1"
type="checkbox">
<label class="switch-paddle"
for="switch-1">
</label>
</div>
</div>
</body>
</html>
|
Output:
Kitchen Sink tiny Switch
Example 2: The below example illustrates the use of the Kitchen Sink Switch with a switch small class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<style>
.switch-paddle {
background-color: green;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div class="grid-container">
<h6>Kitchen Sink small switch</h6>
<div class="switch small"
style="margin-left: 50px;">
<input class="switch-input"
id="switch-2"
type="checkbox">
<label class="switch-paddle"
for="switch-2">
</label>
</div>
</div>
</body>
</html>
|
Output:
Kitchen Sink small Switch
Example 3: The below example illustrates the use of the Kitchen Sink Switch with a switch large class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<style>
.switch-paddle {
background-color: green;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div class="grid-container">
<h6>Kitchen Sink large switch</h6>
<div class="switch large">
<input class="switch-input"
id="switch-3"
type="checkbox">
<label class="switch-paddle"
for="switch-3">
</label>
</div>
</div>
</body>
</html>
|
Output:
Kitchen Sink large Switch
Reference: https://get.foundation/sites/docs/kitchen-sink.html#switch
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...