Stack

#

Usage

<x-stack>
    <x-card>...</x-card>
    <x-alert>...</x-alert>
    <x-card>...</x-card>
</x-stack>

#

Reversing the stacking order

Components within a stack overlap based on the DOM order. By default, the second element overlaps the first, the third overlaps the second, and so on.

<x-stack>
    <x-alert style="success">First child in DOM</x-alert>
    <x-alert style="info">Second child in DOM</x-alert>
    <x-alert style="danger">Third child in DOM</x-alert>
</x-stack>

To visually reverse this, where each element is overlapped by the previous one, add the reverse attribute.

<x-stack reverse>
    <x-alert style="success">First child in DOM</x-alert>
    <x-alert style="info">Second child in DOM</x-alert>
    <x-alert style="danger">Third child in DOM</x-alert>
</x-stack>

#

Supported components

The x-stack component is intended to be used with the x-card and x-alert components, but it's not limited to just those components.

When elements are added to the x-stack component, overlap is automatically accounted for by adding a spacer element using the ::before and ::after pseudo elements. Depending on the element, this might conflict with existing flexbox styling. To resolve this, wrap the element and move the flexbox styling one layer deeper.

#

Component API