UABIT CSS/JS Library

# Callouts

Callout example

source

# Usage

A callout is used to bring attention to a specific piece of information that would otherwise be difficult to see. This works best when the content is a paragraph or text content.

# Markup

<div class="callout">
  <p>Callout text</p>
</div>

# Themes

Adding a theme class will change the color of the accent border. Remember to consider thoughtful use of color.

# Primary callout-primary

Primary callout example

<div class="callout callout-primary">
  <p>Callout Text</p>
</div>

# Secondary callout-secondary

Secondary callout example

<div class="callout callout-secondary">
  <p>Callout Text</p>
</div>

# Accent/Notice callout-accent or callout-notice

Accent/Notice callout example

<div class="callout callout-accent">
  <p>Callout Text</p>
</div>

# Caution callout-caution

Caution callout example

<div class="callout callout-caution">
  <p>Callout Text</p>
</div>

# Warning callout-warning

Warning callout example

<div class="callout callout-warning">
  <p>Callout Text</p>
</div>

← Comparison Table →