View on GitHub

Callouts

Use callouts to quickly draw attention to specific actions with an extended explanation.

On this page

Examples

Explore this thing. Learn more about this thing.

html

<div class="callout">
  <div class="callout-content">
    <strong>Explore this thing.</strong> Learn more about this thing.
  </div>

  <div class="callout-secondary">
    <button class="btn btn-primary">Get started</button>
  </div>
</div>

CSS

Sass variables

$callout-bg:            $white;
$callout-padding-x:     $spacer * 1.3;
$callout-padding-y:     $spacer;
$callout-border-width:  $border-width;
$callout-border-color:  $gray-200;
$callout-border-radius: $border-radius;