Foundation CSS Callout Sass Reference
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.
Callout is used to create the panel to store some content. The callout is an element in which we can put any type of content like text, images, videos, etc. We can create the callout using the callout class. In this article, we will discuss how to create the basic callout.
Variable Used:
| Variable-Name | Description | Type | Default-Value |
|---|---|---|---|
| $callout-background | This variable is used to define the default background color. | Color | $white |
| $callout-background-fade | This variable is used to define the default fade value for callout backgrounds. | Number | 85% |
| $callout-border | This variable is used to define the default border style for callouts. | List | 1px solid rgba ($black, 0.25) |
| $callout-margin | This variable is used to define the default bottom margin for callouts. | Number | 0 0 1rem 0 |
| $callout-sizes | This variable is used to define the sizes for callout paddings. | Map | small: 0.5rem default: 1rem large: 3rem |
| $callout-font-color | This variable is used to define the default font color for callouts. | Color | $body-font-color |
| $callout-font-color-alt | This variable is used to define the default font color for callouts, if the callout has a dark background. | Color | $body-background |
| $callout-radius | This variable is used to define the default border-radius for callouts. | Color | $global-radius |
| $callout-link-tint | This variable is used to define the amount to tint links used within colored panels. | Number or Boolean | 30% |
Example 1: In the below code, we will use the above variable to demonstrate the use of callout.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body style="margin:15px;"> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3>A computer science portal for geeks</h3> </center> <div class="callout"> <strong>GeeksforGeeks</strong> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </a> </div> </body> </html> |
SASS Code:
$callout-background: white;
.callout {
background-color:$callout-background;
}
Compiled CSS Code:
.callout {
background-color: white;
}
Output:
Example 2: In the below code, we will use the above variable to demonstrate the use of callout.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body style="margin:15px;"> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3>A computer science portal for geeks</h3> </center> <div class="callout"> <strong>GeeksforGeeks</strong> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </a> </div> </body> </html> |
SASS Code:
$callout-border: 1px solid black;
.callout {
border:$callout-border;
}
Compiled CSS Code:
.callout {
border: 1px solid black;
}
Output:
Reference: https://get.foundation/sites/docs/callout.html
Please Login to comment...