Vue Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Examples

Card title

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

Go somewhere

<card class="card-blog">
  <template slot="image">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
  </template>
  <template slot="body">
    <h5 class="card-title">Card title</h5>
    <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>
    <base-button tag="a" href="#" type="primary">Go somewhere</base-button>
  </template>
</card>

Examples

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

This is some text within a card body.

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

Layouts

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card groups PRO

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

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-group">
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
</div>

Card decks PRO

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-deck">
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
</div>

Card columns PRO

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.

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

<div class="card-columns">
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </template>
  </card>
  <card class="card-blog">
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
  <card class="card-blog" noBody>
    <template slot="image">
      <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
    </template>
  </card>
  <card>
    <template slot="body">
      <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          <small class="text-muted">
            Someone famous in <cite title="Source Title">Source Title</cite>
          </small>
        </footer>
      </blockquote>
    </template>
  </card>
  <card class="bg-primary">
    <template slot="body">
      <blockquote class="blockquote mb-0 card-body">
        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          <small class="text-muted">
            Someone famous in <cite title="Source Title">Source Title</cite>
          </small>
        </footer>
      </blockquote>
    </template>
  </card>
  <card class="text-center">
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
  <card>
    <template slot="body">
      <blockquote class="blockquote mb-0 card-body text-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          <small class="text-muted">
            Someone famous in <cite title="Source Title">Source Title</cite>
          </small>
        </footer>
      </blockquote>
    </template>
  </card>
  <card class="text-left">
    <template slot="body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </template>
  </card>
</div>

Advanced examples

Blog Cards PRO

Features

FiftyThree Files For Paper

Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...

Johana Doe

10.4K · 425

Our brains are finely attuned to distraction

Business

Springer Spends $343M To Buy Business Insider

German media giant Axel Springer has announced it’s acquiring online business news publication Business Inside...

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Here Be Dragons

Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...

Focus

Stay focused

Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...

<div class="row">
  <div class="col-lg-4">
    <card class="card-blog" data-header="pattern">
      <a href="javascript:;">
        <img class="img pattern rounded" src="img/ill/p2.svg">
      </a>
      <template slot="body">
        <h6 class="card-category text-danger">
          <i class="ni ni-badge"></i> Features
        </h6>
        <h5 class="card-title">
          <a href="javascript:;">FiftyThree Files For Paper</a>
        </h5>
        <p class="card-description">
          Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...
        </p>
      </template>
      <template slot="footer">
        <div class="author">
          <img src="img/faces/team-3.jpg" alt="..." class="avatar img-raised">
          <span>Johana Doe</span>
        </div>
        <div class="stats stats-right">
          <i class="ni ni-favourite-28"></i> 10.4K ·
          <i class="ni ni-archive-2"></i> 425
        </div>
      </template>
    </card>
  </div>
  <div class="col-lg-4">
    <card class="card-blog" data-header="skew" headerClasses="bg-yellow">
      <template slot="header">
        <div class="card-image">
            <img class="card-img-top" src="img/ill/inn.svg">
          </div>
      </template>
      <template slot="body">
        <h6 class="card-category">
          <i class="ni ni-paper-diploma"></i>
          Business
        </h6>
        <h5 class="card-title">
          <a href="javascript:;">Springer Spends $343M To Buy Business Insider</a>
        </h5>
        <p class="card-description">
          German media giant Axel Springer has announced it’s acquiring online business news publication Business Inside...
        </p>
      </template>
    </card>
  </div>
  <div class="col-lg-4">
    <card class="card-blog bg-info">
      <template slot="image">
        <img class="img pattern rounded" src="img/ill/p7.svg">
      </template>
      <template slot="body">
        <h4 class="display-4 text-white">Here Be Dragons</h4>
        <p class="lead text-white mt-0">Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...</p>
      </template>
    </card>
  </div>
  <div class="col-lg-4">
    <card gradient="danger">
      <template slot="body">
        <h6 class="category-social text-white text-uppercase">
          <i class="fa fa-fire"></i> Focus
        </h6>
        <p class="lead text-white my-0">
          Our brains are finely attuned to distraction
        </p>
      </template>
      <a href="javascript:;">
        <img class="img pattern rounded" src="img/ill/p51.svg">
      </a>
    </card>
  </div>
  <div class="col-lg-4">
    <card class="text-white bg-default" data-background="pattern">
      <a href="javascript:;">
        <img class="img pattern rounded" src="img/ill/inn.svg">
      </a>
      <template slot="body">
        <div class="content">
          <h5 class="h2 card-title text-white mb-2">Card Title</h5>
          <p class="card-description">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <p class="card-text text-sm font-weight-bold">Last updated 3 mins ago</p>
        </div>
      </template>
    </card>
  </div>
  <div class="col-lg-4">
    <card type="primary" class="card-blog">
      <template slot="image">
        <img class="img rounded" src="img/ill/p22.png">
      </template>
      <template slot="body">
        <h6 class="category text-white">
          <i class="ni ni-atom"></i>
          Focus
        </h6>
        <h5 class="card-title">
          <a class="text-white" href="javascript:;">Stay focused</a>
        </h5>
        <p class="card-description text-white">
          Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...
        </p>
      </template>
    </card>
  </div>
