.card-title
,
.card-text
and
.card-link
elements.
.card-block
can also contain Clarity Buttons if needed. You can extend the
.card-block
with
.card
if your card does not have any content outside of the
.card-block
.card-header
class to add an optional header to the card.
.card-link
class on all links or use a Clarity button instead.
.card-divider
assigned to any block element creates a simple divider to separate to sections inside the card
.card-overflow-menu
is a wrapper for the overflow menu. It contains a
.card-link
followed by the
.menu
. The
.card-link
acts as a toggle to open and close the menu. The menu can be activated by attaching the
.active
class to the
.card-overflow-menu
class
.menu
should be followed by a
.card-link
inside a
.card-overflow-menu
. All items in a menu should be assigned a
.menu-item
class
.clickable
class along with the
.card
will change the cursor to a pointer and give a raised effect to the card making it appear clickable on hover.
.group
is a wrapper around an image icon, title and description. The icon, title and description should be assigned the
.icon
,
.title
and
.description
respectively
.wrap
class renders the group vertically instead of horizontally
.list-group
inside the card. Each list element should extend the
.list-group-item
class.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Go!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Go!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Go!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Go!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Go somewhereLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
ButtonLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Button