core-logo

CoreUI callout

On this page:



Without borders

New Clients
9,123
Recuring Clients
22,643
Pageviews
78,623
Organic
49,123
CTR
23%
Bounce Rate
5%
<div class="c-row">
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-info">
      <small class="c-text-muted">New Clients</small><br>
      <strong class="c-h4">9,123</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-danger">
      <small class="c-text-muted">Recuring Clients</small><br>
      <strong class="c-h4">22,643</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-warning">
      <small class="c-text-muted">Pageviews</small><br>
      <strong class="c-h4">78,623</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-success">
      <small class="c-text-muted">Organic</small><br>
      <strong class="c-h4">49,123</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout">
      <small class="c-text-muted">CTR</small><br>
      <strong class="c-h4">23%</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-primary">
      <small class="c-text-muted">Bounce Rate</small><br>
      <strong class="c-h4">5%</strong>
    </div>
  </div><!--/.col-->
</div><!--/.row-->

With borders

New Clients
9,123
Recuring Clients
22,643
Pageviews
78,623
Organic
49,123
CTR
23%
Bounce Rate
5%
<div class="c-row">
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-info c-b-t-1 c-b-r-1 c-b-b-1">
      <small class="c-text-muted">New Clients</small><br>
      <strong class="c-h4">9,123</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-danger c-b-t-1 c-b-r-1 c-b-b-1">
      <small class="c-text-muted">Recuring Clients</small><br>
      <strong class="c-h4">22,643</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-warning c-b-t-1 c-b-r-1 c-b-b-1">
      <small class="c-text-muted">Pageviews</small><br>
      <strong class="c-h4">78,623</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-success c-b-t-1 c-b-r-1 c-b-b-1">
      <small class="c-text-muted">Organic</small><br>
      <strong class="c-h4">49,123</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-b-t-1 c-b-r-1 c-b-b-1">
      <small class="c-text-muted">CTR</small><br>
      <strong class="c-h4">23%</strong>
    </div>
  </div><!--/.col-->
  <div class="c-col-sm-2">
    <div class="c-callout c-callout-primary c-b-t-1 c-b-r-1 c-b-b-1">
      <small class="c-text-muted">Bounce Rate</small><br>
      <strong class="c-h4">5%</strong>
    </div>
  </div><!--/.col-->
</div><!--/.row-->