Page structure
Four components build the layout of a page, one inside the other:
| Component | What it does |
|---|---|
| Section | A band of the page. It can have a background that goes from edge to edge |
| Container | Limits the width and centers the content |
| Row | A flex row |
| Col | A column of the row, sized in twelfths |
General
Section, Container, Row and Col, with a Display and Cards as the content.
Rules that keep it working
- • Put the
Containerinside theSection, not the other way. The band goes from edge to edge and the content stays narrow. - • The spans in a
Rowshould add up to 12 or less. ARowdoes not wrap, so more than 12 makes the columns narrower. - • Use a new
Rowfor each line. If you need items that wrap to the next line by themselves, use Grid. - •
Colneeds aRowaround it. The space set bygapon theRowis what the columns use.