Card
Card is used to display information about a particular topic or item with some basic functions. Cards are also of different types which is as follows.
Individual usage
Basic Variant
Card
Cards contain content and actions about a single subject.
This is basic card which has two action button.
Default :none
Container class : card
Image class : card-img
Content container class : card-content
Content class : card-title card-sub-title card-description
Button container class : card-btn-container
Button class : btn btn-primary btn-secondary
Card with badge
Basic card with badge
Card
Cards contain content and actions about a single subject.
Card can have a badge for highlighting some information.
Default : none
Badge class : card-badge
Card with dismiss
Card with dismiss
Card
Cards contain content and actions about a single subject.
Card can be dismissed with a button.
Default : none
Dismiss class : card-dismiss
Card with text overlay
Cards contain content and actions about a single subject.
Card text overlay is a design which displays a text over the image of a card.
Default : none
Container class : txt-overlay-container txt-overlay
Card with only text
Card with only text
Card
Cards contain content and actions about a single subject. Cards contain content and actions about a single subject. Cards contain content and actions about a single subject.
Card with only text is the simple most card used to give importance to information.
Default : none
Container class : card-only-text
Horizontal card
Horizontal card
Card
Cards contain content and actions about a single subject.
Cards can also be used horizontally to save up some vertical space or for design convention.
Default : none
Container class : card-horizontal
Image class : card-img-horizontal
Content class : card-content-horizontal
Card with shadow
Card with shadow
Card
Cards contain content and actions about a single subject.
Cards can have shadows to give a look of an elevated card.
Default : none
Container class : card-shadow