Basic Styling
Cards include various options for customizing their backgrounds, borders, and color.
Default
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read moreDark
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read morePrimary
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read moreBordered
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read moreShadowed
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read moreHover shadow
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read moreUsing Images
Cards include a few options for working with images. Choose from appending image caps at either end of a card or overlaying images with card content.
Image at top
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read more
Card with a footer
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Image at bottom
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read more
Background image
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read more
Video/Camera
168 itemsOverlay & Scrim
Some sample of using background images in a card with different opacity of overlays and scrims. Please read the full documentation of overlays.
A scrim with 50% opacity at bottom
An overlay with 60% opacity
A 70% scrim at top
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
Read more
Card Hover
A content to display on top of your card content on mouse hover.
Basic card
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
The overlay block
You can modify this content which is inside the .card-hover element as you wish. Add overlay, change text color, change background color and etc.
Animation
You can display the hover-card element with a nice animation. For this purpose, add data-animation="" to the .card-hover element with one of the available animation names. Available animations are fade | zoom | slide-up | slide-down | slide-left | slide-right.
Fade
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
The overlay block
You can modify this content which is inside the .card-hover element as you wish. Add overlay, change text color, change background color and etc.
Zoom
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
The overlay block
You can modify this content which is inside the .card-hover element as you wish. Add overlay, change text color, change background color and etc.
Slide up
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
The overlay block
You can modify this content which is inside the .card-hover element as you wish. Add overlay, change text color, change background color and etc.
Slide down
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
The overlay block
You can modify this content which is inside the .card-hover element as you wish. Add overlay, change text color, change background color and etc.
Slide right
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title.
The overlay block
You can modify this content which is inside the .card-hover element as you wish.