Callout

Provide contextual feedback messages for typical user actions with the handful of available and flexible inform messages.

Examples

Callout are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .duik-callout-success).

This is a primary callout — check it out!
This is a secondary callout — check it out!
This is a success callout — check it out!
This is a danger callout — check it out!
This is a warning callout — check it out!
This is a info callout — check it out!
This is a dark callout — check it out!
                      
                        <div class="duik-callout duik-callout-primary" role="callout">
                          This is a primary callout — check it out!
                        </div>
                        <div class="duik-callout duik-callout-secondary" role="callout">
                          This is a secondary callout — check it out!
                        </div>
                        <div class="duik-callout duik-callout-success" role="callout">
                          This is a success callout — check it out!
                        </div>
                        <div class="duik-callout duik-callout-danger" role="callout">
                          This is a danger callout — check it out!
                        </div>
                        <div class="duik-callout duik-callout-warning" role="callout">
                          This is a warning callout — check it out!
                        </div>
                        <div class="duik-callout duik-callout-info" role="callout">
                          This is a info callout — check it out!
                        </div>
                        <div class="duik-callout duik-callout-dark" role="callout">
                          This is a dark callout — check it out!
                        </div>
                      
                    

Icons

This is a primary callout — check it out!
This is a secondary callout — check it out!
This is a danger callout — check it out!
This is a dark callout — check it out!
                      
                        <div class="duik-callout duik-callout-primary duik-callout-dismissible fade show" role="callout">
                          <i class="fas fa-peace mr-2"></i> This is a primary callout — check it out!
                        </div>

                        <div class="duik-callout duik-callout-secondary duik-callout-dismissible fade show" role="callout">
                          <i class="fas fa-thumbs-up mr-2"></i> This is a secondary callout — check it out!
                        </div>

                        <div class="duik-callout duik-callout-danger duik-callout-dismissible fade show" role="callout">
                          <i class="fas fa-hand-pointer mr-2"></i> This is a danger callout — check it out!
                        </div>

                        <div class="duik-callout duik-callout-dark duik-callout-dismissible fade show" role="callout">
                          <i class="fas fa-handshake mr-2"></i> This is a dark callout — check it out!
                        </div>