Avant UI Kit

Documentation

Card

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.

Basic

A card is a simple component but it supports customizations and a variety of content.

This is some text within a card body. 
<div class="card">
    <div class="card-body">
        This is some text within a card body.
    </div>
</div>

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag. Subtitles are used by adding a .card-subtitle to a <h*> tag.

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link 
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <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>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Images

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card.Text within .card-text can also be styled with the standard HTML tags.

image
Card title

This is a card with text as a natural lead-in to content.

image

Nunc non tellus eu tortor elei fend sagittis magna et eloui.

Nunc non tellus eu tortor elei fend sagittis magna et eloui.

image 
<div class="card" style="width: 260px">
    <img src="..." class="card-img-top" alt="image">
    <div class="card-body">
        <p class="card-text">Nunc non tellus eu tortor elei fend sagittis magna et eloui.</p>
    </div>
</div>

<div class="card" style="width: 260px">
    <div class="card-body">
        <p class="card-text">Nunc non tellus eu tortor elei fend sagittis magna et eloui.</p>
    </div>
    <img src="..." class="card-img-bottom" alt="image">
</div>

List groups

Create lists of content in a card with a flush list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
image
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Go somewhere 
<div class="card" style="width: 18rem;">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="image">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <div class="card-body">
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Header and footer

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

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago 
<div class="card" style="width: 20rem;">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.

image
Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque tristique

Last updated 3 mins ago

<div class="card" style="max-width: 500px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="..." class="card-img rounded-0" alt="image">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque tristique
                </p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>

Other uses

Social feeds:

Twitter
Follow us
20 August 2019

Nam magna sapien, fermentum non libero at, blandit euismod ex est ac dolor magna.

Facebook
Like us
17 September 2019

Nulla felis dolor, placerat id magna ac trist ique tristique erat volutpat sed tortor.

<div class="card twitter-card">
    <div class="card-body d-flex justify-content-between align-items-center pb-0">
        <h6 class="card-title small text-twitter m-0">
            <i class="fab fa-twitter fa-lg"></i>
            <span class="ml-2">Twitter</span>
        </h6>
        <a href="#" class="btn btn-light btn-sm">Follow us</a>
    </div>
    <div class="card-body pt-2">
        <span class="date d-block small text-muted mb-2">20 August 2019</span>
        <p class="card-text">Nam magna sapien, fermentum non libero at, blandit euismod ex est ac dolor magna.</p>
    </div>
</div>

<div class="card facebook-card">
    <div class="card-body d-flex justify-content-between align-items-center pb-0">
        <h6 class="card-title small text-facebook m-0">
            <i class="fab fa-facebook-square fa-lg"></i>
            <span class="ml-2">Facebook</span>
        </h6>
        <a href="#" class="btn btn-light btn-sm">Like us</a>
    </div>
    <div class="card-body pt-2">
        <span class="date d-block small text-muted mb-2">17 September 2019</span>
        <p class="card-text">Nulla felis dolor, placerat id magna ac trist ique tristique erat volutpat sed tortor.</p>
    </div>
</div>

An article:

image NEW
Architecture

Nam magna sapien, fermentum non libero at, blandit euismod ex est ac dolor magna.

More info 
<div class="card card-article position-relative">
    <img src="..." class="card-img-top" alt="image">
    <span class="card-tag position-absolute small text-white bg-warning rounded m-3 my-2 px-2 py-1">NEW</span>
    <div class="card-body">
        <h6 class="card-title">Architecture</h6>
        <p class="card-text">Nam magna sapien, fermentum non libero at, blandit euismod ex est ac dolor magna.</p>
        <a href="#" class="btn btn-success">More info</a>
    </div>
</div>

A testimonial:

Avatar image
Jonh Doe Co-founder

Nulla felis dolor, place rat id magna ac trist ique trist ique erat volut pat sed tortor.

<div class="card card-testimonial bg-light">
    <div class="card-body d-flex flex-row align-items-center pb-3">
        <img src="..." class="img-avatar rounded-circle" alt="Avatar image">
        <div class="d-flex flex-column">
            <span class="person small ml-2"><strong>Jonh Doe</strong></span>
            <span class="person-role small text-muted ml-2">Co-founder</span>
        </div>
    </div>
    <div class="card-body pt-0">
        <p class="card-text">Nulla felis dolor, place rat id magna ac trist ique trist ique erat volut pat sed tortor.</p>
    </div>
</div>

View the complete card documentation at Bootstrap website.