When to use Stack

[alisontanu]

Hi team,

I have the following card component:

It's currently built like this:

<Stack orientation="vertical" spacing="space60">
    <Stack orientation="vertical" spacing="space20">
        <Stack orientation="horizontal" spacing="space30">
            <Text as="p">
                <Anchor href={`/code-exchange/${slug}`}>{title}</Anchor>
            </Text>
            <ArrowForwardIcon/>
        </Stack>
        <Text as="p">
            {intro}
        </Text>
    </Stack>
    <Separator orientation="horizontal" />
    <Stack orientation="vertical" spacing="space50">
        <Pill name="Quick Deploy App" />
        {tags}
    </Stack>
</Stack>

The spacings are slightly different so there are many nested Stacks. Is this a good usage of Stacks, and if not, how can I make this better? Would it be better to use Flex or Box when there are only 2 elements per stack?

[TheSisb]

Hi @alisontanu,

Good question! You can replace a few of these Stacks with a Box marginBottom="space30" if you know you're spacing only two items apart. Stack becomes more useful for 3 or more. Reading a Box in the JSX is more straightforward than a Stack because a stack sets up the expectation that "several things nested in here are spaced apart" while a Box is just mindful of itself.
You can also consider using Paragraph instead of Text as="p". Hope this helps!

[TheSisb]

Here's a version without any Stacks: https://codesandbox.io/s/confident-chandrasekhar-10kfvd?file=/src/index.tsx