Svelte Cards

Our Svelte 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
  noBody
  imgTop
  imgSrc="../../img/theme/img-1-1000x600.jpg"
  alt="Image placeholder">
  <!-- Card body -->
  <div class="card-body">
    <h3 class="card-title mb-4">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>
    <BaseButton type="primary">Go somewhere</BaseButton>
  </div>
</Card>

Stats card

New users

2,356

3.48% Since last month

<StatsCard
  title="New users"
  type="gradient-red"
  subTitle="350,897"
  icon="ni ni-active-40">
  <div slot="footer">
    <span class="text-success mr-2">
      <i class="fa fa-arrow-up" />
      3.48%
    </span>
    <span class="text-nowrap">Since last month</span>
  </div>
</StatsCard>

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>
  This is some text within a card body.
</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
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-body">
      <h3 class="card-title mb-4">Card title</h3>
      <p class="card-text mb-4">
        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>
    </div>
  </Card>
  <Card
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-body">
      <h3 class="card-title mb-4">Card title</h3>
      <p class="card-text mb-4">
        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>
    </div>
  </Card>
  <Card
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-body">
      <h3 class="card-title mb-4">Card title</h3>
      <p class="card-text mb-4">
        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>
    </div>
  </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
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-body">
      <h3 class="card-title mb-4">Card title</h3>
      <p class="card-text mb-4">
        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>
    </div>
  </Card>
  <Card
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-body">
      <h3 class="card-title mb-4">Card title</h3>
      <p class="card-text mb-4">
        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>
    </div>
  </Card>
  <Card
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-body">
      <h3 class="card-title mb-4">Card title</h3>
      <p class="card-text mb-4">
        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>
    </div>
  </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
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-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>
    </div>
  </Card>
  <Card>
      <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>
  </Card>
  <Card
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
    <!-- Card body -->
    <div class="card-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>
    </div>
  </Card>
  <Card
  gradient="primary">
      <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>
  </Card>
  <Card>
    <div class="card-body text-center">
      <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>
    </div>
  </Card>
  <Card
    noBody
    imgTop
    imgSrc="../../img/theme/img-1-1000x600.jpg"
    alt="Image placeholder">
  </Card>
  <Card>
    <div class="card-body text-right">
      <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>
    </div>
  </Card>
  <Card
    noBody>
    <!-- Card body -->
    <div class="card-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>
    </div>
  </Card>
</div>

Advanced Examples

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
  noBody
  imgTop
  imgSrc="../../img/theme/img-1-1000x600.jpg"
  alt="Image placeholder">
  <!-- Card image -->
  <!-- List group -->
  <div class="list-group list-group-flush">
    <div class="list-group-item">Cras justo odio</div>
    <div class="list-group-item">Dapibus ac facilisis in</div>
    <div class="list-group-item">Vestibulum at eros</div>
  </div>
  <!-- Card body -->
  <div class="card-body">
    <h3 class="card-title mb-4">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>
    <BaseButton type="primary">Go somewhere</BaseButton>
  </div>
</Card>

Profile PRO

Connect Message

22 Friends

10 Photos

89 Comments

Jessica Jones, 27

Bucharest, Romania

<Card
  noBody
  imgSrc="../../img/theme/img-1-1000x600.jpg"
  alt="Image placeholder"
  imgTop
  className="card-profile">
  <div class="row justify-content-center">
    <div class="col-lg-3 order-lg-2">
      <div class="card-profile-image">
        <a href="/cards">
          <img
            src="../../img/theme/team-4.jpg"
            class="rounded-circle"
            alt="Image placeholder" />
        </a>
      </div>
    </div>
  </div>
  <div
    class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
    <div class="d-flex justify-content-between">
      <BaseButton type="info" size="sm" className="mr-4">
        Connect
      </BaseButton>
      <BaseButton type="default" size="sm" className="float-right">
        Message
      </BaseButton>
    </div>
  </div>
  <div class="card-body pt-0">
    <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="h3">
        Jessica Jones
        <span class="font-weight-light">, 27</span>
      </h5>
      <div class="h5 font-weight-300">
        <i class="ni location_pin mr-2" />
        Bucharest, Romania
      </div>
    </div>
  </div>
</Card>

Contact PRO

John Snow

Working remoteley

● Active

<Card>
  <!-- Card body -->
  <div class="row align-items-center">
    <div class="col-md-auto">
      <!-- Avatar -->
      <a href="/cards" class="avatar avatar-xl rounded-circle">
        <img alt="Image placeholder" src="../../img/theme/team-2.jpg" />
      </a>
    </div>
    <div class="col ml--2">
      <h4 class="mb-0">
        <a href="javascript:;">John Snow</a>
      </h4>
      <p class="text-sm text-muted mb-0">Working remoteley</p>
      <span class="text-success">●</span>
      <small>Active</small>
    </div>
    <div class="col-md-auto">
      <BaseButton type="primary" size="sm">Add</BaseButton>
    </div>
  </div>
</Card>

Team member PRO

Ryan Tompson Web Developer

