Style utilities
Padding
| Class | Property | Value |
|---|---|---|
.p-xxxsmall | padding | var(--size-xxxsmall) |
.p-xxsmall | padding | var(--size-xxsmall) |
.p-xsmall | padding | var(--size-xsmall) |
.p-small | padding | var(--size-small) |
.p-medium | padding | var(--size-medium) |
.p-large | padding | var(--size-large) |
.p-xlarge | padding | var(--size-xlarge) |
.p-xxlarge | padding | var(--size-xxlarge` |
.p-xxxlarge | padding | var(--size-xxxlarge) |
Margin
| Class | Property | Value |
|---|---|---|
.m-xxxsmall | margin | var(--size-xxxsmall) |
.m-xxsmall | margin | var(--size-xxsmall) |
.m-xsmall | margin | var(--size-xsmall) |
.m-small | margin | var(--size-small) |
.m-medium | margin | var(--size-medium` |
.m-large | margin | var(--size-large) |
.m-xlarge | margin | var(--size-xlarge) |
.m-xxlarge | margin | var(--size-xxlarge) |
.m-xxxlarge | margin | var(--size-xxxlarge) |
Top, right, bottom and left margin
To specify an explicit top, right, bottom or left margin, append a t, r, b or l to
the .m class.
For example, .mb-xsmall will apply a var(--size-xsmall) bottom margin. The respective remaining sizes are shown in the table above.
Layout
| Class | Property | Value |
|---|---|---|
.hidden | display | none |
.inline | display | inline |
.block | display | block |
.inline-block | display | inline-block |
.flex | display | flex |
.inline-flex | display | inline-flex |
Flex
| Class | Property | Value |
|---|---|---|
| Direction | ||
.row | flex-direction | row |
.row-reverse | flex-direction | row-reverse |
.column | flex-direction | column |
.column-reverse | flex-direction | column-reverse |
| Wrap | ||
.flex-wrap | flex-wrap | wrap |
.flex-wrap-reverse | flex-wrap | wrap-reverse |
.flex-no-wrap | flex-wrap | nowrap |
| Shrink | ||
.flex-shrink | flex-shrink | 1 |
.flex-no-shrink | flex-shrink | 0 |
| Grow | ||
.flex-grow | flex-grow | 1 |
.flex-no-wrap | flex-grow | 0 |
| Justify | ||
.justify-content-start | justify-content | flex-start |
.justify-content-end | justify-content | flex-end |
.justify-content-center | justify-content | center |
.justify-content-between | justify-content | space-between |
.justify-content-around | justify-content | space-around |
| Align | ||
.align-items-start | align-items | flex-start |
.align-items-end | align-items | flex-end |
.align-items-center | align-items | center |
.align-items-stretch | align-items | stretch |
.align-content-start | align-content | flex-start |
.align-content-end | align-content | flex-end |
.align-content-center | align-content | center |
.align-content-stretch | align-content | stretch |
.align-self-start | align-self | flex-start |
.align-self-end | align-self | flex-end |
.align-self-center | align-self | center |
.align-self-stretch | align-self | stretch |