</div>

Profile Cards PRO

Connect Message

22 Friends

10 Photos

89 Comments

Daisy Paisley, 28

Bucharest, Romania

Dylan Wyatt

Team Lead

Dedicated entrepreneur
Urban exploration
Able to get good at everything

Austin Johnson

Project Manager

Don't be scared of the truth because we need to restart the human foundation in truth And I love you...

<div class="row">
  <div class="col-md-4">
    <card class="card-profile" headerClasses="bg-info">
      <template slot="header">
        <img src="img/ill/inn.svg" class="position-absolute top-0 left-0">
        <div class="card-avatar">
          <a href="javascript:;">
            <img class="img img-raised rounded-circle" src="img/faces/team-4.jpg">
          </a>
        </div>
      </template>
      <template slot="body">
        <div class="d-flex justify-content-between">
          <a href="javascript:;" class="btn btn-sm btn-info mr-4 mt-3">Connect</a>
          <a href="javascript:;" class="btn btn-sm btn-default float-right mt-3">Message</a>
        </div>
        <div class="row">
          <div class="col">
            <div class="card-profile-stats d-flex justify-content-center">
              <div>
                <span class="heading">22</span>
                <span class="description">Friends</span>
              </div>
              <div>
                <span class="heading">10</span>
                <span class="description">Photos</span>
              </div>
              <div>
                <span class="heading">89</span>
                <span class="description">Comments</span>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center">
          <h5 class="h4">
            Daisy Paisley<span class="font-weight-light">, 28</span>
          </h5>
          <div class="font-weight-300">
            <i class="ni location_pin mr-2"></i>Bucharest, Romania
          </div>
        </div>
      </template>
    </card>
  </div>
  <div class="col-md-4">
    <card class="card-profile" data-image="profile-image">
      <template slot="header">
        <div class="card-image">
          <base-dropdown menuClasses="dropdown-menu-right">
            <div slot="title" class="nav-link dropdown-toggle text-white" data-toggle="dropdown">
              <i class="ni ni-settings-gear-65"></i>
            </div>
            <a class="dropdown-item" href="javascript:;">Edit Profile</a>
            <a class="dropdown-item" href="javascript:;">Settings</a>
            <a class="dropdown-item" href="javascript:;">Log out</a>
          </base-dropdown>
          <a href="javascript:;">
            <img class="img rounded" src="img/faces/team-5.jpg">
          </a>
        </div>
      </template>
      <template slot="body">
        <h4 class="display-4 mb-0">Dylan Wyatt</h4>
        <p class="lead">Team Lead</p>
        <div class="table-responsive">
          <ul class="list-unstyled ">
            <li class="py-1">
              <div class="d-flex align-items-center">
                <div>
                  <div class="badge badge-circle badge-info mr-3">
                    <i class="ni ni-atom"></i>
                  </div>
                </div>
                <div>
                  <h6 class="mb-1">Dedicated entrepreneur</h6>
                </div>
              </div>
            </li>
            <li class="py-1">
              <div class="d-flex align-items-center">
                <div>
                  <div class="badge badge-circle badge-success mr-3">
                    <i class="ni ni-user-run"></i>
                  </div>
                </div>
                <div>
                  <h6 class="mb-1">Urban exploration</h6>
                </div>
              </div>
            </li>
            <li class="py-1">
              <div class="d-flex align-items-center">
                <div>
                  <div class="badge badge-circle badge-danger mr-3">
                    <i class="ni ni-chart-bar-32"></i>
                  </div>
                </div>
                <div>
                  <h6 class="mb-1">Able to get good at everything</h6>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </template>
    </card>
  </div>
  <div class="col-md-4">
    <card class="card-profile" data-image="img-raised" footerClasses="text-center">
      <div slot="headerImage">
          <a href="javascript:;">
            <img class="img" src="img/faces/alejandro-escamilla.jpg">
          </a>
          <div class="card-title text-white">
            Austin Johnson
          </div>
        </div>
      <template slot="body">
        <h6 class="card-category text-info text-center">Project Manager</h6>
        <p class="card-description">
          Don't be scared of the truth because we need to restart the human foundation in truth And I love you...
        </p>
      </template>
      <template slot="footer">
        <base-button link type="" class="btn-instagram btn-icon-only btn-simple btn btn-default">
          <span class="btn-inner--icon"><i class="fa fa-instagram"></i></span>
        </base-button>
        <base-button link type="" class="btn-twitter btn-icon-only btn-simple btn btn-default">
          <span class="btn-inner--icon"><i class="fa fa-twitter"></i></span>
        </base-button>
        <base-button link type="" class="btn-dribbble btn-icon-only btn-simple btn btn-default">
          <span class="btn-inner--icon"><i class="fa fa-dribbble"></i></span>
        </base-button>
      </template>
    </card>
  </div>
