Medicare

Card

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

Card on Bootstrap

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" 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

<div class="bg-white rounded-soft py-2">
  <a class="dropdown-item font-weight-bold text-warning" href="#!"><span class="fas fa-crown mr-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="../pages/profile.html">Profile &amp; account</a>
  <a class="dropdown-item" href="#!">Feedback</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="../pages/settings.html">Settings</a>
  <a class="dropdown-item" href="../authentication/log-out.html">Logout</a>
</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" 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>

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" 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">
    <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">
    <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">
    <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 Decks

Awesome card title

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

Last updated 22 mins ago

Beautiful card title

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

Last updated 3 hours ago

Gorgeous 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 on Monday

<div class="card-deck">
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/generic/6.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Awesome card title</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>
      <p class="card-text"><small class="text-muted">Last updated 22 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/generic/7.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Beautiful 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 hours ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/generic/8.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Gorgeous 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 on Monday</small></p>
    </div>
  </div>
</div>

Card styles

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">
  <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>

+(123) 456 78910

Have a question? call us now

help@medicare.com

Need support? Drop us an email

Mon – Sat 07:00 – 21:00

We are open on

brigham and women's hospital

75 francis street, boston ma 02115

General information: 671-732-5500

New Patients: 800-294-9999

Card

Basic Example

Card title

Card with list

Card with image

Card title

Background

Card title

Card Groups

First card title

Second card title

Yet another card title

Card Decks

Awesome card title

Beautiful card title

Gorgeous card title

Card styles

brigham and women's hospital

Centers

Clinical Departments

Departments