<Card>
  <!-- Card body -->
  <a href="javascript:;">
    <img
      src="../../img/theme/team-1.jpg"
      alt="Image placeholder"
      class="img-fluid rounded-circle img-center shadow shadow-lg--hover"
      style="width: 140px;" />
  </a>
  <div class="pt-4 text-center">
    <h5 class="h3 title">
      <span class="d-block mb-1">Ryan Tompson</span>
      <small class="h4 font-weight-light text-muted">
        Web Developer
      </small>
    </h5>
    <div class="mt-3">
      <a
        href="/cards"
        class="btn btn-twitter btn-icon-only rounded-circle">
        <i class="fab fa-twitter" />
      </a>
      <a
        href="/cards"
        class="btn btn-facebook btn-icon-only rounded-circle">
        <i class="fab fa-facebook" />
      </a>
      <a
        href="/cards"
        class="btn btn-dribbble btn-icon-only rounded-circle">
        <i class="fab fa-dribbble" />
      </a>
    </div>
  </div>
</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
  noBody
  imgSrc="../../img/theme/img-1-1000x900.jpg"
  alt="Image placeholder"
  imgTop>
  <div class="card-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="javascript:;" class="btn btn-link px-0">View article</a>
  </div>

</Card>

Blockquote PRO

Testimonial

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

Someone famous in Source Title

<Card gradient="default">
  <h3 class="text-white card-title">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>
</Card>

Pricing PRO

Bravo pack

$49

per application

Complete documentation
Working materials in Sketch
2GB cloud storage

Request a demo

<Card
  gradient="success"
  headerClasses="bg-transparent"
  footerClasses="bg-transparent"
  bodyClasses="px-lg-7"
  className="card-pricing border-0 text-center mb-4">
  <!--Header-->
  <h4 slot="header" class="text-uppercase ls-1 text-white py-3 mb-0">
    Bravo pack
  </h4>
  <!--Card 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">
            <i class="fas fa-terminal" />
          </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">
            <i class="fas fa-pen-fancy" />
          </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">
            <i class="fas fa-hdd" />
          </div>
        </div>
        <div>
          <span class="pl-2 text-sm text-white">2GB cloud storage</span>
        </div>
      </div>
    </li>
  </ul>
  <BaseButton type="primary" className="mb-3">
    Start free trial
  </BaseButton>
  <!--Footer-->
  <a href="/cards" slot="footer" class="text-white">Request a demo</a>
</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
  noBody
  imgSrc="../../img/theme/img-1-1000x600.jpg"
  alt="Card image"
  className="bg-dark text-white border-0">
  <div class="card-img-overlay d-flex align-items-center">
    <div>
      <h5 class="card-title h2 text-white mb-2">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 text-sm font-weight-bold">
        Last updated 3 mins ago
      </p>
    </div>
  </div>
</Card>

Stats

Total traffic

350,897

3.48% Since last month

New users

2,356

3.48% Since last month

<StatsCard
  title="Total traffic"
  type="gradient-red"
  subTitle="350,897"
  icon="ni ni-active-40">
  <div slot="footer">
    <span class="text-success mr-2">
      <i class="fa fa-arrow-up" />
      3.48%
    </span>
    <span class="text-nowrap">Since last month</span>
  </div>
</StatsCard>

<StatsCard
  title="New users"
  type="gradient-orange"
  subTitle="2,356"
  icon="ni ni-active-40">
  <div slot="footer">
    <span class="text-success mr-2">
      <i class="fa fa-arrow-up" />
      3.48%
    </span>
    <span class="text-nowrap">Since last month</span>
  </div>
</StatsCard>

Total traffic

350,897

3.48% Since last month

New users

2,356

3.48% Since last month

<Card noBody={true} className="bg-gradient-default border-0">
  <div class="card-body">
    <div class="row">
       <div class="col">
          <h5 class="card-title text-uppercase text-muted mb-0 text-white">Total traffic</h5>
          <span class="h2 font-weight-bold mb-0 text-white">350,897</span>
       </div>
       <div class="col-auto">
          <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
             <i class="ni ni-active-40"></i>
          </div>
       </div>
    </div>
    <p class="mt-3 mb-0 text-sm">
       <span class="text-white mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
       <span class="text-nowrap text-light">Since last month</span>
    </p>
  </div>
</Card>

<Card noBody={true} className="bg-gradient-primary border-0">
  <div class="card-body">
    <div class="row">
       <div class="col">
          <h5 class="card-title text-uppercase text-muted mb-0 text-white">New users</h5>
          <span class="h2 font-weight-bold mb-0 text-white">2,356</span>
       </div>
       <div class="col-auto">
          <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
             <i class="ni ni-atom"></i>
          </div>
       </div>
    </div>
    <p class="mt-3 mb-0 text-sm">
       <span class="text-white mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
       <span class="text-nowrap text-light">Since last month</span>
    </p>
  </div>
</Card>

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.

Background Image

<Card
  noBody
  imgSrc="../../img/theme/img-1-1000x600.jpg"
  alt="Card image"
  className="bg-dark text-white border-0">
  <div class="card-img-overlay d-flex align-items-center">
  </div>
</Card>