Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Cards

Flexible and extensible content container.

Bootstrap docs

## Basic example

##### Card title

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

Go somewhere

    <!-- Basic card example -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

## Alternative style

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

    <!-- Alternative card style: no border + shadow -->
    <div class="card border-0 shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- Alternative card style: border + shadow -->
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

## Hover effect

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

    <!-- Default card hover effect -->
    <div class="card card-hover">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- No border + shadow card hover effect -->
    <div class="card border-0 shadow-sm card-hover">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- Primary background on hover -->
    <div class="card border-0 shadow-sm card-hover card-hover-primary">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- Primary shadow on hover -->
    <div class="card border-primary card-hover">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

## Image top / bottom

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

    <!-- Image on top -->
    <div class="card">
      <img src="assets/img/landing/financial/services/01.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- Image on bottom -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
      <img src="assets/img/landing/financial/services/03.jpg" class="card-img-bottom" alt="Card image">
    </div>

## Horizontal layout

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

    <!-- Horizontal card: Image on the left -->
    <div class="card overflow-hidden">
      <div class="row g-0">
        <div class="col-sm-4 bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/team/01.jpg); min-height: 12rem;"></div>
        <div class="col-sm-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
            <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Horizontal card: Image on the right -->
    <div class="card overflow-hidden">
      <div class="row g-0">
        <div class="col-sm-4 order-sm-2 bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/team/02.jpg); min-height: 12rem;"></div>
        <div class="col-sm-8 order-sm-1">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
            <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>

## Header and footer

Featured

#### Special title treatment

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

Go somewhere

    <!-- Header and footer -->
    <div class="card text-center">
      <div class="card-header">Featured</div>
      <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="btn btn-primary">Go somewhere</a>
      </div>
      <div class="card-footer fs-sm text-muted">3 days ago</div>
    </div>

## Text alignment

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

    <!-- Left aligned (default) -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- Center aligned -->
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- Right aligned -->
    <div class="card text-end">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

## Navigation: Tabs

#### Special title treatment

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

Go somewhere

    <!-- Tabs inside card header -->
    <div class="card text-center">
      <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link active" data-bs-toggle="tab" role="tab">Active</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link" data-bs-toggle="tab" role="tab">Link</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab">Disabled</a>
          </li>
        </ul>
      </div>
      <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="btn btn-primary">Go somewhere</a>
      </div>
    </div>

## Navigation: Alt tabs

#### Special title treatment

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

Go somewhere

    <!-- Alternative style tabs inside card header -->
    <div class="card text-center">
      <div class="card-header">
        <ul class="nav nav-tabs-alt card-header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link active" data-bs-toggle="tab" role="tab">Active</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link" data-bs-toggle="tab" role="tab">Link</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab">Disabled</a>
          </li>
        </ul>
      </div>
      <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="btn btn-primary">Go somewhere</a>
      </div>
    </div>

## Navigation: Pills

#### Special title treatment

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

Go somewhere

    <!-- Pills inside card header -->
    <div class="card text-center">
      <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
          <li class="nav-item">
            <a href="#" class="nav-link active">Active</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Link</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link disabled">Disabled</a>
          </li>
        </ul>
      </div>
      <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="btn btn-primary">Go somewhere</a>
      </div>
    </div>

## List group inside card

##### Card title

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

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Go somewhere

##### Card title

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

Cras justo odio Dapibus ac facilisis in Vestibulum at eros
Go somewhere

    <!-- Simple list group inside card -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <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-sm btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- Actionable list group inside card -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <div class="list-group list-group-flush">
        <a href="#" class="list-group-item list-group-item-action">Cras justo odio</a>
        <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
      </div>
      <div class="card-body">
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>

## Card styles: Solid background

Header

##### Primary card title

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

Header

##### Secondary card title

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

Header

##### Success card title

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

Header

##### Danger card title

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

Header

##### Warning card title

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

Header

##### Info card title

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

Header

##### Dark card title

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

Header

