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 Reviews
APPLE iPhone 12 (Black, 64 GB)
1,58,616 Ratings & 10,880 Reviews
APPLE 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