Foundation CSS Callout Basics

Last Updated : 02 Mar, 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.

Foundation CSS Callout Basics class:

callout: It is used to create the callout to put any type of content.

Syntax:

<div class="callout">
  ........
</div>

Example 1: The following code demonstrates the Callout Basics with some content and link.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <!-- Compressed CSS -->
  <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
    crossorigin="anonymous"> 
</head> 
  
<body>     
  <center> 
    <h2 style="color: green;"> 
      GeeksforGeeks 
    </h2> 
  
    <h3> 
        Foundation CSS Callout Basics 
    </h3> 
  </center> 
  
  <div class="callout"> 
    <h5> 
        This is Basic callout. 
    </h5> 
  
    <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>

Output:

Example 2: The following code demonstrates the Callout Basics with some content, button, and image.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
      crossorigin="anonymous"> 
</head> 
  
<body>     
    <center> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
  
        <h3> 
            Foundation CSS Callout Basics 
        </h3> 
    </center> 
  
    <div class="callout"> 
        <h5> 
            This is Basic callout. 
        </h5> 
  
        <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> 
  
        <button class="button"> 
            Button 1 
        </button>   
    </div> 
  
    <div class="callout"> 
        <h5>This is Basic callout.</h5> 
        <strong>GeeksforGeeks Image</strong><br> 
          
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt=""> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" alt=""> 
    </div> 
</body> 
  
</html>