Design System

Spread

Label

Status
<Spread
    space="moderate"
    alignY="center">
    <Text
        element="p"
        weight="medium">
        Label
    </Text>
    <Badge tone="positive">Status</Badge>
</Spread>

Horizontal layout

TODO

Vertical layout

Fills the full height of the container, placing the first child at the top and the last at the bottom.

Three children

With three children the middle item sits between the two ends.

Responsive values

The "space" prop accepts responsive objects. Resize the window to see the effect.

<Spread
    space={{ mobile: 'small', tablet: 'large' }}
    alignY="center">
    <Placeholder
        height={60}
        width={120}
        tone="promote"
    />
    <Placeholder
        height={60}
        width={120}
        tone="promote"
    />
</Spread>