Skip to content

Callout

A callout can be used as a short information notice. Unlike the Bootstrap alert, this is not meant to call for the users attention when an action has happened. The icons are automaticlly populated within the header.

The callout has a parent class .callout and two child classes: .callout-header and .callout-body.

The .callout class has two config classes; a styling class and an icon class.

Header
Body
Header
Body
<div class="callout callout-note">
    <div class="callout-header">
        Header
    </div>
    <div class="callout-body">
        Body
    </div>
</div>

<div class="callout callout-note callout-no-icon">
    <div class="callout-header">
        Header
    </div>
    <div class="callout-body">
        Body
    </div>
</div>

Icons

Every callout style has a complimentary icon that is automaticlly added to the ::before pseudo-element of .callout-header. The icons that are used are svg's from the free version of Font awesome.

You can remove the icon using the .callout-no-icon class. This makes it possible to add a custom icon.

Default icon
No icon
Custom icon
<div class="callout callout-note">
    <div class="callout-header">
        Default icon
    </div>
</div>

<div class="callout callout-note callout-no-icon">
    <div class="callout-header">
        No icon
    </div>
</div>

<div class="callout callout-note callout-no-icon">
    <div class="callout-header">
        <i class="fa-solid fa-heart me-3"></i>Custom icon
    </div>
</div>

Bootstrap icons

If you prefer lighter icons you can use the .callout-bs-icons to change out the Font awesome icons to Bootstrap icons. See the different icons under Styles below.

Bootstrap icon
<div class="callout callout-note callout-bs-icon">
    <div class="callout-header">
        Bootstrap icon
    </div>
</div>

Styling

To style the callout you add a .callout-{type} class. All classes are listed below.

Note

Proper support for Boostrap theme colors will come later

Note
Summary
Info
Todo
Tip
Success
Question
Warning
Failure
Danger
Bug
Example
Quote
<div class="callout callout-note">...</div>
<div class="callout callout-summary">...</div>
<div class="callout callout-info">...</div>
<div class="callout callout-todo">...</div>
<div class="callout callout-tip">...</div>
<div class="callout callout-success">...</div>
<div class="callout callout-question">...</div>
<div class="callout callout-warning">...</div>
<div class="callout callout-failure">...</div>
<div class="callout callout-danger">...</div>
<div class="callout callout-bug">...</div>
<div class="callout callout-example">...</div>
<div class="callout callout-quote">...</div>

Note
Summary
Info
Todo
Tip
Success
Question
Warning
Failure
Danger
Bug
Example
Quote
<div class="callout callout-bs-icon callout-note">...</div>
<div class="callout callout-bs-icon callout-summary">...</div>
<div class="callout callout-bs-icon callout-info">...</div>
<div class="callout callout-bs-icon callout-todo">...</div>
<div class="callout callout-bs-icon callout-tip">...</div>
<div class="callout callout-bs-icon callout-success">...</div>
<div class="callout callout-bs-icon callout-question">...</div>
<div class="callout callout-bs-icon callout-warning">...</div>
<div class="callout callout-bs-icon callout-failure">...</div>
<div class="callout callout-bs-icon callout-danger">...</div>
<div class="callout callout-bs-icon callout-bug">...</div>
<div class="callout callout-bs-icon callout-example">...</div>
<div class="callout callout-bs-icon callout-quote">...</div>

You can use the header without the body if you just want a quick info with some coloring.

Header
Header
<div class="callout callout-note">
    <div class="callout-header">
        Header
    </div>
</div>  

<div class="callout callout-note callout-no-icon">
    <div class="callout-header">
        Header
    </div>
</div>

Body

The body can contain the information you want to communicate. It can be used without the header for a more compact style.

Body 
<div class="callout callout-note">
    <div class="callout-body">
        Body
    </div>
</div>