Cards
Card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards provide a flexible and extensible content container with multiple variants and supports a wide variety of content, including images, text, list groups, links, and more.
Bootstrap Cards DocumentationCheck out cards example here
Default
Below are examples of basic cards with mixed content. Cards naturally fill the full width of its parent element. To control the width of the card place it in the grid, use the sizing utilities, or set the width inline.
June 6, 2021
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default text.
Design
June 6, 2021
Lorem ipsum dolor enim ad minim
veniam quis
Many desktop publishing packages and web page editors now use
Lorem Ipsum as their default text.
Variation
Card with utility classses, button, modifier classes and icon.
Notification
2 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Notification
2 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
custom products for awesome teams
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
custom products for
awesome teams
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed
do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card With Icons and Modifiers
Powerful technology
Lorem ipsum dolor sit amet elit, consectetur adipiscing, do eiusmod tempor incididunt ut eiusmod et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Powerful technology
Lorem ipsum dolor sit amet elit, consectetur adipiscing, do eiusmod tempor
incididunt ut eiusmod et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation.
We Research, Design & Build
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
We Research, Design & Build
Lorem ipsum dolor sit amet, consectetur
adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate
velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
sunt in
culpa qui officia deserunt mollit anim id est laborum.
Pricing Cards
Basic
$5
Simple yet powerful
- Lorem ipsum dolor sit
- Amet consectetur adipiscing
- Sed do eiusmod tempor
- Incididunt ut labore et
Premium
$18
Simple yet powerful
- Lorem ipsum dolor sit
- Amet consectetur adipiscing
- Sed do eiusmod tempor
- Incididunt ut labore et
Basic
$5
Simple yet powerful
- Lorem ipsum dolor sit
- Amet consectetur adipiscing
- Sed do eiusmod tempor
- Incididunt ut labore et
Best Value
Premium
$18
Simple yet powerful
- Lorem ipsum dolor sit
- Amet consectetur adipiscing
- Sed do eiusmod tempor
- Incididunt ut labore et