##### Gradient card title

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

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

    <!-- Secondary card -->
    <div class="card bg-secondary">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Secondary card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

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

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

    <!-- Warning card -->
    <div class="card text-white bg-warning">
      <div class="card-header border-light">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">Warning card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

    <!-- Info card -->
    <div class="card text-white bg-info">
      <div class="card-header border-light">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">Info card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

    <!-- Dark card -->
    <div class="card text-white bg-dark">
      <div class="card-header border-light">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">Dark card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

    <!-- Gradient card -->
    <div class="card text-white bg-gradient-primary">
      <div class="card-header border-light">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">Gradient card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

## Card styles: Faded background, border and color

Header

##### Primary card title

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

Header

##### Success card title

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

Header

##### Danger card title

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

Header

##### Warning card title

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

Header

##### Info card title

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

Header

##### Dark card title

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

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

    <!-- Success card -->
    <div class="card bg-faded-success border-success">
      <div class="card-header border-success text-success">Header</div>
      <div class="card-body">
        <h5 class="card-title text-success">Success card title</h5>
        <p class="card-text fs-sm text-success">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Danger card -->
    <div class="card bg-faded-danger border-danger">
      <div class="card-header border-danger text-danger">Header</div>
      <div class="card-body">
        <h5 class="card-title text-danger">Danger card title</h5>
        <p class="card-text fs-sm text-danger">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Warning card -->
    <div class="card bg-faded-warning border-warning">
      <div class="card-header border-warning text-warning">Header</div>
      <div class="card-body">
        <h5 class="card-title text-warning">Warning card title</h5>
        <p class="card-text fs-sm text-warning">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Info card -->
    <div class="card bg-faded-info border-info">
      <div class="card-header border-info text-info">Header</div>
      <div class="card-body">
        <h5 class="card-title text-info">Info card title</h5>
        <p class="card-text fs-sm text-info">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Dark card -->
    <div class="card bg-faded-dark border-dark">
      <div class="card-header border-dark text-dark">Header</div>
      <div class="card-body">
        <h5 class="card-title text-dark">Dark card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

## Card styles: Border and color

Header

##### Primary card title

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

Header

##### Success card title

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

Header

##### Danger card title

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

Header

##### Warning card title

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

Header

##### Info card title

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

Header

##### Dark card title

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

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

    <!-- Success card -->
    <div class="card border-success">
      <div class="card-header border-success text-success">Header</div>
      <div class="card-body">
        <h5 class="card-title text-success">Success card title</h5>
        <p class="card-text fs-sm text-success">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Danger card -->
    <div class="card border-danger">
      <div class="card-header border-danger text-danger">Header</div>
      <div class="card-body">
        <h5 class="card-title text-danger">Danger card title</h5>
        <p class="card-text fs-sm text-danger">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Warning card -->
    <div class="card border-warning">
      <div class="card-header border-warning text-warning">Header</div>
      <div class="card-body">
        <h5 class="card-title text-warning">Warning card title</h5>
        <p class="card-text fs-sm text-warning">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Info card -->
    <div class="card border-info">
      <div class="card-header border-info text-info">Header</div>
      <div class="card-body">
        <h5 class="card-title text-info">Info card title</h5>
        <p class="card-text fs-sm text-info">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

    <!-- Dark card -->
    <div class="card border-dark">
      <div class="card-header border-dark text-dark">Header</div>
      <div class="card-body">
        <h5 class="card-title text-dark">Dark card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
      </div>
    </div>

## Card group

##### 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.

##### Card title

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

##### 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.

    <!-- Card group -->
    <div class="card-group">

      <!-- Card -->
      <div class="card">
        <img class="card-img-top" src="assets/img/landing/financial/services/01.jpg" alt="Card image">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text fs-sm">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>
        </div>
        <div class="card-footer border-top-0 pt-0">
          <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
        </div>
      </div>

      <!-- Card -->
      <div class="card">
        <img class="card-img-top" src="assets/img/landing/financial/services/02.jpg" alt="Card image">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text fs-sm">This card has supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer border-top-0 pt-0">
          <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
        </div>
      </div>

      <!-- Card -->
      <div class="card">
        <img class="card-img-top" src="assets/img/landing/financial/services/03.jpg" alt="Card image">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text fs-sm">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>
        </div>
        <div class="card-footer border-top-0 pt-0">
          <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
        </div>
      </div>
    </div>

Top