Stack

A horizontal and vertical flow component used to create space between components.

Status
beta
Version
0.1.27
Sources
Install
yarn add @twilio-paste/stack — or — yarn add @twilio-paste/core

Guidelines#

About Stack#

Stack is a horizontal and vertical flow component used to create space between components. It allows you to easily stack elements together with defined spacing between them. It can be set up either vertically or horizontally, and uses tokens for spacing.

Accessibility#

By default, Stack has no accessibility concerns. While using Stack, it is up to you to manage the resulting accessibility implications. You may want to consider how the stack affects readability due to ordering, and the visual or content hierarchy of your page.

Examples#

Vertical Stack#

Elements within the stack are placed vertically with bottom spacing. This is achieved by setting orientation="vertical". A spacing property is provided to let you to create space between each stacked element. spacing will take any Spacing Token as its value.

What's new at Twilio

Check out our newest product releases on the Twilio Changelog.

Twilio Docs

Dig into our API reference documentation and quickstarts. You're covered with everything from SDKs in your favorite languages to sample apps for web, iOS, and Android.

Horizontal Stack#

Elements within the stack are placed horizontally with right spacing. This is achieved by setting orientation="horizontal". A spacing property is provided to let you to create space between each stacked element. spacing will take any Spacing Token as its value.

Responsive Stack#

orientation is a responsive props. You can provide it an array of orientation values to change the orientation based on the screen sizes supported by your theme.

1. Create a bot

2. Copy messaging URL


Usage Guide#

API#

Installation#

yarn add @twilio-paste/stack

Usage#

import {Stack} from '@twilio-paste/stack';
<Stack orientation="vertical" spacing="space40">
Foo
</Stack>;

Props#

PropTypeDescriptionDefault
orientationResponsiveValue<'horizontal', 'vertical'>null
spacingSpacingnull

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.