.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
class to add an optional header to the card.
.card-link
class
on all links or use a Clarity button instead.
.card-divider
assigned to any block element creates a simple divider to separate to
sections inside the card
.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
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
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
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
class renders the group vertically instead of horizontally
.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.
<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="javascript://" class="dropdown-item">Change Lease</a>
<a href="javascript://" class="dropdown-item">Destroy</a>
<a href="javascript://" class="dropdown-item">Power Off</a>
<a href="javascript://" class="dropdown-item">Reboot</a>
<a href="javascript://" class="dropdown-item">Reconfigure</a>
<a href="javascript://" class="dropdown-item">Reprovision</a>
<a href="javascript://" class="dropdown-item">Shutdown</a>
<a href="javascript://" class="dropdown-item">Suspend</a>
</div>
</div>
<a href="javascript://" class="card-link">Link One</a>
<a href="javascript://" class="card-link">Link Two</a>
</div>
<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="javascript://" class="dropdown-item">Change Lease</a>
<a href="javascript://" class="dropdown-item">Destroy</a>
<a href="javascript://" class="dropdown-item">Power Off</a>
<a href="javascript://" class="dropdown-item">Reboot</a>
<a href="javascript://" class="dropdown-item">Reconfigure</a>
<a href="javascript://" class="dropdown-item">Reprovision</a>
<a href="javascript://" class="dropdown-item">Shutdown</a>
<a href="javascript://" class="dropdown-item">Suspend</a>
</div>
</div>
</div>
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!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!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!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="javascript://" 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="javascript://" 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="javascript://" 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="javascript://" class="btn btn-primary">Go!</a>
</div>
</div>
</div>
<a href="javascript://" 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>
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="javascript://" class="btn btn-primary">Go somewhere</a>
</div>
</div>
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="javascript://" class="btn btn-link">Button</a>
</div>
</div>
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.
<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="javascript://" class="card-link">Card link</a>
<a href="javascript://" class="card-link">Another link</a>
</div>
</div>
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