Usage
Stack
Stack is a component that allows you to compose elements vertically.
đ Vertical margin of items inside Stack is reset to zero to ensure proper spacing between items. Read more about spacing in the Variants section.
Basic Usage
Usage with form fields:
<div class="Stack Stack--spacing">
<div>
<label for="textfield-stack-1" class="Label Label--required">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<input type="text" id="textfield-stack-1" placeholder="Placeholder" />
</div>
</div>
<div>
<label for="textfield-stack-2" class="Label Label--required">Label</label>
<div class="InputContainer InputContainer--fill InputContainer--medium">
<input type="text" id="textfield-stack-2" placeholder="Placeholder" />
</div>
</div>
</div>Usage with a list:
<ul class="Stack">
<li>
<div>Block 1</div>
</li>
<li>
<div>Block 2</div>
</li>
<li>
<div>Block 3</div>
</li>
</ul>Variants
â Stack--spacing with dividers uses the CSS padding property to be able to create dividers using the border property. It is recommended to wrap the direct descendants of the Stack component to the proper HTML element. Otherwise, the applied spacing via vertical padding could break the visual view of the children's items.
Stack--spacing without dividers uses the CSS gap property.
Spacing Between Items
đ The vertical spacing between items is applied via Stack--spacing. The size corresponds with the value of the design token $space-600. In case you need another spacing, please use utility classes or add custom-defined styles to the direct descendants. Keep in mind, that spacing is applied by the gap property or by padding property in case of dividers.
Usage with spacing:
<ul class="Stack Stack--spacing">
<li>
<div>Block 1</div>
</li>
<li>
<div>Block 2</div>
</li>
<li>
<div>Block 3</div>
</li>
</ul>Dividers Between Items
đ When using dividers, it is required to wrap the item's content with the StackItem class.
Usage with middle dividers:
<ul class="Stack Stack--intermediateDividers">
<li class="StackItem">
<div>Block 1</div>
</li>
<li class="StackItem">
<div>Block 2</div>
</li>
<li class="StackItem">
<div>Block 3</div>
</li>
</ul>Usage with inner and outer dividers:
<ul class="Stack Stack--intermediateDividers Stack--startDivider Stack--endDivider">
<li class="StackItem">
<div>Block 1</div>
</li>
<li class="StackItem">
<div>Block 2</div>
</li>
<li class="StackItem">
<div>Block 3</div>
</li>
</ul>Advanced Usage
Usage with combination of spacing and dividers:
<ul class="Stack Stack--spacing Stack--intermediateDividers Stack--startDivider Stack--endDivider">
<li class="StackItem">
<div>Block 1</div>
</li>
<li class="StackItem">
<div>Block 2</div>
</li>
<li class="StackItem">
<div>Block 3</div>
</li>
</ul>Custom Spacing
Use CSS custom properties to define custom spacing between items in Stack--spacing. Set the --stack-spacing property to one of spacing token values defined on the :root element, e.g. --stack-spacing: var(--spirit-space-800). This will set the spacing to var(--spirit-space-800) for all breakpoints.
<ul class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-1200)">
<li>
<div>Block 1</div>
</li>
<li>
<div>Block 2</div>
</li>
<li>
<div>Block 3</div>
</li>
</ul>âšī¸ We highly discourage you from using absolute values like --stack-spacing: 1rem. It will work, but you will lose the consistency between the spacing and the design tokens.
If you need to set custom spacing from a specific breakpoint, use the --stack-spacing-{breakpoint} property, e.g. --stack-spacing-tablet: var(--spirit-space-800). The breakpoint value must be one of the breakpoint tokens except for the mobile breakpoint you don't need the suffix at all. The spacing is set to all larger breakpoints automatically if you don't set them explicitly. E.g. if you set only --stack-spacing-tablet: var(--spirit-space-800) the spacing will be set to var(--spirit-space-800) for tablet and desktop breakpoints while on the mobile breakpoint the default spacing will be used.
Custom spacing from tablet up:
<ul class="Stack Stack--spacing" style="--stack-spacing-tablet: var(--spirit-space-1200)">
<li>
<div>Block 1</div>
</li>
<li>
<div>Block 2</div>
</li>
<li>
<div>Block 3</div>
</li>
</ul>Custom spacing for each breakpoint:
<ul
class="Stack Stack--spacing"
style="--stack-spacing: var(--spirit-space-800); --stack-spacing-tablet: var(--spirit-space-1000); --stack-spacing-desktop: var(--spirit-space-1200)"
>
<li>
<div>Block 1</div>
</li>
<li>
<div>Block 2</div>
</li>
<li>
<div>Block 3</div>
</li>
</ul>Custom spacing works with dividers too.
<ul
class="Stack Stack--spacing Stack--intermediateDividers Stack--startDivider Stack--endDivider"
style="--stack-spacing: var(--spirit-space-800)"
>
<li class="StackItem">
<div>Block 1</div>
</li>
<li class="StackItem">
<div>Block 2</div>
</li>
<li class="StackItem">
<div>Block 3</div>
</li>
</ul>