Cards
Card Body
Default
Default
No shadow
No border
No shadow & border
Body elements
Card text
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est. Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit. Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at. Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
Card title
Card title
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est. Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit. Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at. Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
Card subtitle
Card title
Card subtitle
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est. Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit. Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at. Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
Card links
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est. Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit. Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at. Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
Card link Another linkCard buttons
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est. Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit. Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at. Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
Card link Another linkContent types
Card text
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est. Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit. Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at. Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
List Group
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote
- 3 min ago
- 3 min ago
- 3 min ago
- 3 min ago
- 3 min ago
- 3 min ago
- 3 min ago
Content alignment
Default left
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est. Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit. Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at. Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
Center
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div id="graph1"></div>
Card Header
Default
No shadow
No border
No shadow & border
Font size
H1
Header
H2
Header
H3
Header
H4
Header
H5
Header
H6
Header
Header navigation
Tabs
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est.
Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit.
Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at.
Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
Pills
Nulla ac porttitor mauris. Nunc sit amet eros ultrices, dignissim ante eget, porttitor est.
Maecenas posuere malesuada lacus. Nulla facilisi. Nulla congue interdum felis sed consequat. Aenean mattis vestibulum blandit.
Suspendisse ultrices gravida venenatis. Quisque tincidunt urna leo, at ultrices quam auctor at.
Quisque purus felis, sollicitudin sit amet massa vel, luctus fermentum nisi. Cras volutpat elementum nulla, at pellentesque diam.
<div id="graph1"></div>
Full Card
Default
No shadow
No border
No shadow & border
<div id="graph1"></div>
Card list
Default
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
No shadow
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
No border
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
No shadow & border
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div id="graph1"></div>
Bootstrap colors
Default
No shadow
No border
No shadow & border
No shadow & border
No shadow & border
No shadow & border
No shadow & border
<div id="graph1"></div>
Bootstrap borders
Default
No shadow
No border
No shadow & border
No shadow & border
No shadow & border
No shadow & border
No shadow & border
<div id="graph1"></div>
Custom colors applied to container
Default
No shadow
No border
No shadow & border
<div id="graph1"></div>
Custom colors applied to card elements
Default
No shadow
No border
No shadow & border
<div id="graph1"></div>
Gradient applied to container
Default
No shadow
No border
No shadow & border
<div id="graph1"></div>
Gradient applied to card elements
Default
No shadow
No border
No shadow & border
<div id="graph1"></div>
Card border and border width
Default
No shadow
No border
No shadow & border
No shadow & border
<div id="graph1"></div>
Card shadow
Shadow size
Shadow 1
Shadow 1 no border
Shadow 2
Shadow 2 no border
Shadow 3
Shadow 3 no border
Shadow 4
Shadow 4 no border
Shadow 5
Shadow 5 no border
Shadow color
Red Shadow
Deep Purple Shadow
Indigo Shadow
Brown Shadow
<div id="graph1"></div>
Image
Top Image
Default

No shadow

No border

No shadow & border

Image position
Image cap

Image body

Image bottom

Image only

Image left

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image right
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image overlay
Image cap

Card body

Image bottom

Image left

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image right
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

<div id="graph1"></div>
Video
Position
Image cap
Video body
Video bottom
Video only
Image left
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image right
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div id="graph1"></div>
Stacked Card
Stacked wide
Image cap

Image cap

Image cap

Image left on all screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on small screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on medium screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on large screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on x-large screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image right on all screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on sm screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on md screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on lg screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on xl screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Stacked Narrow
Image cap

Image cap

Image cap

Image left on all screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on small screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on medium screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on large screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image left on x-large screens

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Image right on all screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on sm screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on md screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on lg screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Image right on xl screens
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

<div id="graph1"></div>
Moving cards
Rotating card

Fliping card

Expanding card
Top Carousel card
Bottom Carousel card
Full Carousel card
<div id="graph1"></div>
Card group



<div id="graph1"></div>
Card deck



<div id="graph1"></div>
Card columns




<div id="graph1"></div>