Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. In this article, we will discuss how to change the color of callouts made using Foundation CSS.
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 color of the background of the callout we use foundation CSS, contextual color classes, along with the “callout” class.
Foundation CSS Callout Coloring Class:
- primary: This class is used for setting the color of the callout to the primary color of the palette. The default color is blue.
- secondary: This class is used for setting the color of the callout to the secondary color of the palette. The default color is gray.
- success: This class is used for setting the color of the callout to the success color of the palette. The default color is green.
- alert: This class is used for setting the color of the callout to the alert color of the palette. The default color is red.
- warning: This class is used for setting the color of the callout to the warning color of the palette. The default color is yellow.
Syntax:
<div class="callout color-class">contents...</div>
Example: This example demonstrates all the color variations of callout made using Foundation CSS.
<!DOCTYPE html> <html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- Compressed JavaScript -->
<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 primary">
Primary <br/>
This is a basic callout.
</div>
<div class="callout secondary">
Secondary <br/>
This is a basic callout.
</div>
<div class="callout success">
Success <br/>
This is a basic callout.
</div>
<div class="callout alert">
Alert <br/>
This is a basic callout.
</div>
<div class="callout warning">
Warning <br/>
This is a basic callout.
</div>
</body>
</html>
|
Output: