Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationAtomsStack

Stack

A CSS flexbox component to help with the layout of elements on a page.

Basic Usage

import { Stack } from '@krakentech/coral';
 
<Stack>
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

Properties

alignContent

<Stack alignContent="space-between" flexWrap="wrap" fullHeight>
    <Card fullWidth>Card</Card>
    <Card fullWidth>Card</Card>
    <Card fullWidth>Card</Card>
</Stack>
Card
Card
Card

alignItems

<Stack alignItems="flex-end">
    <Typography>Typography</Typography>
    <Card>Card</Card>
    <Chip>Chip</Chip>
</Stack>

Typography

Card
Chip

flexDirection

<Stack flexDirection="column">
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

display

<Stack display="inline-flex">
    <Card>Group 1</Card>
    <Card>Group 1</Card>
    <Card>Group 1</Card>
</Stack>
<Stack>
    <Card>Group 2</Card>
    <Card>Group 2</Card>
    <Card>Group 2</Card>
</Stack>
<Stack display="inline-flex">
    <Card>Group 3</Card>
    <Card>Group 3</Card>
    <Card>Group 3</Card>
</Stack>
<Stack display="inline-flex">
    <Card>Group 4</Card>
    <Card>Group 4</Card>
    <Card>Group 4</Card>
</Stack>
Group 1
Group 1
Group 1
Group 2
Group 2
Group 2
Group 3
Group 3
Group 3
Group 4
Group 4
Group 4

flexWrap

<Stack flexWrap="wrap">
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
    <Card>Card</Card>
</Stack>
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card

fullHeight

<div style={{ height: 600 }}>
    <Stack flexDirection="column" fullHeight justifyContent="space-between">
        <Card>Card 1</Card>
        <Card>Card 2</Card>
        <Card>Card 3</Card>
    </Stack>
</div>
Card 1
Card 2
Card 3

fullWidth

<Stack fullWidth justifyContent="space-between">
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

gap

<Stack gap="xl">
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

rowGap

<Stack rowGap="xxl" flexDirection="column">
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

columnGap

<Stack columnGap="xxl">
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

justifyContent

<Stack fullWidth justifyContent="flex-end">
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

Responsiveness

This example will switch the direction and spacing of the cards starting at the medium breakpoint.

<Stack
    flexDirection={{ base: "column", md: "row" }}
    gap={{ md: "xxl" }}
>
    <Card>Card 1</Card>
    <Card>Card 2</Card>
    <Card>Card 3</Card>
</Stack>
Card 1
Card 2
Card 3

Full API

NameTypeDefault
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};
gapResponsiveVariant<keyof CoralSpacing>

Sets the gaps (gutters) between rows and columns

rowGapResponsiveVariant<keyof CoralSpacing>

Sets the gaps (gutters) between rows

columnGapResponsiveVariant<keyof CoralSpacing>

Sets the gaps (gutters) between columns

justifyContentResponsiveVariant<ConditionalValue<AnyString | JustifyContent | readonly string[] | undefined>>

The CSS justifyContent property to apply.

alignItemsResponsiveVariant<ConditionalValue<WithEscapeHatch<OnlyKnown<"alignItems", readonly string[] | `var(--${string})` | AlignItems | undefined>>> | undefined>

The CSS alignItems property to apply.

alignContentResponsiveVariant<ConditionalValue<WithEscapeHatch<OnlyKnown<"alignContent", readonly string[] | `var(--${string})` | AlignContent | undefined>>> | undefined>

The CSS alignContent property to apply.

placeItemsResponsiveVariant<ConditionalValue<AnyString | readonly string[] | PlaceItems | undefined>>

The CSS flexDirection property to apply.

flexDirectionConditionalValue<WithEscapeHatch<OnlyKnown<"flexDirection", `var(--${string})` | FlexDirection | readonly NonNullable<FlexDirection | undefined>[] | undefined>>> | undefined

The direction of the stack.

row
displayResponsiveVariant<"flex" | "inline-flex">

Should this flex container be block-level or inline-level?

flex
flexWrapConditionalValue<WithEscapeHatch<OnlyKnown<"flexWrap", `var(--${string})` | FlexWrap | readonly NonNullable<FlexWrap | undefined>[] | undefined>>> | undefined

The CSS flexWrap property to apply.

nowrap
flexShrinkConditionalValue<AnyString | FlexShrink | readonly NonNullable<FlexShrink | undefined>[] | undefined>

The CSS flexShrink property to apply.

1
fullHeightResponsiveVariant<boolean>

If true, the stack will take up the full height of its parent.

false
fullWidthResponsiveVariant<boolean>

If true, the stack will take up the full width of its parent.

false
component"symbol" | "object" | "base" | "clipPath" | "filter" | "mask" | "marker" | "center" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "bdi" | "bdo" | "big" | ... 154 more ... | ComponentType<...>

What HTML element should render

div
childrenReactNode
Last updated on
SliderStackItem