Design System

Stack

<Stack space="large">
    <Placeholder height={40} />
    <Placeholder height={40} />
    <Placeholder height={40} />
</Stack>

Real-world example

Stack is used throughout the site, such as this article header.

14th June 2025

Building a Design System With Astro

An exploration of type-safe, zero-runtime component architecture using Vanilla Extract and Astro.

Astro·Design Systems·CSS
<Stack space="x-small">
    <Text element="p" size="small" tone="neutral" weight="semibold">14th June 2025</Text>
    <Heading level="2">Building a Design System With Astro</Heading>
    <Text element="p" tone="neutral">
        An exploration of type-safe, zero-runtime component architecture using Vanilla Extract and Astro.
    </Text>
    <Inline space="x-small">
        {tags.map((tag, index, allTags) => (
            <TextLink href={`/tags/#${tag}`} tone="neutral" underline="hover" size="small" weight="semibold">{tag}</TextLink>
            <Text element="span" tone="neutral" size="small" weight="semibold">{index !== allTags.length - 1 ? '·' : ''}</Text>
        ))}
    </Inline>
</Stack>

Horizontal alignment

The "align" prop controls how children are aligned on the horizontal axis.

<Stack
    space="small"
    align="center">
    <Placeholder
        height={60}
        width={200}
    />
    <Placeholder
        height={60}
        width={120}
    />
    <Placeholder
        height={60}
        width={80}
    />
</Stack>

Responsive values

The "space" and "align" props accept responsive objects. Resize the window to see the effect.

<Stack
    space={{ mobile: 'small', tablet: 'large' }}
    align={{ mobile: 'center', tablet: 'left' }}>
    <Placeholder
        height={60}
        width={200}
        tone="info"
    />
    <Placeholder
        height={60}
        width={120}
        tone="info"
    />
    <Placeholder
        height={60}
        width={80}
        tone="info"
    />
</Stack>