Foundation CSS Callout Sizing
Last Updated :
14 Feb, 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 to 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.
The callouts combine panels and alerts from Foundation 5 into one generic container component. Foundation CSS uses the callout class in the <div> element to create callouts. To change the size of the callout we use large and small classes along with the callout class.
Foundation CSS Callout Sizing class:
- large: The large class increases padding in the callout to make it bigger than the default size.
- small: The small class decreases padding in the callout to make it smaller than the default size.
Syntax:
<div class="callout large">...</div>
Example: This example demonstrates all the size variations of callout using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS 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>
<strong>Foundation CSS Callout</strong><br/><br/>
</center>
<div class="callout small">
Small size <br/>
This is a basic callout.
</div>
<div class="callout">
Default <br/>
This is a basic callout.
</div>
<div class="callout large">
Large Size <br/>
This is a basic callout.
</div>
</body>
</html>
|
Output:
Output
Reference link: https://get.foundation/sites/docs/callout.html#sizing
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...