Cards

Clarity cards are an extension of Bootstrap 4 cards and support the following classes:
.card
This is a required wrapper to contain all the card elements.
.card-block
This is a wrapper to group .card-title, .card-text and .card-link elements. .card-block can also contain Clarity Buttons if needed. You can extend the .card-block with .card if your card does not have any content outside of the .card-block
.card-header
Use the .card-header class to add an optional header to the card.
.card-title, .card-text, and .card-link
You can organize your content within cards using these helper classes. Extend the .card-link class on all links or use a Clarity button instead.
.card-divider:
.card-divider assigned to any block element creates a simple divider to separate to sections inside the card
.card-overflow-menu:
.card-overflow-menu is a wrapper for the overflow menu. It contains a .card-link followed by the .menu. The .card-link acts as a toggle to open and close the menu. The menu can be activated by attaching the .active class to the .card-overflow-menu class
.menu and .menu-item:
.menu should be followed by a .card-link inside a .card-overflow-menu. All items in a menu should be assigned a .menu-item class
.clickable:
Extending the .clickable class along with the .card will change the cursor to a pointer and give a raised effect to the card making it appear clickable on hover.
.group, .icon, .title and .description:
.group is a wrapper around an image icon, title and description. The icon, title and description should be assigned the .icon, .title and .description respectively
.wrap:
The .wrap class renders the group vertically instead of horizontally
.list-group
You can use a bootstrap .list-group inside the card. Each list element should extend the .list-group-item class. Extend the .list-group-flush class with the .list-group to remove the border-radius on the list-group items.

Examples

1. Card with a horizontal group and a overflow menu
Project A Owner: John Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Actions
Change Lease Destroy Power Off Reboot Reconfigure Reprovision Shutdown Suspend
Link One Link Two 

<div class="card card-block">
    <div class="group">
        <img class="icon" src="http://placehold.it/60x60" />
        <div class="description">
            <span class="title">Project A</span>
            <span>Owner: John Doe</span>
        </div>
    </div>
    <div class="card-divider"></div>
    <p class="card-text">...</p>
    <div class="dropdown top-left">
        <a class="card-link dropdown-toggle">Actions</a>
        <div class="dropdown-menu">
            <a href="..." class="dropdown-item">Change Lease</a>
            <a href="..." class="dropdown-item">Destroy</a>
            <a href="..." class="dropdown-item">Power Off</a>
            <a href="..." class="dropdown-item">Reboot</a>
            <a href="..." class="dropdown-item">Reconfigure</a>
            <a href="..." class="dropdown-item">Reprovision</a>
            <a href="..." class="dropdown-item">Shutdown</a>
            <a href="..." class="dropdown-item">Suspend</a>
        </div>
    </div>
    <a href="..." class="card-link">Link One</a>
    <a href="..." class="card-link">Link Two</a>
</div>
2. Card with a vertical group and an active overflow menu
Project B Owner: Jane Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link One Link Two
Actions
Change Lease Destroy Power Off Reboot Reconfigure Reprovision Shutdown Suspend 

<div class="card card-block">
    <div class="group wrap">
        <img class="icon" src="http://placehold.it/60x60" />
        <div class="description">
            <span class="title">Project B</span>
            <span>Owner: Jane Doe</span>
        </div>
    </div>
    <div class="card-divider"></div>
    <p class="card-text">
        ...
    </p>
    <a class="card-link">Link One</a>
    <a class="card-link">Link Two</a>
    <div class="dropdown open top-left">
        <a class="card-link dropdown-toggle">Actions</a>
        <div class="dropdown-menu">
            <a href="..." class="dropdown-item">Change Lease</a>
            <a href="..." class="dropdown-item">Destroy</a>
            <a href="..." class="dropdown-item">Power Off</a>
            <a href="..." class="dropdown-item">Reboot</a>
            <a href="..." class="dropdown-item">Reconfigure</a>
            <a href="..." class="dropdown-item">Reprovision</a>
            <a href="..." class="dropdown-item">Shutdown</a>
            <a href="..." class="dropdown-item">Suspend</a>
        </div>
    </div>
</div>
3. Cards inside a grid

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Go!

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Go!

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Go!

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Go! 

<div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
            <div class="card card-block">
                <h3 class="card-title">Title</h3>
                <div class="card-divider"></div>
                <p class="card-text">
                    ...
                </p>
                <a href="..." class="btn btn-primary">Go!</a>
            </div>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
            <div class="card card-block">
                <h3 class="card-title">Title</h3>
                <p class="card-text">
                    ...
                </p>
                <a href="..." class="btn btn-primary">Go!</a>
            </div>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
            <div class="card card-block">
                <h3 class="card-title">Title</h3>
                <div class="card-divider"></div>
                <p class="card-text">
                    ...
                </p>
                <a href="..." class="btn btn-primary">Go!</a>
            </div>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
            <div class="card card-block">
                <h3 class="card-title">Title</h3>
                <p class="card-text">
                    ...
                </p>
                <a href="..." class="btn btn-primary">Go!</a>
            </div>
        </div>
    </div>
4. Clickable cards
Featured

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 


<a href="..." class="card clickable">
    <div class="card-header">
        Featured
    </div>
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <p class="card-text">...</p>
    </div>
</a>
5. Other card variations
Featured

Special title treatment

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Go somewhere 

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-block">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">...</p>
        <a href="..." class="btn btn-primary">Go somewhere</a>
    </div>
</div>
Card image cap

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button 

<div class="card">
    <img class="card-img-top" src="http://placehold.it/480x200" alt="Card image cap">
    <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">...</p>
        <a href="..." class="btn btn-link">Button</a>
    </div>
</div>
Card image cap

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link 

<div class="card">
    <img class="card-img-top" src="http://placehold.it/480x200" alt="Card image cap">
    <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">...</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-block">
        <a href="..." class="card-link">Card link</a>
        <a href="..." class="card-link">Another link</a>
    </div>
</div>
Project B Owner: Jane Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link One
Actions
Change Lease Destroy Power Off Reboot Reconfigure Reprovision Shutdown Suspend
Project B Owner: Jane Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Actions
Change Lease Destroy Power Off Reboot Reconfigure Reprovision Shutdown Suspend
Link One
Card image cap

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button
Hello
Item 1 Item 2 Item 3 Item 4