Super Admin 2.0

Basic example

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
    </div>
</div>

Card with actions

Cards can also contains action links in icon format.

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>

        <div class="actions">
            <a href="" class="actions__item zwicon-cog"></a>
            <a href="" class="actions__item zwicon-refresh-double"></a>

            <div class="dropdown actions__item">
                <i data-toggle="dropdown" class="zwicon-more-h"></i>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="" class="dropdown-item">Refresh</a>
                    <a href="" class="dropdown-item">Manage Widgets</a>
                    <a href="" class="dropdown-item">Settings</a>
                </div>
            </div>
        </div>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
    </div>
</div>

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

<div class="card">
    <div class="card-body">
        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

Card links

Links are added and placed next to each other by adding .card-link to a <a> tag.

<!-- 1 -->
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>

        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>


<!-- 2 -->
<div class="card">
    <div class="card-body">
        <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>

        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Image caps

Cards can also include images in the top and bottom.

<!-- Top -->
<div class="card">
    <img class="card-img-top" src="...">

    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

<!-- Bottom -->
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <img class="card-img-bottom" src="...">
</div>

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

<div class="card">
    <img class="card-img" src="...">

    <div class="card-img-overlay">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

            <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
</div>

Header and footer

Add an optional header and/or footer within a card.

<!-- Header -->
<div class="card">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

<!-- Footer -->
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    <div class="card-header"><small>2 days ago</small></div>
</div>

<!-- Header and Footer -->
<div class="card">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    <div class="card-header"><small>2 days ago</small></div>
</div>

Background and color

Use text and background utilities to change the appearance of a card.

<!-- Primary -->
<div class="card text-white bg-primary">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

<!-- Success -->
<div class="card text-white bg-success">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

<!-- Danger -->
<div class="card text-white bg-danger">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

<!-- Center -->
<div class="card text-center">
    <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="" class="card-link">Go somewhere</a>
    </div>
</div>

<!-- Right -->
<div class="card text-right">
    <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="" class="card-link">Go somewhere</a>
    </div>
</div>

Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

<div class="card-group">
    <div class="card">
        ....
    </div>
    <div class="card">
        ...
    </div>
    <div class="card">
        ...
    </div>
</div>

Card Decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

<div class="card-deck">
    <div class="card">
        ....
    </div>
    <div class="card">
        ...
    </div>
    <div class="card">
        ...
    </div>
</div>

Card Column

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

<div class="card-columns">
    <div class="card">
        ....
    </div>
    <div class="card">
        ...
    </div>
    <div class="card">
        ...
    </div>
</div>

Card columns can also be extended and customized with some additional code. Shown below is an extension of the .card-columns class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}