Card
Cards are flexible surfaces used to group information in a small layout. They give small previews of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.
Text/Shadow cards
To obtain this result, use div
tag with combination of
card-container
, card-content
,
card-header
, card-subhead
, card-header-tag
and
card-body
class names. For shadow card add additional
class
name as
card-shadow
.
APS-C Camera Nikon
by Camera JabberA little gem of a camera with some powerful features
APS-C Camera Nikon
by Camera JabberA little gem of a camera with some powerful features
Vertical/Horizontal cards
To obtain this result, use div
tag with combination of
card-container
, card-content
,
card-header
, card-subhead
, card-header-tag
,
card-body
, card-footer
,
card-footer-btns
and
card-footer-links
class names. For horizontal card add additional class name as
card-horizontal
.
APS-C Camera Nikon
by Camera JabberA little gem of a camera with some powerful features
APS-C Camera Nikon
by Camera JabberOverlay Text card
To obtain this result, use div
tag with combination of
card-container
, card-content
,
card-header
, card-subhead
, card-header-tag
,
card-body
, card-footer
,
card-footer-btns
and
card-footer-links
class names. For overlay card add additional class name as
card-overlap
.
APS-C Camera Nikon
by Camera JabberA little gem of a camera with some powerful features
Badge card
To obtain this result, use div
tag with combination of
card-container
, card-content
,
card-header
, card-subhead
, card-header-tag
,
card-body
, card-footer
,
card-footer-btns
and
card-footer-links
class names. For badge card add additional class name as
card-badge
and card-badge-item
.
APS-C Camera Nikon
by Camera JabberA little gem of a camera with some powerful features
Dismiss card
To obtain this result, use div
tag with combination of
card-container
, card-content
,
card-header
, card-subhead
, card-header-tag
card-body
, card-footer
,
card-footer-btns
and
card-footer-links
class names. For badge card add additional class name as
card-dismiss
and use button
tag with
dismiss-btn
and
dismiss-btn-icon
class name.
APS-C Camera Nikon
by Camera JabberA little gem of a camera with some powerful features
eCommerce Card
To obtain this result, use div
tag with combination of
card-content
,
card-header
, card-subhead
, card-header-tag
,
card-body
and card-footer
class names. Use ecomm-card
for
vertical card,
ecomm-card-horz
for horizontal card and ecomm-overlay
for overlay card.
APPLE iPhone 12 (Black, 64 GB)
1,58,616 Ratings & 10,880 ReviewsAPPLE iPhone 12 (Black, 64 GB)
1,58,616 Ratings & 10,880 ReviewsAPPLE iPhone 12 (Black, 64 GB)
1,58,616 Ratings & 10,880 ReviewsSocial Media card
To obtain this result, use div
tag with combination of
card-container
, card-content
,
card-header
, card-header
, card-subhead
,
card-body
, card-footer
,
card-footer-btns
and
card-footer-links
class names. Use social-card
class for Social media
card.
A little gem of a camera with some powerful features
A little gem of a camera with some powerful features