</div>

Full background Cards PRO

New Challenges

Touch on a trend

New Opportunities

Constantly growing

Sales Leads

Configure Blockchain Technology

<div class="row">
  <div class="col-md-6 col-lg-3">
    <card class="card-blog card-background" data-animation="zooming">
      <div class="full-background" style="background-image: url('img/theme/josh-appel.jpg')"></div>
      <template slot="body">
        <div class="content-bottom">
          <h6 class="card-category text-white opacity-8">New Challenges</h6>
          <h5 class="card-title">Touch on a trend</h5>
        </div>
      </template>
    </card>
  </div>
  <div class="col-md-6 col-lg-3">
    <card class="card-blog card-background" data-animation="zooming">
      <div class="full-background" style="background-image: url('img/theme/john-hoang.jpg')"></div>
      <template slot="body">
        <div class="content-bottom">
          <h6 class="card-category text-white opacity-8">New Opportunities</h6>
          <h5 class="card-title">Constantly growing</h5>
        </div>
      </template>
    </card>
  </div>
  <div class="col-md-6">
    <card class="card-blog card-background" data-animation="zooming">
      <div class="full-background" style="background-image: url('img/theme/kit-suman.jpg')"></div>
      <template slot="body">
        <div class="content-bottom">
          <h6 class="card-category text-white opacity-8">Sales Leads</h6>
          <h5 class="card-title">Configure Blockchain Technology</h5>
        </div>
      </template>
    </card>
  </div>
</div>

Pricing cards PRO

Bravo pack

$49

per application

Complete documentation
Working materials in Sketch
2GB cloud storage

Request a demo

Premium

$109

100 Projects
5 Team Members
55 Personal Contacts
5K Messages

Get Started

Premium pack

$ 89 /mo

10 Templates + Updates
+ Adobe Sketch

