Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. 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. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney.
Kitchen Sink has the Foundation elements to work well in our websites and applications. The Kitchen Sink Close Button is a simple component that is used in cases where the user wants to show that something is closeable. Close button is a <button> element, which uses the .close-button class. It is used along with other Foundation CSS components such as Toggler, Reveal, Off-canvas, and other plugins that include open/close actions.
Foundation CSS Kitchen Sink Close Button Class:
- close-button: Used with a button element. Usually displayed with a multiplication icon (X; ×) and has a hover effect. This icon is wrapped in a <span> with the attribute aria-hidden=”true”, so screen readers don’t read the X icon. To clarify the purpose of the button, it is labeled with aria-label.
Syntax:
<div class="callout" data-closable>
<button class="close-button" type="button" data-close>
<span aria-hidden="true">...</span>
</button>
<p>...</p>
</div>Example1:
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Close Button</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Close Button</h3>
<br />
<div class="callout" data-closable>
<button class="close-button" aria-label="Close alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<p>Look at this close button!</p>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Close Button
Example 2: This example shows the callout component using the close button.
<!DOCTYPE html> <html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Close Button</h3>
<br/>
<div class="callout alert" data-closable>
<p>Close button being used with callout.</p>
<button class="close-button"
aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Close Button
Reference:https://get.foundation/sites/docs/kitchen-sink.html#close-button