.header
The header rule gets declared specifically because it is handled differently in the responsive media queries. In future updates this class will be used as a reference point for JavaScript to add and manipulate the header and it’s elements automatically. It is one of only two rules that align items in a row vs. aligning them in a column. It will by default be 100% the width of the screen and at least 64px in height, however the height will adjust depending on what you put inside of it.
Compatible Child Blocks
- .column: for a more rigidly structured header, columns offer the ability to define exact sizing and alignment. Using adjusters, you can size your columns to any width under 12 and choose how to align and justify them.
- .card: A card will grow to accommodate the size of its child objects. In most cases, the child object’s size will need to be specified in pixels to adjust the cards size.
Compatible Adjusters
| Adjuster | Target | Description |
|---|---|---|
| .align-stretch | Children | Will cause all children to expand to the full height of the block |
| .align-end | Children | Aligns children to the vertical end of the block |
| .align-center | Children | Aligns children to the vertical center of the block |
| .align-baseline | Children | Aligns children to the vertical baseline |
| .justify-stretch | Children | Will cause all children to expand and use the remaining free space in the width of the block |
| .justify-end | Children | Aligns children to the vertical end of the block in order |
| .justify-center | Children | Aligns children to the vertical center of the block in order |
| .justify-baseline | Children | Aligns children to the vertical baseline in order |
| .gap-none | Children | Removes the gap between child items |
| .gap-small | Children | Creates a small gap between child elements |
| .gap-medium | Children | Creates a medium gap between child elements |
| .gap-large | Children | Creates a large gap between child elements |
| .pad-none | Self | Removes all padding from itself |
| .pad-small | Self | Add a small padding around the inside border of itself |
| .pad-medium | Self | Add a medium padding around the inside border of itself |
| .pad-large | Self | Add a large padding around the inside border of itself |