Foundation CSS Kitchen Sink Callout
Last Updated :
02 Mar, 2022
Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really 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. 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.
The Kitchen Sink has the Foundation elements to work well in our websites and applications. The Callout combines the panels and alerts from Foundation 5 into one generic container component. It can be used to create a pop-up box element with some border, padding, and visual styles. It is often used to notify the user about something special: notifications, tips/tricks, discounts, action needed, others. It can be used by applying .callout class.
Foundation CSS Kitchen Sink Callout Classes:
Callouts can be colored using the .primary, .secondary, .success, .warning, or .alert classes.
- primary: Highlights with a sky blue color to the text, which marks as important.
- secondary: Highlights the text with a grey color which marks as of less importance.
- success: Highlights the text with a green color representing the completion of some action.
- alert: Highlights the text with a red color representing incomplete action with danger.
- warning: Highlights the text with a yellow color representing some warning action.
Callouts can be sized using the .small and .large classes.
- .small: Reduces the padding around content.
- .large: Increases the padding around the content.
Syntax:
<div class="callout Kitchen-Sink-Callout-Classes">
...
</div>
Example: This example illustrates the Kitchen Sink Callout in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Callout</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
</head>
<body style="padding:30px;">
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Callout</h3>
<br/>
<div class="callout">
This is a default callout.
</div>
<div class="callout primary">
This is a primary class callout.
</div>
<div class="callout secondary">
This is a secondary class callout.
</div>
<div class="callout success">
This is a success class callout.
</div>
<div class="callout alert">
This is an alert class callout.
</div>
<div class="callout warning">
This is a warning class callout.
</div>
</center>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Callout
Example: This example illustrates the Callout Sizing in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Kitchen Sink Callout
</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
</head>
<body style="padding:30px;">
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Callout</h3>
<br/>
<div class="callout">
This is a default callout.
</div>
<div class="callout small">
This is a small class callout.
</div>
<div class="callout large">
This is a large class callout.
</div>
</center>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Callout
Reference: https://get.foundation/sites/docs/kitchen-sink.html#callout
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...