<div class="row">
  <div class="col-md-4">
    <card class="card-pricing text-center" type="success" headerClasses="bg-transparent" footerClasses="bg-transparent" style="background-image: url('img/ill/pattern_pricing1.svg">
      <template slot="header">
        <h6 class="text-uppercase ls-1 text-white py-3 mb-0">Bravo pack</h6>
      </template>
      <template slot="body">
        <div class="display-2 text-white">$49</div>
        <span class=" text-white">per application</span>
        <ul class="list-unstyled my-4">
          <li>
            <div class="d-flex align-items-center">
              <div>
                <div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
                  <i class="ni ni-book-bookmark"></i>
                </div>
              </div>
              <div>
                <span class="pl-2 text-sm text-white">Complete documentation</span>
              </div>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center">
              <div>
                <div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
                  <i class="ni ni-diamond"></i>
                </div>
              </div>
              <div>
                <span class="pl-2 text-sm text-white">Working materials in Sketch</span>
              </div>
            </div>
          </li>
          <li>
            <div class="d-flex align-items-center">
              <div>
                <div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
                  <i class="ni ni-chart-pie-35"></i>
                </div>
              </div>
              <div>
                <span class="pl-2 text-sm text-white">2GB cloud storage</span>
              </div>
            </div>
          </li>
        </ul>
        <base-button link class="text-white" type="">FREE TRIAL</base-button>
      </template>
      <template slot="footer">
        <a href="#!" class=" text-white">Request a demo</a>
      </template>
    </card>
  </div>
  <div class="col-md-4">
    <card class="card-pricing card-background text-center" type="default" headerClasses="bg-transparent" footerClasses="bg-transparent" style="background-image: url('img/ill/pricing_bg.svg" data-background="image">
      <template slot="body">
        <h6 class="card-category text-white text-uppercase">Premium</h6>
        <h1 class="card-title">
          <small class="text-white">$</small>109
        </h1>
        <ul>
          <li>
            <b>100</b> Projects
          </li>
          <li>
            <b>5</b> Team Members
          </li>
          <li>
            <b>55</b> Personal Contacts
          </li>
          <li>
            <b>5K</b> Messages
          </li>
        </ul>
        <a href="javascript:;" class="btn btn-white btn-sm mt-3">
          Get Started
        </a>
      </template>
    </card>
  </div>
  <div class="col-md-4">
    <card class="card-pricing text-center" gradient="warning" footerClasses="text-center bg-transparent" headerClasses="bg-transparent" style="background-image: url('img/ill/pattern_pricing5.svg" data-icon="big-icon">
      <template slot="header">
        <div class="icon text-white">
          <i class="ni ni-camera-compact"></i>
        </div>
        <p class="text-white">Premium pack</p>
      </template>
      <template slot="body">
        <div class="price d-inline">
          <span class="currency text-white">$</span>
          <span class="amount text-white">89</span>
          <span class="frequency text-white">/mo</span>
        </div>
        <ul class="list-unstyled align-items-center">
          <li>
            <p class="text-sm text-white">10 Templates + Updates</p>
          </li>
          <li>
            <p class="text-sm text-white">+ Adobe Sketch</p>
          </li>
        </ul>
      </template>
      <template slot="footer">
        <base-button type="white" outline class="mb-3">Upgrade</base-button>
      </template>
    </card>
  </div>
</div>

List group PRO

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

<card headerClasses="p-0">
  <template slot="image">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
  </template>
  <template slot="header">
    <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>
  </template>
  <template slot="body">
    <h3 class="card-title mb-3">Card title</h3>
    <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </template>
</card>

Image PRO

Get started with Argon

by John Snow on Oct 29th at 10:23 AM

Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.

View article

<card>
  <template slot="image">
    <img class="card-img-top" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Image placeholder">
  </template>
  <template slot="body">
    <h5 class="h2 card-title mb-0">Get started with Argon</h5>
    <small class="text-muted">by John Snow on Oct 29th at 10:23 AM</small>
    <p class="card-text mt-4">Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
    <a href="#!" class="btn btn-link px-0">View article</a>
  </template>
</card>

Blockquote PRO

Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<card class="bg-gradient-default">
    <template slot="body">
        <h3 class="card-title text-white">Testimonial</h3>
        <blockquote class="blockquote text-white mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer text-danger">Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
    </template>
</card>

Overlay PRO

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<card class="bg-dark" noBody>
  <img class="card-img" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" alt="Card image">
    <div class="card-img-overlay d-flex align-items-center">
      <div>
        <h5 class="h2 card-title text-white mb-2">Card title</h5>
        <p class="card-text text-white">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text text-white text-sm font-weight-bold">Last updated 3 mins ago</p>
      </div>
    </div>
</card>

Bootstrap Panel

In Bootstrap 4, panels are dropped entirely for the new card component and are created with the .card class, and content inside the panel has a .card-body class.

Bootstrap 4 Panel changes

.panel to .card, now built with flexbox.
.panel-default removed and no replacement.
.panel-group removed and no replacement. .card-group is not a replacement, it is different.
.panel-heading to .card-header
.panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
.panel-body to .card-body
.panel-footer to .card-footer
.panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.

Bootstrap Background Image

<div class="card bg-dark text-white border-0">
    <img class="card-img" src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg" alt="Card image">
</div>