# 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
Do you want to align the header to tiny, small or medium 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}
```
## Example
```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 will have 4 albums or 3 activities side-by-side. On a typical mobile screen, you will have 1 medium card or 2 small ones in a row.
- The remaining space is evenly distributed.
- Title rows align with the content below them.
Resize the window to observe how the items move.