Falcon | Dashboard & Web App Template

Card

Falcon's cards provide a flexible and extensible content container with multiple variants and options.

Basic Example

Card title

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

Go somewhere

<div class="card overflow-hidden" style="width: 20rem;">
  <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/1.jpg" alt="Card image cap" /></div>
  <div class="card-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><a class="btn btn-primary btn-sm" href="#!">Go somewhere</a>
  </div>
</div>

Card with image

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

Card link Another link

<div class="card overflow-hidden" style="width: 20rem;">
  <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/3.jpg" alt="Card image cap" /></div>
  <div class="card-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>
  </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 class="card-link" href="#!">Card link</a><a class="card-link" href="#!">Another link</a></div>
</div>

Card with background

Page Title

The page header is a nice little feature to add appropriate spacing around the headings on a page. This is particularly helpful on a web page where you may have several post titles and need a way to add distinction to each of them.

Get Started

<div class="card mb-3">
  <div class="bg-holder d-none d-lg-block bg-card" style="background-image:url(../../assets/img/icons/spot-illustrations/corner-4.png);"></div> <!--/.bg-holder-->
  <div class="card-body position-relative">
    <div class="row">
      <div class="col-lg-8">
        <h3>Page Title</h3>
        <p class="mt-2">The page header is a nice little feature to add appropriate spacing around the headings on a page. This is particularly helpful on a web page where you may have several post titles and need a way to add distinction to each of them.</p><a class="btn btn-link ps-0 btn-sm" href="../../documentation/getting-started.html" target="_blank">Get Started<span class="fas fa-chevron-right ms-1 fs--2"></span></a>
      </div>
    </div>
  </div>
</div>

Notification

Emma Watson replied to your comment : "Nice Dashboard 😍"

💬Just now

<div class="fs--1" style="max-width: 25rem;">
  <a class="notification" href="#!">
    <div class="notification-avatar">
      <div class="avatar avatar-2xl me-3">
        <img class="rounded-circle" src="../../assets/img/team/1.jpg" alt="" />
      </div>
    </div>
    <div class="notification-body">
      <p class="mb-1"><strong>Emma Watson</strong> replied to your comment : "Nice Dashboard 😍"</p>
      <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">💬</span>Just now</span>
    </div>
  </a>
</div>

Background

Card title

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

<div class="card bg-dark text-white overflow-hidden light" style="max-width: 30rem;">
  <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/3.jpg" alt="Card image" /></div>
  <div class="card-img-overlay d-flex align-items-end">
    <div>
      <h5 class="card-title text-white">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>
    </div>
  </div>
</div>

Card Groups

First 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 45 mins ago

Second card title

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

Last updated an hour ago

Yet another 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 yesterday

<div class="card-group">
  <div class="card overflow-hidden">
    <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/10.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">First 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 45 mins ago</small></p>
    </div>
  </div>
  <div class="card overflow-hidden">
    <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/11.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Second 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 an hour ago</small></p>
    </div>
  </div>
  <div class="card overflow-hidden">
    <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/12.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Yet another 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 yesterday</small></p>
    </div>
  </div>
</div>

Card Styles

Cards include various options for customizing their backgrounds, borders, and color.

Primary Card

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

Secondary Card

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

Success Card

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

Danger Card

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

Warning Card

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

Info Card

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

Light Card

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

Dark Card

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

<div class="row light">
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-primary">
      <div class="card-body">
        <div class="card-title">Primary Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-secondary">
      <div class="card-body">
        <div class="card-title">Secondary Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-success">
      <div class="card-body">
        <div class="card-title">Success Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-danger">
      <div class="card-body">
        <div class="card-title">Danger Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-warning">
      <div class="card-body">
        <div class="card-title">Warning Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-info">
      <div class="card-body">
        <div class="card-title">Info Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card bg-light">
      <div class="card-body">
        <div class="card-title">Light Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-dark">
      <div class="card-body">
        <div class="card-title">Dark Card</div>
        <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>
  </div>
</div>

Card Border

Use border-utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

Primary Border Card

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

Secondary Border Card

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

Success Border Card

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

Danger Border Card

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

Warning Border Card

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

Info Border Card

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

Light Border Card

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

Dark Border Card

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

<div class="row">
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-primary">
      <div class="card-body">
        <div class="card-title">Primary Border Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-secondary">
      <div class="card-body">
        <div class="card-title">Secondary Border Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-success">
      <div class="card-body">
        <div class="card-title">Success Border Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-danger">
      <div class="card-body">
        <div class="card-title">Danger Border Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-warning">
      <div class="card-body">
        <div class="card-title">Warning Border Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-info">
      <div class="card-body">
        <div class="card-title">Info Border Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-light">
      <div class="card-body">
        <div class="card-title">Light Border Card</div>
        <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>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-dark">
      <div class="card-body">
        <div class="card-title">Dark Border Card</div>
        <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>
  </div>
</div>

Card

Basic Example

Card title

Card with image

Card title

Card with background

Page Title

Notification

Background

Card title

Card Groups

First card title

Second card title

Yet another card title

Card Styles

Card Border

Settings

Color Scheme

RTL Mode

Fluid Layout

Navigation Position

Vertical Navbar Style

Like What You See?

iPhone

Falcon v1.8.2

Anna Karinina

Antony Hopkins

Emma Watson

Notifications

iPhone

Falcon v1.8.2

Anna Karinina

Antony Hopkins

Emma Watson

Card

Basic Example

Card title

Card with image

Card title

Card with background

Page Title

Notification

Background

Card title

Card Groups

First card title

Second card title

Yet another card title

Card Styles

Card Border

Settings

Color Scheme

RTL Mode

Fluid Layout

Navigation Position

Vertical Navbar Style

Like What You See?