stack docs

Stack

A content container that defines spacing between elements vertically.

Published Last updated: 2.28.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-stack/stack.twig" with {
  content: "This is one stack."
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-stack> tag.

object
spacing

Control the spacing in between items.

string medium
  • xlarge , large , medium , small , xsmall , none
content

Content of the stack.

string , array , object
Advanced Schema Options
no_shadow

Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean
no-shadow

Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean
Install Install
  npm install @bolt/components-stack
Dependencies @bolt/core-v3.x @bolt/lazy-queue

stack

This is one stack. A stack spans the full width of its parent container. This is another stack.

stack spacing variations

Multiple stacks with xlarge spacing

This stack has xlarge spacing.
This stack has xlarge spacing.
This stack has xlarge spacing.

Multiple stacks with large spacing

This stack has large spacing.
This stack has large spacing.
This stack has large spacing.

Multiple stacks with medium spacing

This stack has medium spacing.
This stack has medium spacing.
This stack has medium spacing.

Multiple stacks with small spacing

This stack has small spacing.
This stack has small spacing.
This stack has small spacing.

Multiple stacks with xsmall spacing

This stack has xsmall spacing.
This stack has xsmall spacing.
This stack has xsmall spacing.

Multiple stacks with none spacing

This stack has none spacing.
This stack has none spacing.
This stack has none spacing.