Create materialistic cards with various styles & formats with our card component.
Usage
Cards contain content and actions about a single subject. They are useful for displaying similar content in a
well versed fashion. The parent of the content must have the card class attached to
give access to the properties outlined below.
Basic card
Card subtitle
I am a basic card with a header, subtitle & content. You can use me to display
basic content.
Notation:
Cards comprise of three different sections, all of which are prefixed with card. The card-header, card-body and the card-action, all of which are
optional.
All cards (including large) are 100% width at mobile, filling the column or parent in which the card
lies. They then become a fixed width at tablet screens & upwards.
Note: You can have any combination of the classes listed below.
<div class="card">
<div class="card-content">
<h3 class="card-title">Basic card</h3>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">I am a basic card with a header, subtitle & content.</p>
</div>
</div>
Action
You can use actions within the card in conjunction with links & buttons. Add the card-action as a wrapper for any buttons or links.
Action card
Card subtitle
I am a simple card with a header, subtitle & basic card links.
<div class="card">
<div class="card-content">
<h3 class="card-title">Action card</h3>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">I am a simple card with a header, subtitle & basic card links.</p>
</div>
<div class="card-action">
<a href="#!" class="c-primary t-uppercase">Card link</a>
<a href="#!" class="c-primary t-uppercase">Card link</a>
</div>
</div>
Button card
Card subtitle
I am a simple card with a header, subtitle & button.
<div class="card">
<div class="card-content">
<h3 class="card-title">Simple card</h3>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">I am a simple card with a header, subtitle & button.</p>
</div>
<div class="card-action">
<button class="btn btn-primary">Button</button>
</div>
</div>
Shadow
mesh automatically adds border to the cards, but if you fancy using shadow instead, go ahead! Just use the card-shadow class in conjunction with the card class.
This will get rid of any borders and add a materialistic box shadow.
Shadow card
Card subtitle
I am a simple card with a header, subtitle & basic card links.
<div class="card card-shadow">
<div class="card-content">
<h3 class="card-title">Shadow card</h3>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">I am a simple card with a header, subtitle & basic card links.</p>
</div>
<div class="card-action">
<a href="#!" class="c-primary t-uppercase">Card link</a>
<a href="#!" class="c-primary t-uppercase">Card link</a>
</div>
</div>
Image
To use images within the card component, add the card-image class to contain the
image.
Note: mesh does not calculate heights of the image, the width will always be the size of
the card. If a set height is required, the object-fit: cover; property is
recommended, whilst setting a width & height on the card-image element.
FAB stands for Floating Action Button, they are used to add user interaction to a card effectively. To use
the FAB button, add the card-icon class, which will make the icon absolutely
positioned within the card-image element.
Note: The following classes need to be used in order for the FAB button to appear like
below - btn btn-{color} btn-justicon br-circle.
You can also use any font awesome icon.
FAB card
I am an image card with an action icon in the centre.
<div class="card card-shadow">
<div class="card-image">
<img src="..">
<a href="#!" class="card-icon btn btn-primary btn-justicon br-circle c-white">
<i class="far fa-plus"></i>
</a>
</div>
<div class="card-content">
<h3 class="card-title">Icon card</h3>
<p class="card-text">I am an image card with an action icon in the centre.</p>
</div>
</div>
Large FAB:
To make the FAB a little bigger, simply add btn-large class to the a link. You can also use a button if you prefer.
Large FAB card
I am an image card with an large action icon in the centre.
<div class="card card-shadow">
<div class="card-image">
<img src="..">
<a href="#!" class="card-icon btn btn-primary btn-large btn-justicon br-circle c-white">
<i class="far fa-plus"></i>
</a>
</div>
<div class="card-content">
<h3 class="card-title">Icon card</h3>
<p class="card-text">I am an image card with an large action icon in the centre.</p>
</div>
</div>
Background
To add an image as a full background, place an <img> tag straight after the
enclosing card element, then add the card-background-img
class to position the image centrally.
Note: You can achieve the following result almost entirely with our utility helpers, such
as padding which gives more space on the y axis of these cards.
Background card
A quote about design
“If you do good work for good clients, it will lead to other good work for other
good clients. If you do bad work for bad clients, it will lead to other bad work for other bad
clients." Michael Bierut
<div class="card card-shadow t-center c-white py-4">
<img class="card-background-img" src="...">
<div class="card-content">
<h6 class="t-uppercase">Background card</h6>
<h3 class="card-title">A quote about design</h3>
<p class="card-text">“If you do good work for good clients, it will lead to other good work for other good clients. If you do bad work for bad clients, it will lead to other bad work for other bad clients." <i>Michael Bierut</i></p>
<a href="#!" class="btn btn-secondary c-white mt-2">Card link</a>
</div>
</div>
Large background card:
To make the background card a little bigger, simply add card-large class to the
card element.
Background card
A quote about design
“To design is much more than simply to assemble, to order, or even to edit: it is
to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to
dramatize, to persuade, and perhaps even to amuse. To design is to transform prose into poetry.”
Paul Rand
<div class="card card-large card-shadow t-center c-white py-4">
<img class="card-background-img" src="...">
<div class="card-content">
<h6 class="t-uppercase">Background card</h6>
<h3 class="card-title">A quote about design</h3>
<p class="card-text">“If you do good work for good clients, it will lead to other good work for other good clients. If you do bad work for bad clients, it will lead to other bad work for other bad clients." <i>Michael Bierut</i></p>
<a href="#!" class="btn btn-secondary c-white mt-2">Card link</a>
</div>
</div>
Header
To add a header, simply use the card-header class which will add slight
padding to the element.
You can also use our badges/tags within the footer to create a sleek look, see below.
Basic card
Card subtitle
I am an image card with with a header and a footer with badges & icons.
BadgeAnother badge
<div class="card card-shadow">
<div class="card-header d-flex align-items-center">
<div class="d-block br-circle""></div>
<div class="ml-2">
<h4 class="card-title">Basic card</h4>
<h6 class="card-subtitle">Card subtitle</h6>
</div>
</div>
<div class="card-image">
<img src="...">
</div>
<div class="card-content">
<p class="card-text">I am an image card with with a header and a footer with badges & icons.</p>
</div>
<div class="card-action d-flex justify-content-between align-items-center">
<div class="d-flex">
<span class="badge badge-rounded badge-secondary">Badge</span>
<span class="badge badge-rounded badge-info">Another badge</span>
</div>
<i class="fas fa-heart c-primary"></i>
</div>
</div>
Variants
There are endless possibilities with using mesh cards, in different order, sizes, colors and more. Here are a
couple of examples:
100% width
To override the default fixed width of the mesh card simply add the w-100 class
to the card element.
This will fill the width of the parent, great if you want to use it in columns.
100% width card
Card subtitle
I am a card that stretches 100% to fit my parent.
100% width card
Card subtitle
I am a card that stretches 100% to fit my parent.
<div class="row">
<div class="col-6">
<div class="card w-100">
<div class="card-content">
<h3 class="card-title">100% width card</h3>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">I am a card that stretches 100% to fit my parent.</p>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card w-100">
<div class="card-content">
<h3 class="card-title">100% width card</h3>
<h5 class="card-subtitle">Card subtitle</h5>
<p class="card-text">I am a card that stretches 100% to fit my parent.</p>
</div>
</div>
</div>
Card panel
To have a simple card panel with a text filler, just use the card-content class
with the card-text class as a child, see below.
A 24 year old boy seeing out from the train’s window shouted… “Dad, look the trees
are going behind!” Dad smiled and a young couple sitting nearby, looked at the 24 year old’s
childish behavior with pity, suddenly he again exclaimed… “Dad, look the clouds are running with
us!” The couple couldn’t resist and said to the old man… “Why don’t you take your son to a good
doctor?” The old man smiled and said…“I did and we are just coming from the hospital, my son was
blind from birth, he just got his eyes today.” Every single person on the planet has a story. Don’t
judge people before you truly know them. The truth might surprise you.
<div class="card card-large">
<div class="card-content">
<p class="card-text">A 24 year old boy seeing out from the train’s window ...</p>
</div>
</div>
Variables
Change padding, widths and border colors with the card variables.
Variable
Value
Description
$card-enable-fab-icon: true;
Boolean
Enables/disables floating action buttons (FABs) on cards.
