Foundation Callouts

Foundation Callouts are used to display important information, warnings, or notifications to users. This chapter covers various uses of Foundation callout components.

Basic Callout

Use the .callout class to create a basic callout:

<div class="callout">
    <h5>This is a Callout</h5>
    <p>This is the callout content. Can contain any HTML elements.</p>
</div>

Callout Colors

Foundation provides various colored callouts:

<!-- Primary callout -->
<div class="callout primary">
    <h5>Primary Information</h5>
    <p>This is a primary information alert.</p>
</div>

<!-- Secondary callout -->
<div class="callout secondary">
    <h5>Secondary Information</h5>
    <p>This is a secondary information alert.</p>
</div>

<!-- Success callout -->
<div class="callout success">
    <h5>Operation Successful</h5>
    <p>Your operation has been completed successfully!</p>
</div>

<!-- Warning callout -->
<div class="callout warning">
    <h5>Warning</h5>
    <p>Please note, this operation may have impact.</p>
</div>

<!-- Alert callout -->
<div class="callout alert">
    <h5>Error</h5>
    <p>Operation failed, please try again.</p>
</div>

Color Usage Guide

Class	Color	Purpose
(default)	Light gray	General information
.primary	Blue	Primary information, hints
.secondary	Gray	Secondary information
.success	Green	Success messages, confirmations
.warning	Yellow	Warnings, attention needed
.alert	Red	Errors, dangerous operations

Closable Callout

Add data-closable attribute and close button:

<div class="callout" data-closable>
    <h5>Closable Callout</h5>
    <p>Click the × button on the right to close this callout.</p>
    <button class="close-button" aria-label="Close callout" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Animated Close

Use data-closable="slide-out-right" to add slide-out animation:

<div class="callout success" data-closable="slide-out-right">
    <h5>Animated Close</h5>
    <p>Will have slide-out animation when closing.</p>
    <button class="close-button" aria-label="Close callout" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Available animation effects:

• slide-out-right - Slide out to the right
• slide-out-left - Slide out to the left
• slide-out-up - Slide up
• slide-out-down - Slide down
• fade-out - Fade out

Callout Sizes

Small Callout

<div class="callout small">
    <p>This is a small callout with smaller padding.</p>
</div>

Large Callout

<div class="callout large">
    <h4>Large Callout</h4>
    <p>This is a large callout with more padding.</p>
</div>

Callouts with Icons

Combine icons to enhance visual effect:

<div class="callout primary">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-info" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>Tip</h5>
            <p>This is a tip message with icon.</p>
        </div>
    </div>
</div>

<div class="callout success">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-check" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>Success</h5>
            <p>Your changes have been saved.</p>
        </div>
    </div>
</div>

<div class="callout warning">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-alert" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>Warning</h5>
            <p>This operation cannot be undone, please proceed with caution.</p>
        </div>
    </div>
</div>

<div class="callout alert">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-x" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>Error</h5>
            <p>Unable to connect to server, please try again later.</p>
        </div>
    </div>
</div>

Custom Callout Styling

Bordered Callout

