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:

Example 1: In the below code, we will use the above variable to demonstrate the use of callout.

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.

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