Card

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

Card on Bootstrap
Basic Example
Card image cap
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 list
Go Pro
Set status Profile & account Feedback
Settings Logout 
<div class="bg-white dark__bg-1000 rounded-2 py-2">
  <a class="dropdown-item fw-bold text-warning" href="#!"><span class="fas fa-crown me-1"></span><span>Go Pro</span></a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#!">Set status</a>
  <a class="dropdown-item" href="../social/profile.html">Profile &amp; account</a>
  <a class="dropdown-item" href="#!">Feedback</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="../social/settings.html">Settings</a>
  <a class="dropdown-item" href="../authentication/card/logout.html">Logout</a>
</div>
Card with image
Card image cap
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 linkAnother 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>
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>
Notification Group
Notifications
Mark all as read
NEW

Emma Watson replied to your comment : "Hello world 😍"

💬Just now
AB

Albert Brooks reacted to Mia Khalifa's status

9hr
EARLIER

The forecast today shows a low of 20℃ in California. See today's weather.

🌤️1d

University of Oxford created an event : "Causal Inference Hilary 2019"

✌️1w

James Cameron invited to join the group: United Nations International Children's Fund

🙋‍2d
View all
<div class="card card-notification shadow-none" style="max-width: 5rem;max-width: 20rem;">
  <div class="card-header">
    <div class="row justify-content-between align-items-center">
      <div class="col-auto">
        <h6 class="card-header-title mb-0">Notifications</h6>
      </div>
      <div class="col-auto"><a class="card-link fw-normal" href="#">Mark all as read</a></div>
    </div>
  </div>
  <div class="scrollbar-overlay" style="max-height:19rem;">
    <div class="list-group list-group-flush fw-normal fs--1">
      <div class="list-group-title border-bottom">NEW</div>
      <div class="list-group-item">
        <a class="notification notification-flush notification-unread" href="#!">
          <div class="notification-avatar">
            <div class="avatar avatar-2xl me-3">
              <img class="rounded-circle" src="../assets/img/team/1-thumb.png" alt="" />
            </div>
          </div>
          <div class="notification-body">
            <p class="mb-1"><strong>Emma Watson</strong> replied to your comment : "Hello world 😍"</p>
            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">💬</span>Just now</span>
          </div>
        </a>
      </div>
      <div class="list-group-item">
        <a class="notification notification-flush notification-unread" href="#!">
          <div class="notification-avatar">
            <div class="avatar avatar-2xl me-3">
              <div class="avatar-name rounded-circle"><span>AB</span></div>
            </div>
          </div>
          <div class="notification-body">
            <p class="mb-1"><strong>Albert Brooks</strong> reacted to <strong>Mia Khalifa's</strong> status</p>
            <span class="notification-time"><span class="me-2 fab fa-gratipay text-danger"></span>9hr</span>
          </div>
        </a>
      </div>
      <div class="list-group-title border-bottom">EARLIER</div>
      <div class="list-group-item">
        <a class="notification notification-flush" href="#!">
          <div class="notification-avatar">
            <div class="avatar avatar-2xl me-3">
              <img class="rounded-circle" src="../assets/img/icons/weather-sm.jpg" alt="" />
            </div>
          </div>
          <div class="notification-body">
            <p class="mb-1">The forecast today shows a low of 20&#8451; in California. See today's weather.</p>
            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">🌤️</span>1d</span>
          </div>
        </a>
      </div>
      <div class="list-group-item">
        <a class="border-bottom-0 notification-unread  notification notification-flush" href="#!">
          <div class="notification-avatar">
            <div class="avatar avatar-xl me-3">
              <img class="rounded-circle" src="../assets/img/logos/oxford.png" alt="" />
            </div>
          </div>
          <div class="notification-body">
            <p class="mb-1"><strong>University of Oxford</strong> created an event : "Causal Inference Hilary 2019"</p>
            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">✌️</span>1w</span>
          </div>
        </a>
      </div>
      <div class="list-group-item">
        <a class="border-bottom-0 notification notification-flush" href="#!">
          <div class="notification-avatar">
            <div class="avatar avatar-xl me-3">
              <img class="rounded-circle" src="../assets/img/team/10.jpg" alt="" />
            </div>
          </div>
          <div class="notification-body">
            <p class="mb-1"><strong>James Cameron</strong> invited to join the group: United Nations International Children's Fund</p>
            <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">🙋‍</span>2d</span>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="card-footer text-center border-top"><a class="card-link d-block" href="../social/notifications.html">View all</a></div>
</div>
Background
Card image
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
Card image cap
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

Card image cap
Second card title

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

Last updated an hour ago

Card image cap
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 title

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

Primary card title

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

Primary card title

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

Primary card title

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

Primary card title

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

Primary card title

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

Primary card title

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

Primary card title

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 title</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">Primary card title</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">Primary card title</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">Primary card title</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">Primary card title</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">Primary card title</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">Primary card title</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">Primary card title</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>

Thank you for creating with Falcon |
2021 © Themewagon

v3.0.0-beta4

customize