CoreUI brand card

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Overview

89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
<div class="row">
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-behance">
        <i class="fa fa-behance"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-css3">
        <i class="fa fa-css3"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-dribbble">
        <i class="fa fa-dribbble"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-dropbox">
        <i class="fa fa-dropbox"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-facebook">
        <i class="fa fa-facebook"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-flickr">
        <i class="fa fa-flickr"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-github">
        <i class="fa fa-github"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-google-plus">
        <i class="fa fa-google-plus"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-html5">
        <i class="fa fa-html5"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-instagram">
        <i class="fa fa-instagram"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-linkedin">
        <i class="fa fa-linkedin"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-openid">
        <i class="fa fa-openid"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-pinterest">
        <i class="fa fa-pinterest"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-reddit">
        <i class="fa fa-reddit"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-spotify">
        <i class="fa fa-spotify"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-stack-overflow">
        <i class="fa fa-stack-overflow"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-tumblr">
        <i class="fa fa-tumblr"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-twitter">
        <i class="fa fa-twitter"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-vimeo">
        <i class="fa fa-vimeo"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-vk">
        <i class="fa fa-vk"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-xing">
        <i class="fa fa-xing"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-yahoo">
        <i class="fa fa-yahoo"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-youtube">
        <i class="fa fa-youtube"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
</div><!--/.row-->