Cards - Documentation - tabler.github.io - a responsive, flat and full featured admin template

Jane Pearson Administrator

# Documentation

Browse source code
Introduction
Alerts Avatars Buttons Colors Cards Charts Form components Tags Typography
Edit this page

## Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.

### Default card

### Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Card title</h3>
      </div>
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
      </div>
    </div>

### Advanced card

### Card title

Action 1 Action 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Card title</h3>
        <div class="card-options">
            <a class="btn btn-secondary btn-sm">Action 1</a>
            <a class="btn btn-secondary btn-sm ml-2">Action 2</a>
        </div>
      </div>
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
      </div>
      <div class="card-footer">
        This is standard card footer
      </div>
    </div>

### Blog post card

The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We’ve added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.

#### And this isn't my nose. This is a false one.

Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...
Rose Bradley 3 days ago

    <div class="card">
      <a href="#"><img class="card-img-top" src="./demo/photos/david-klaasen-54203-500.jpg" alt="And this isn&#39;t my nose. This is a false one."></a>
      <div class="card-body d-flex flex-column">
        <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
        <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
        <div class="d-flex align-items-center pt-5 mt-auto">
          <div class="avatar avatar-md mr-3" style="background-image: url(./demo/faces/female/18.jpg)"></div>
          <div>
            <a href="./profile.html" class="text-default">Rose Bradley</a>
            <small class="d-block text-muted">3 days ago</small>
          </div>
          <div class="ml-auto text-muted">
            <a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
          </div>
        </div>
      </div>
    </div>

### Row deck

If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.

Short content
Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Short content

    <div class="row row-cards row-deck">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">Short content</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">Short content</div>
            </div>
        </div>
    </div>

### Post card with aside image

You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:

#### And this isn't my nose. This is a false one.

Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...
Rose Bradley 3 days ago

    <div class="card card-aside">
      <a href="#" class="card-aside-column" style="background-image: url(./demo/photos/david-klaasen-54203-500.jpg)"></a>
      <div class="card-body d-flex flex-column">
        <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
        <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
        <div class="d-flex align-items-center pt-5 mt-auto">
          <div class="avatar avatar-md mr-3" style="background-image: url(./demo/faces/female/18.jpg)"></div>
          <div>
            <a href="./profile.html" class="text-default">Rose Bradley</a>
            <small class="d-block text-muted">3 days ago</small>
          </div>
          <div class="ml-auto text-red">
            <a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
          </div>
        </div>
      </div>
    </div>

### Color variations

### Card status

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

### Card status on left side

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

    <div class="row row-cards row-deck">
        <div class="col-md-6">
            <div class="card">
      <div class="card-status bg-purple"></div>
      <div class="card-header">
        <h3 class="card-title">Card status</h3>
      </div>
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
      </div>
    </div>
        </div>
        <div class="col-md-6">
            <div class="card">
      <div class="card-status card-status-left bg-blue"></div>
      <div class="card-header">
        <h3 class="card-title">Card status on left side</h3>
      </div>
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
      </div>
    </div>
        </div>
    </div>

### Card with switch

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Card with switch</h3>
        <div class="card-options">
          <label class="custom-switch m-0">
            <input type="checkbox" value="1" class="custom-switch-input" checked>
            <span class="custom-switch-indicator"></span>
          </label>
        </div>
      </div>
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
      </div>
    </div>

### Card with loader

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Card with loader</h3>
      </div>
      <div class="card-body">
        <div class="dimmer active">
          <div class="loader"></div>
          <div class="dimmer-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
          </div>
        </div>
      </div>
    </div>