Callout

Callout

Displays a detailed message to the user, also allowing it to be dismissed.

<div class="callout fade in callout-warning">
    <button
        type="button"
        class="close"
        data-dismiss="callout"
        aria-hidden="true">&times;</button>
    <div class="header">
        <i class="icon-warning"></i>
        <h3>Warning warning</h3>
        <p>My arms are flailing wildly</p>
    </div>
    <div class="content">
        <p>Insert coin(s) to begin play</p>
    </div>
</div>

No sub-header

Include the no-subheader class to omit the sub heading.

<div class="callout fade in callout-info no-subheader">
    <div class="header">
        <i class="icon-info"></i>
        <h3>Incoming unicorn</h3>
    </div>
</div>

No icon

Include the no-icon class to omit the icon.

<div class="callout fade in callout-danger no-icon">
    <div class="header">
        <h3>There was a hull breach</h3>
        <ul>
            <li>Get to the chopper</li>
        </ul>
    </div>
</div>

No header

<div class="callout fade in callout-success">
    <div class="content">
        <p>Something good happened</p>
        <ul>
            <li>You found a pony</li>
        </ul>
    </div>
</div>

Data attributes:

  • data-dismiss="callout" - when assigned to an element, the callout hides on click

JavaScript API

Events

  • close.oc.callout - triggered when the callout is closed

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases