## 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 more

##### Dark

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

##### Primary

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

##### Bordered

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

##### Shadowed

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

##### Hover 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 more

## Using 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
Product Design

##### Image at top with labels

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
Product

##### Image at top with right label

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 items

## Overlay & 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

Hossein Shams
Marketing

### An overlay with 60% opacity

Hossein Shams

### 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 left

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.

##### 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.