```ts
import Section from "~/components/ui/Section.vue";
```
# Layout section
Sections divide the page vertically. Choose an appropriate heading level for each section: `h1` or `h2` or `h3`.
```vue-html
```
### Align the section to the page
```vue-html
```
### Make the section header align with the section contents
The section aligns its title and items to a grid, following the designs. To make sure the header of a section exactly aligns with its contents, set the item width:
Do you want to align the header to
- `no-items` (mixed content),
- `tiny-items` (each item is one column wide),
- `small-items` (each item is two columns wide, e.g. default cards),
- `medium-items` (each item is three columns wide, such as Activities or medium cards)?
If all items stretch all columns (`style=grid-column: 1 / -1`), use `no-items`.
```vue-html
```
### Provide an action
The link or button will be shown on the right side of the header.
```vue-html
```
You can add props to the Link or Button, for example to make them `primary` or add an icon:
```vue-html{1}
```
## Set gaps between consecutive sections
Place consecutive sections into a [Layout stack](../layout) with a 64px gap (`gap-64`) to give them a regular vertical rhythm. Use different sizes for very small or very large headings.
Note the spacer above the layout. By default, sections begin at the baseline of the heading. This enables us to explicitly define the vertical rhythm, independently of the heading's line height.
```vue-html
```
## Mix sections of different item widths
```vue-html
Artist Name
Artist Name
Artist Name
```
---
Artist Name
Artist Name
Artist Name
## Responsivity
- Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For `Card`, it is `3` and for `Activity`, it is `4`.
- On a typical laptop screen, you may have 4 album cards or 3 activities side-by-side. On a typical mobile screen, you will have one medium card or two small ones in a row.
- The remaining space is evenly distributed.
- Title rows align with the content below them. The action on the right will always end with the last item in the grid. Resize the window to observe how the items move.