Stack

<ahi-stack> | AhiStack

deprecated

Stack manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.

This component has been deprecated. Use ahi-column for a vertical stack or ahi-row for a horizontal one, with ahi-gap-* and the alignment classes. They ship inside every theme, so no extra stylesheet is needed.

This component is a pure slot passthrough with no behavior, so each instance costs a custom-element definition and a shadow root to apply flexbox the platform applies for free. It still works and is not being removed; removal will be considered at the next major.

Stack item
with multiple
rows of text

Stack item

<ahi-stack class="stack-vertical">
  <div>Stack item <br />with multiple <br />rows of text</div>
  <div>Stack item</div>
  <div>Stack item</div>
  <div>Stack item</div>
</ahi-stack>

<style>
  .stack-vertical div {
    background: var(--ahi-surface-neutral);
    padding: var(--ahi-space-6);
  }
</style>

Examples

Using responsive media query

Stack item
with multiple
rows of text

Stack item

<div class="container">
  <ahi-stack class="stack-responsive" direction="horizontal">
    <div>Stack item <br />with multiple <br />rows of text</div>
    <div>Stack item</div>
    <div>Stack item</div>
    <div>Stack item</div>
  </ahi-stack>
</div>

<style>
  .container {
    container-type: inline-size;
  }

  .stack-responsive div {
    background: var(--ahi-surface-neutral);
    padding: var(--ahi-space-6);
    box-sizing: border-box;
    width: 100%;
  }

  /* We're using a container query (@container) here since this snippet is wrapped in an element smaller than the
  screen. But in a normal app context, you could just as easily use @media instead. */
  @container (max-width: 400px) {
    .stack-responsive {
      flex-direction: column;
    }
  }
</style>

Best practices

Stacks should be used when:

You need to stack multiple components vertically or horizontally.
You want to adjust the white space between two or more components.

Stacks should not be used:

For building grid based layouts.

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/stack/stack.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/stack/stack.js';

Slots

Name	Description
(default)	The stack’s content.

Learn more about using slots.

Properties

Name	Description	Type	Default
`gap`	The space injected between components.	`'none' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl'`	`'m'`
`direction`	The direction of the stack.	`'vertical' \| 'horizontal'`	`'vertical'`
`alignItems` `align-items`	How to align the child items inside the stack.	`'center' \| 'start' \| 'end' \| 'stretch' \| undefined`	`'stretch'`
`wrap`	Defines whether the Stack items are forced in a single line or can be flowed into multiple lines.	`boolean`	`false`
`justifyContent` `justify-content`	How to justify the child items inside the stack.	`'center' \| 'start' \| 'end' \| 'baseline' \| 'space-between' \| 'space-around' \| 'space-evenly' \| undefined`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Custom Properties

Name	Description	Default
`--stack-gap`	Controls the spacing between items.	var(–ahi-space-4)

Learn more about customizing CSS custom properties.