Stack

Use hds-stack to arrange elements in the block direction with even spacing.

Stack is a set of layout utility classes to help you organize content that can adapt to any device or screen size.

<div class="hds-stack">
  <div></div>
  <div></div>
  <div></div>
</div>

Examples

Stacks are well suited for card blocks, text blocks, and ensuring consistent spacing between elements in the document flow.

<div class="hds-stack">
  <sl-card class="card-basic">
    This is just a basic card. No image, no header, and no footer. Just your content.
  </sl-card>
  <sl-card class="card-basic">
    This is just a basic card. No image, no header, and no footer. Just your content.
  </sl-card>
  <sl-card class="card-basic">
    This is just a basic card. No image, no header, and no footer. Just your content.
  </sl-card>
</div>

Align Items

By default, items stretch to fill the inline size of the hds-stack container. You can add any of the following hds-align-items-* classes to an element with hds-stack to specify how items are aligned in the inline direction:

• hds-align-items-start
• hds-align-items-end
• hds-align-items-center
• hds-align-items-stretch
• hds-align-items-baseline

<div class="hds-grid">
  <div class="hds-stack hds-align-items-start">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
  <div class="hds-stack hds-align-items-center">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
  <div class="hds-stack hds-align-items-end">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
</div>

Gap

By default, the gap between stack items uses --hds-space-m from your theme. You can add any of the following hds-gap-* classes to an element with hds-stack to specify the gap between items:

• hds-gap-0
• hds-gap-xs
• hds-gap-sm
• hds-gap-base
• hds-gap-lg
• hds-gap-xl

<div class="hds-grid">
  <div class="hds-stack hds-gap-xs">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="hds-stack hds-gap-xl">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Form elements

Form inputs should use the Form control group component as a container for forms, this brings other elements that help input components.