View on Git

Stack

Use Grid to build multiple column layouts. This Grid works on twelve column system, and it contains variants of 12, 6, 4, 3, 2, and 1 column for each breakpoint. And additionally one centered narrow column.

Examples

examples

<Stack>
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
</Stack>

{% embed "@seduo-design-system/stack.twig" %}
    {% block content %}
        <div>Block 1</div>
        <div>Block 2</div>
        <div>Block 3</div>
    {% endblock %}
{% endembed %}

<Stack>
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
</Stack>

Custom Spacing

You can use the spacing prop to apply custom spacing between items. The prop accepts either a spacing token (eg. space-100) or an object with breakpoint keys and spacing token values.

examples

import { Stack } from '@seduo/design-system';
...
<Stack spacing="space-1200">
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
</Stack>

<Stack spacing={{ mobile: 'space-400', tablet: 'space-800' }}>
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
</Stack>

<Stack spacing="space-1200">
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
</Stack>

<Stack spacing="{{ { mobile: 'space-400', tablet: 'space-800' } }}">
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
</Stack>

API

Prop name	Type	Default	Required	Description
`elementType`	`string`	`div`	no	Element type of the wrapper element
`hasEndDivider`	`bool`	`false`	no	Render a divider after the last item
`hasIntermediateDividers`	`bool`	`false`	no	Render dividers between items
`hasSpacing`	`bool`	`true`	no	Apply a spacing between items
`spacing`	[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`]	-	no	Custom spacing between items, see Custom Spacing
`hasStartDivider`	`bool`	`false`	no	Render a divider before the first item
`UNSAFE_className`	`string`	-	no	Wrapper custom classname
`UNSAFE_style`	`CSSProperties`	-	no	Wrapper custom style

On this page