---
layout: page
title: Cards Component
---
The card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.
##### Default Card Markup
{: .text-bold .text-dark .mt-5}
```html
```
{: .max-height-300}
##### Card Variants
{: .text-bold .text-dark .mt-5}
You can change the style of the box by adding any of the contextual classes.
```html
...
...
...
...
...
...
...
...
```
```html
...
...
...
...
...
...
...
```