# Card
Container of styled content.

## Basic
<div class="card" style="width: 250px; height: 250px;">
    <h2 class="card-title">Title</h2>
    <span class="card-subtitle">Subtitle</span>
    <div class="card-content">
        This is the content.
    </div>
</div>

```html
<div class="card" style="width: 250px; height: 250px;">
    <h2 class="card-title">Title</h2>
    <span class="card-subtitle">Subtitle</span>
    <div class="card-content">
        This is the content.
    </div>
</div>
```
## Image
<div class="card" style="width: 350px;">
    <h2 class="card-title">Image</h2>
    <span class="card-subtitle">By Artist Name</span>
    <div class="card-content">
        <img class="br bg2" width="400" height="200">
    </div>
</div>

```html
<div class="card" style="width: 350px;">
    <h2 class="card-title">Image</h2>
    <span class="card-subtitle">By Artist Name</span>
    <div class="card-content">
        <img class="br bg2" width="400" height="200">
    </div>
</div>
```
## Actions
<div class="card" style="width: 350px; height: 250px;">
    <h2 class="card-title">Title</h2>
    <span class="card-subtitle">Subtitle</span>
    <div class="card-content">
        This is the content.
    </div>
    <div class="card-actions">
        <button type="button" class="btn btn-secondary">Purchase</button>
        <button type="button" class="btn btn-primary">Share</button>
    </div>
</div>

```html
<div class="card" style="width: 350px; height: 250px;">
    <h2 class="card-title">Title</h2>
    <span class="card-subtitle">Subtitle</span>
    <div class="card-content">
        This is the content.
    </div>
    <div class="card-actions">
        <button type="button" class="btn btn-secondary">Purchase</button>
        <button type="button" class="btn btn-primary">Share</button>
    </div>
</div>
```