<a id="stack"></a>

## Stack  
**Category**: Layout
Depth effect through layered elements
### Examples

#### Basic Div Stack  
```python
Div(
    Div('1', cls='bg-primary text-primary-content grid h-20 w-32 place-content-center rounded'),
    Div('2', cls='bg-accent text-accent-content grid h-20 w-32 place-content-center rounded'),
    Div('3', cls='bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded'),
    cls='stack h-20 w-32'
)
```

#### Stacked Cards-top  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack stack-top size-28'
)
```

#### Stacked Cards-start  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack stack-start size-28'
)
```

#### Stacked Images  
```python
Div(
    Img(src='https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp', cls='rounded'),
    Img(src='https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp', cls='rounded'),
    Img(src='https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp', cls='rounded'),
    cls='stack w-48'
)
```

#### Stacked Cards  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack size-28'
)
```

#### Stacked Cards-end  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack stack-end size-28'
)
```

#### Stacked Cards Shadow  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='card bg-base-200 w-36 text-center shadow-md'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='card bg-base-200 w-36 text-center shadow'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='card bg-base-200 w-36 text-center shadow-sm'
    ),
    cls='stack'
)
```

#### Stacked Notifications  
```python
Div(
    Div(
        Div(
            H2('Notification 1', cls='card-title'),
            P('You have 3 unread messages. Tap here to see.'),
            cls='card-body'
        ),
        cls='card bg-primary text-primary-content shadow-md'
    ),
    Div(
        Div(
            H2('Notification 2', cls='card-title'),
            P('You have 3 unread messages. Tap here to see.'),
            cls='card-body'
        ),
        cls='card bg-primary text-primary-content shadow'
    ),
    Div(
        Div(
            H2('Notification 3', cls='card-title'),
            P('You have 3 unread messages. Tap here to see.'),
            cls='card-body'
        ),
        cls='card bg-primary text-primary-content shadow-sm'
    ),
    cls='stack'
)
```