.column
Columns are a simplified block element that use adjusters to specify width, such as: one, two, three, four, and through twelve. A column and adjuster can be applied directly to fields, filter or panels that hold multiple fields, cards, etc.
Note: Buttons do not react well to the column rule and should be placed inside a panel. The panel would then get the column rule applied to it.
Column Adjusters
| Adjuster | Description |
|---|---|
| .one | Width is 8.333333333333333% |
| .two | Width is 16.66666666666667 |
| .three | Width is 25% |
| .four | Width is 33.33333333333334% |
| .five | Width is 41.66666666666668% |
| .six | Width is 50% |
| .seven | Width is 58.33333333333335% |
| .eight | Width is 66.66666666666668% |
| .nine | Width is 75% |
| .ten | Width is 83.33333333333335% |
| .eleven | Width is 91.66666666666669% |
| .twelve | Width is 100% |
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 |