27 lines
828 B
Markdown
27 lines
828 B
Markdown
---
|
|
category: Layout
|
|
---
|
|
|
|
# Stack
|
|
|
|
Vertical rhythm between blocks. Nothing in this system carries its own margins, so two
|
|
headings placed next to each other sit flush; Stack is what separates them.
|
|
|
|
`gap` is a step on the space scale, 1 to 9. It is never a raw pixel value: hard-coded
|
|
spacing is a defect in this system, and this component is how you avoid one.
|
|
|
|
`align="start"` keeps children at their natural width, which is what a button or a link
|
|
wants. The default stretches them to the column.
|
|
|
|
```jsx
|
|
<Stack gap={6}>
|
|
<Heading>Four stages. One method.</Heading>
|
|
<Text measure>Threat analysis, engineering, verification and monitoring.</Text>
|
|
<Stack gap={4} align="start">
|
|
<Button href="/contact">Talk to us</Button>
|
|
</Stack>
|
|
</Stack>
|
|
```
|
|
|
|
Astro equivalent: `<div style="display: grid; gap: var(--space-6);">`.
|