Foundation CSS Callout Sass Reference

Last Updated : 09 Sep, 2022

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
         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 href="https://www.geeksforgeeks.org/">
            https://www.geeksforgeeks.org/
        </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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
         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 href="https://www.geeksforgeeks.org/">
            https://www.geeksforgeeks.org/
        </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

Foundation CSS Button Sass Reference

krishna_97

Improve

Article Tags :

Foundation CSS Callout Sass Reference

Similar Reads

Thank You!

What kind of Experience do you want to share?