#### Content - Cards

Statistics Invoices Schedule

###### Card titles and subtitles

Titles, subtitles and header elements

###### Card title

Basic card example without header elements

###### Card title With inline subtitle

Basic card with inline header subtitle

###### Card title With block subtitle

Basic card with block header subtitle

###### Card controls

Basic card with card controls

###### Card controls and inline subtitle

Card with inline header subtitle and card controls

###### Card controls and block subtitle

Card with block header subtitle and card controls

###### Card title options

Card heading font options for titles

###### Regular Semibold

Mixing regular text with semibold

###### Semibold Regular

Mixing semibold text with regular

###### Regular Thin

Mixing regular text with thin

###### Thin Regular

Mixing thin text with regular

###### Regular Bold

Mixing regular text with bold

###### Bold Regular

Mixing bold text with regular

###### Uppercase Regular

Mixing semibold uppercase text with regular

###### Regular Italic

Mixing regular text with italic

###### Thin Uppercase

Mixing thin text with semibold uppercase

###### Regular Small tag

Regular text with subtitle

###### Uppercase Small tag

Semibold uppercase text with subtitle

###### Default Muted

Mixing default color with muted color

###### Default Primary

Mixing default color with primary color

###### Default Danger

Mixing default color with danger color

###### Default Success

Mixing default color with success color

###### Default Warning

Mixing default color with warning color

###### Default Info

Mixing default color with info color

###### Default Teal

Mixing default color with custom color

###### Card title sizing

Card title font colors using standard html headings

# H1 title

H1 title heading using `<h1 class="card-title">` markup

### H3 title

H3 title heading using `<h3 class="card-title">` markup

##### H5 title

H5 title heading using `<h5 class="card-title">` markup

## H2 title

H2 title heading using `<h2 class="card-title">` markup

#### H4 title

H4 title heading using `<h4 class="card-title">` markup

###### H6 title

H6 title heading using `<h6 class="card-title">` markup

###### Card header options

Background, text and border colors

###### Condensed header

Default flat card style using `.card` class

###### Transparent header

Card with white header color - add `.bg-transparent` class to card header container

###### Light header

Card with light header color - add `.bg-light` class to card header container

###### Dark header

Card with dark header color - add `.bg-dark` class to card header container

###### Primary header

Card with primary header color - add `.bg-primary` class to card header container

###### Secondary header

Card with secondary header color - add `.bg-secondary` class to card header container

###### Green (success) header

Card with green (success context) header - add `.bg-success` class to card header container

###### Orange (warning) header

Card with orange (warning context) header - add `.bg-warning` class to card header container

###### Red (danger) header

Card with red (danger context) header - add `.bg-danger` class to card header container

###### Blue (info) header

Card with blue (info context) header - add `.bg-info` class to card header container

###### Custom light color

Card header with custom light colors - add `.alpha-*` class to card header container

###### Custom dark color

Card header with custom dark colors - add `.bg-*` class to card header container

###### Bordered cards

Available card styles and colors

###### Condensed header

Default flat card style using `.card` class

###### Transparent header

Card with white header color - add `.bg-transparent` class to card header container

###### Light header

Card with light header color - add `.bg-light` class to card header container

###### Dark header

Card with dark header color - add `.bg-dark` class to card header container

###### Primary header

Card with primary header color - add `.bg-primary` class to card header container

###### Secondary header

Card with secondary header color - add `.bg-secondary` class to card header container

###### Green (success) header

Card with green (success context) header - add `.bg-success` class to card header container

###### Orange (warning) header

Card with orange (warning context) header - add `.bg-warning` class to card header container

###### Red (danger) header

Card with red (danger context) header - add `.bg-danger` class to card header container

###### Blue (info) header

Card with blue (info context) header - add `.bg-info` class to card header container

###### Custom light color

Card header with custom light colors - add `.alpha-*` class to card header container

###### Custom dark color

Card header with custom dark colors - add `.bg-*` class to card header container

###### Card borders

Custom 4 side borders for content cards

###### Top custom border

Custom color of the top border. Use optional `.rounded-top-0` class to remove rounded top corners

###### Left custom border

Custom color of the left border. Use optional `.rounded-left-0` class to remove rounded left corners

###### Top and bottom borders

Custom color of the top and bottom borders. Use optional `.rounded-0` class to remove rounded corners

###### Bottom custom border

Custom color of the bottom border. Use optional `.rounded-bottom-0` class to remove rounded bottom corners

###### Right custom border

Custom color of the right border. Use optional `.rounded-right-0` class to remove rounded right corners

###### Left and right borders

Custom color of the left and right borders. Use optional `.rounded-0` class to remove rounded corners

###### Border sizing

Available in 1 default and 2 optional sizes

###### Basic size

Basic border size of the element, defined in core variables. Any card border can be highlighted with proper class name

###### Double size

Double border size using `.border-*-2` class, where "*" is border direction. Use `.border-2` class to make all borders thicker

###### Tripple size

Tripple border size using `.border-*-3` class, where "*" is border direction. Use `.border-3` class to make all borders thicker

###### Basic size

Basic border size of the element, defined in core variables. Any card border can be highlighted with proper class name

###### Double size

Double border size using `.border-*-2` class, where "*" is border direction. Use `.border-2` class to make all borders thicker

###### Tripple size

Tripple border size using `.border-*-3` class, where "*" is border direction. Use `.border-3` class to make all borders thicker

###### Card backgrounds

Optional default and custom background colors

###### Light background

Card with light background color using `.bg-light` class

###### Primary background

Card with primary background color using `.bg-primary` class

###### Red (danger) background

Card with red (danger) background color using `.bg-danger` class

###### Green (success) background

Card with green (success) background color using `.bg-success` class

###### Alpha backgrounds

Card with custom light background color using `.alpha-*` class

###### Dark background

Card with dark background color using `.bg-dark` class

###### Secondary background

Card with secondary background color using `.bg-secondary` class

###### Orange (warning) background

Card with orange (warning) background color using `.bg-warning` class

###### Blue (info) background

Card with blue (info) background color using `.bg-info` class

###### Custom background

Card with custom background color using `.bg-*` classes