---
title: Card
---

import Card from '@theme/Card';

Cards are flexible containers that can be used to display content with call to actions.

## Dark cards


Using:

```jsx
import Card from '@theme/Card';

<div className="row">

<Card 
    title="Title A" 
    content="Description."
    link="https://finboot.com"
    target="_blank"
    className="col col--6"
    style="dark"
    />

<Card 
    title="Title B" 
    content="Description."
    link="https://finboot.com"
    target="_self"
    className="col col--6"
    style="dark"
    />

</div>
```

Renders:

<div className="row">

<Card 
    title="Title A" 
    content="Description."
    link="https://finboot.com"
    target="_blank"
    className="col col--6"
    style="dark"
    />

<Card 
    title="Title B" 
    content="Description."
    link="https://finboot.com"
    target="_self"
    className="col col--6"
    style="dark"
    />
    
</div>

## Light cards

Using:

```jsx
import Card from '@theme/Card';

<div className="row">

<Card 
    title="Title A" 
    content="Description."
    link="https://finboot.com"
    className="col col--12"
    buttonText="Learn more"
    style="light"
    />


<Card 
    title="Title B" 
    content="Description."
    link="https://finboot.com"
    className="col col--12"
    buttonText="Learn more"
    style="light"
    />

</div>
```

Renders:

<div className="row">

<Card 
    title="Title A" 
    content="Description."
    link="https://finboot.com"
    className="col col--12"
    buttonText="Learn more"
    style="light"
    />


<Card 
    title="Title B" 
    content="Description."
    link="https://finboot.com"
    className="col col--12"
    buttonText="Learn more"
    style="light"
    />

</div>

## Gradient cards

Using:


```jsx
import Card from '@theme/Card';

<div className="row">

<Card 
    title="Title A" 
    link="https://finboot.com"
    className="col col--6"
    style="gradient"
    />

<Card 
    title="Title B" 
    link="https://finboot.com"
    className="col col--6"
    style="gradient"
    />

<Card 
    title="Title C" 
    link="https://finboot.com"
    className="col col--3"
    style="gradient"
    />

<Card 
    title="Title D" 
    link="https://finboot.com"
    className="col col--3"
    style="gradient"
    />

</div>
```

Renders:

<div className="row">

<Card 
    title="Title A" 
    link="https://finboot.com"
    className="col col--3"
    style="gradient"
    />

<Card 
    title="Title B" 
    link="https://finboot.com"
    className="col col--3"
    style="gradient"
    />

<Card 
    title="Title C" 
    link="https://finboot.com"
    className="col col--3"
    style="gradient"
    />

<Card 
    title="Title D" 
    link="https://finboot.com"
    className="col col--3"
    style="gradient"
    />

</div>