<style>
    .callout.bordered {
        background: transparent;
        border-left: 4px solid;
    }
    .callout.bordered.primary { border-left-color: #1779ba; }
    .callout.bordered.success { border-left-color: #3adb76; }
    .callout.bordered.warning { border-left-color: #ffae00; }
    .callout.bordered.alert { border-left-color: #cc4b37; }
</style>

<div class="callout bordered primary">
    <p>This is a callout with left border.</p>
</div>

Rounded Callout

<style>
    .callout.rounded {
        border-radius: 10px;
    }
</style>

<div class="callout success rounded">
    <p>This is a rounded callout.</p>
</div>

Other Elements in Callouts

Callout with Buttons

<div class="callout warning">
    <h5>Confirm Action</h5>
    <p>Are you sure you want to delete this item? This action cannot be undone.</p>
    <div class="button-group">
        <a class="button alert">Confirm Delete</a>
        <a class="button secondary">Cancel</a>
    </div>
</div>

Callout with Lists

<div class="callout alert">
    <h5>Form Validation Errors</h5>
    <p>Please correct the following errors:</p>
    <ul>
        <li>Username cannot be empty</li>
        <li>Password must be at least 8 characters</li>
        <li>Email format is incorrect</li>
    </ul>
</div>

Callout with Links

<div class="callout primary">
    <h5>New Feature Launch</h5>
    <p>We just released a new dashboard feature!</p>
    <p><a href="#">View Now &raquo;</a></p>
</div>

Notification Bar Style

Create page top notification bar:

<style>
    .notification-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        margin: 0;
        border-radius: 0;
        text-align: center;
    }
</style>

<div class="callout primary notification-bar" data-closable>
    <p style="margin: 0;">
        <strong>Announcement:</strong> System maintenance will be performed tonight at 22:00, service will be suspended for 30 minutes.
        <button class="close-button" aria-label="Close notification" type="button" data-close>
            <span aria-hidden="true">&times;</span>
        </button>
    </p>
</div>

JavaScript Control

Dynamically Create Callout

function showAlert(type, title, message) {
    var alertHtml = `
        <div class="callout ${type}" data-closable>
            <h5>${title}</h5>
            <p>${message}</p>
            <button class="close-button" aria-label="Close" type="button" data-close>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    `;

    $('#alert-container').append(alertHtml);
    $(document).foundation();
}

// Usage example
showAlert('success', 'Success', 'Operation completed!');
showAlert('alert', 'Error', 'Something went wrong.');

Auto-Dismiss Callout

function showAutoCloseAlert(type, message, duration) {
    var id = 'alert-' + Date.now();
    var alertHtml = `
        <div id="${id}" class="callout ${type}" data-closable>
            <p>${message}</p>
        </div>
    `;

    $('#alert-container').append(alertHtml);
    $(document).foundation();

    setTimeout(function() {
        $('#' + id).fadeOut(function() {
            $(this).remove();
        });
    }, duration || 3000);
}

// Auto dismiss after 3 seconds
showAutoCloseAlert('success', 'Saved successfully!', 3000);

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Callouts Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 30px;
        }
        .demo-section h3 {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }
        .callout.bordered {
            background: #fff;
            border: 1px solid #ddd;
            border-left: 4px solid;
        }
        .callout.bordered.primary { border-left-color: #1779ba; }
        .callout.bordered.success { border-left-color: #3adb76; }
        .callout.bordered.warning { border-left-color: #ffae00; }
        .callout.bordered.alert { border-left-color: #cc4b37; }

        .icon-callout {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        .icon-callout i {
            font-size: 28px;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Callouts Showcase</h1>

        <div class="demo-section">
            <h3>Basic Callout Colors</h3>

            <div class="callout">
                <p>This is the default callout style.</p>
            </div>

            <div class="callout primary">
                <h5>Primary Information</h5>
                <p>This is a primary information alert.</p>
            </div>

            <div class="callout secondary">
                <h5>Secondary Information</h5>
                <p>This is a secondary information alert.</p>
            </div>

            <div class="callout success">
                <h5>Operation Successful</h5>
                <p>Your operation has been completed successfully!</p>
            </div>

            <div class="callout warning">
                <h5>Warning</h5>
                <p>Please note, this operation may have impact.</p>
            </div>

            <div class="callout alert">
                <h5>Error</h5>
                <p>Operation failed, please try again.</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>Closable Callouts</h3>

            <div class="callout success" data-closable>
                <p>Click the × button on the right to close this callout.</p>
                <button class="close-button" aria-label="Close callout" type="button" data-close>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="callout warning" data-closable="slide-out-right">
                <p>Has slide-out animation effect when closing.</p>
                <button class="close-button" aria-label="Close callout" type="button" data-close>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>

        <div class="demo-section">
            <h3>Callouts with Icons</h3>

            <div class="callout primary">
                <div class="icon-callout">
                    <i class="fi-info"></i>
                    <div>
                        <h5>Tip</h5>
                        <p>This is a tip message with icon.</p>
                    </div>
                </div>
            </div>

            <div class="callout success">
                <div class="icon-callout">
                    <i class="fi-check"></i>
                    <div>
                        <h5>Success</h5>
                        <p>Your changes have been saved.</p>
                    </div>
                </div>
            </div>

            <div class="callout warning">
                <div class="icon-callout">
                    <i class="fi-alert"></i>
                    <div>
                        <h5>Attention</h5>
                        <p>This operation cannot be undone, please proceed with caution.</p>
                    </div>
                </div>
            </div>

            <div class="callout alert">
                <div class="icon-callout">
                    <i class="fi-x"></i>
                    <div>
                        <h5>Error</h5>
                        <p>Unable to connect to server, please try again later.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Border Styles</h3>

            <div class="callout bordered primary">
                <p>Primary border style callout.</p>
            </div>

            <div class="callout bordered success">
                <p>Success border style callout.</p>
            </div>

            <div class="callout bordered warning">
                <p>Warning border style callout.</p>
            </div>

            <div class="callout bordered alert">
                <p>Alert border style callout.</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>Callouts with Buttons</h3>

            <div class="callout warning">
                <h5>Confirm Action</h5>
                <p>Are you sure you want to delete this item? This action cannot be undone.</p>
                <div class="button-group small">
                    <a class="button alert">Confirm Delete</a>
                    <a class="button secondary">Cancel</a>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Form Validation Errors</h3>

            <div class="callout alert">
                <h5>Form Validation Errors</h5>
                <p>Please correct the following errors before resubmitting:</p>
                <ul>
                    <li>Username cannot be empty</li>
                    <li>Password must be at least 8 characters</li>
                    <li>Email format is incorrect</li>
                </ul>
            </div>
        </div>

        <div id="alert-container"></div>

        <div class="demo-section">
            <h3>Dynamic Callouts</h3>
            <button class="button success" onclick="showAlert('success', 'Success', 'Operation completed!')">Show Success Alert</button>
            <button class="button alert" onclick="showAlert('alert', 'Error', 'Something went wrong.')">Show Error Alert</button>
            <button class="button warning" onclick="showAlert('warning', 'Warning', 'Please note this operation.')">Show Warning Alert</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();

        function showAlert(type, title, message) {
            var alertHtml = `
                <div class="callout ${type}" data-closable>
                    <h5>${title}</h5>
                    <p>${message}</p>
                    <button class="close-button" aria-label="Close" type="button" data-close>
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;
            $('#alert-container').prepend(alertHtml);
            $(document).foundation();
        }
    </script>
</body>
</html>

Callout Best Practices

1. Semantic colors: Use appropriate colors to convey information type
2. Concise and clear: Alert messages should be short and clear
3. Closability: Non-critical alerts should allow users to close them
4. Consistent position: Maintain consistent callout position throughout the application
5. Accessibility: Use appropriate ARIA attributes

<!-- Good practice -->
<div class="callout success" role="alert" aria-live="polite" data-closable>
    <p>Your changes have been saved.</p>
    <button class="close-button" aria-label="Close alert" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Summary

In this chapter we learned:

• Creating basic callouts
• Different colored callouts
• Closable and animated callouts
• Callouts with icons and custom styling
• Dynamically creating and auto-dismissing callouts
• Callout best practices

Next chapter, we will learn Foundation Progress Bars.

---

Tip: Callouts are an important way to communicate with users. Ensure information is clear and timely, but also avoid overly disturbing users.