<a id="card"></a>

## Card  
**Category**: Data Display
Flexible container for content grouping
### Examples

#### Basic Card  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### No Image Card  
```python
Div(
    Div(
        H2('Card title!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Badge Card  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2(
            'Shoes!',
            Div('NEW', cls='badge badge-secondary'),
            cls='card-title'
        ),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Div('Fashion', cls='badge badge-outline'),
            Div('Products', cls='badge badge-outline'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Bottom Image  
```python
Div(
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        cls='card-body'
    ),
    Figure(
        Img(src='...', alt='Shoes')
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Side Image  
```python
Div(
    Figure(
        Img(src='...', alt='Movie')
    ),
    Div(
        H2('New movie is released!', cls='card-title'),
        P('Click the button to watch on Jetflix app.'),
        Div(
            Button('Watch', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card card-side bg-base-100 shadow-xl'
)
```

#### Image Overlay  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 image-full w-96 shadow-xl'
)
```

#### Centered Content  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes', cls='rounded-xl'),
        cls='px-10 pt-10'
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions'
        ),
        cls='card-body items-center text-center'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Compact Card  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card card-compact bg-base-100 w-96 shadow-xl'
)
```

#### Top Action  
```python
Div(
    Div(
        Div(
            Button(
                Icon.x(),
                cls='btn btn-square btn-sm'
            ),
            cls='card-actions justify-end'
        ),
        P('We are using cookies for no reason.'),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Responsive Layout  
```python
Div(
    Figure(
        Img(src='...', alt='Album')
    ),
    Div(
        H2('New album is released!', cls='card-title'),
        P('Click the button to listen on Spotiwhy app.'),
        Div(
            Button('Listen', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card lg:card-side bg-base-100 shadow-xl'
)
```

#### Glass Effect  
```python
Div(
    Figure(
        Img(src='...', alt='car!')
    ),
    Div(
        H2('Life hack', cls='card-title'),
        P('How to park your car at your garage?'),
        Div(
            Button('Learn now!', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card glass w-96'
)
```

#### Custom Color  
```python
Div(
    Div(
        H2('Card title!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-primary text-primary-content w-96'
)
```

#### Neutral Theme  
```python
Div(
    Div(
        H2('Cookies!', cls='card-title'),
        P('We are using cookies for no reason.'),
        Div(
            Button('Accept', cls='btn btn-primary'),
            Button('Deny', cls='btn btn-ghost'),
            cls='card-actions justify-end'
        ),
        cls='card-body items-center text-center'
    ),
    cls='card bg-neutral text-neutral-content w-96'
)
```