Cards
Flexible and extensible content containers with options for header, overlays, and colored backgrounds.
Basic Markup
Wrap card content within a .card. The .card-block class adds additional padding between elements (i.e. an image and text).
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
<a href="#" class="btn btn-primary">button</a>
</div>
</div>
Sizing
Cards are block-level by default, so they’ll fill the available horizontal space. Constrain their widths via custom styles or predefined grid classes.
<div class="row">
<div class="col-sm-6">
<div class="card card-block">
<h3 class="card-title">Card Title</h3>
<p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
<a href="#" class="btn btn-primary">button</a>
</div>
</div>
<div class="col-sm-6">
<div class="card card-block">
<h3 class="card-title">Card Title</h3>
<p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
<a href="#" class="btn btn-primary">button</a>
</div>
</div>
</div>
Overlay
Overlay another layer over the contents of an existing card by using .card-overlay. To make the overlay layer appear on hover, add .card-hover to the same div.
Card Title
Card subtitle
Example paragraph text to show how it's displayed within a card.
Hover over this card
Interactive Example
Example paragraph text to show how it's displayed within a card.
<div class="card">
<!-- underlying card content -->
<div class="card-block">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle">Card subtitle</h5>
</div>
<div class="card-block">
<p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
<a href="#" class="btn btn-primary">button</a>
</div>
<!-- overlay content -->
<div class="card-overlay card-hover">
<h4 class="card-title">Overlay Title</h4>
<p class="card-text">Example paragraph text to show what overlayed text looks like within a card.</p>
<button class="btn btn-primary">button</button>
</div>
</div>
Background Colors
Add variant class for changing the background-color and border-color of a card.
<div class="card card-success">...</div>
<div class="card card-info">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>
Card List View
List views may be contained within a cards by simply wrapping a .new-list-view element with .card
-
Item
-
sub item 1
-
sub sub a
-
sub sub b
-
-
sub item 2
-
-
Link Item
-
Editable Item
-
Read Only Item
A card-block paragraph of text dividing two lists inside a card.
A card-block paragraph of text.
<div class="card">
<div class="card-header">
List View Items
</div>
<ul class="new-list-view">
<li>
<div class="list-view-item">
<div class="col col-100">Item</div>
</div>
</li>
...
</ul>
</div>
Card with Alert
Cards can contain .alert in two different ways, inline or within a .card-block.
Success!
This is a card inline alert message.
The rest of the card...
This is an alert message inside a card-block.
The rest of the card...
<div class="card">
<div class="alert alert-success">
<h4>Success!</h4>
<p>This is a card inline alert message.</p>
</div>
<div class="card-block">
<p class="card-text">The rest of the card...</p>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="alert alert-info">
<div class="alert-icon">
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg>
</div>
<p>This is an alert message inside a card-block.</p>
</div>
<p class="card-text">The rest of the card...</p>
</div>
</div>
Add Card
If you're using cards to display a list of objects, use .card-add and .v-center at the end of the list to give users an option to add a another object to the list. A height on the .card-add must be set for content to center vertically.
add object
<div class="card card-add">
<div class="card-block v-center">
<svg class="cyclops-icon lg"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-plus-circle"></use></svg>
<p>add object</p>
</div>
</div>
Card Decks
To get equal width ad height cards, use .card-deck and .card-deck-wrapper.
Card Title
Card subtitle
Example paragraph text to show how it's displayed within a card.
Card Title
Card subtitle
Example paragraph text to show how it's displayed within a card. EThis card contains more text than its adjacent cards.
Card Title
Card subtitle
Example paragraph text to show how it's displayed within a card.
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle">Card subtitle</h5>
</div>
<div class="card-block">
<p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle">Card subtitle</h5>
</div>
<div class="card-block">
<p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle">Card subtitle</h5>
</div>
<div class="card-block">
<p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
</div>
</div>
</div>
</div>