# Card Components

## Basic Card
```html
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
  </div>
  <div class="card-body">
    <p>Card content goes here</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary btn-block">Action</button>
  </div>
</div>
```

## Sizes
```html
<div class="card card-sm">...</div>   <!-- 180px -->
<div class="card card-md">...</div>   <!-- 280px -->
<div class="card card-lg">...</div>   <!-- 400px -->
```

## Variants
```html
<!-- Highlighted -->
<div class="card highlight">...</div>

<!-- Icon header -->
<div class="card">
  <div class="card-icon-header">
    <span class="icon icon-star"></span>
  </div>
  <div class="card-body">...</div>
</div>

<!-- With image -->
<div class="card">
  <img src="image.jpg" alt="" class="card-image">
  <div class="card-header">
    <h3 class="card-title">Card with Image</h3>
  </div>
  <div class="card-body">...</div>
</div>
```

## Layouts
```html
<!-- Grid -->
<div class="grid-cards">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Horizontal list -->
<div class="list-cards">
  <div class="card card-sm">...</div>
  <div class="card card-sm">...</div>
</div>
```

## Collapsable Card
```html
<details class="card-collapsable">
  <summary class="card-header">
    <h3 class="card-title">Collapsable Card</h3>
    <button class="btn collapse-btn"></button>
  </summary>
  <div class="card-body">
    Hidden content
  </div>
</details>
```
