Stack

Depth effect through layered elements

You can use w-* and h-* classes to set the width and height of the stack, making all items the same size.

Basic

Basic Div Stack

Preview Code Auto

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 Images

Preview Code Auto

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

Preview Code Auto

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'
)

Variants

Stacked Cards-top

Preview Code Auto

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

Preview Code Auto

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 Cards-end

Preview Code Auto

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

Preview Code Auto

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

Preview Code Auto

Notification 1

You have 3 unread messages. Tap here to see.

Notification 2

You have 3 unread messages. Tap here to see.

Notification 3

You have 3 unread messages. Tap here to see.

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'
)

Class Reference

Class	Type	Description
stack	Component	Base stacking container
stack-top	Modifier	Aligns the children elements to the top
stack-bottom	Modifier	Aligns the children elements to the bottom [Default]
stack-start	Modifier	Aligns the children elements to the start (horizontally)
stack-end	Modifier	Aligns the children elements to the end (horizontally)

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo