Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
| Class name | Description | Example |
|---|---|---|
| ma-{number} | Set all margins | ma-5 |
| my-{number} | Set top and bottom margins | my-5 |
| mx-{number} | Set right and left margins | my-5 |
| ml-{number} | Set left margin | ml-5 |
| mr-{number} | Set right margin | mr-5 |
| mt-{number} | Set top margin | mt-5 |
| mb-{number} | Set bottom margin | mb-5 |
| ml-n-{number} | Set negative left margin (margin-left: -5px) | ml-n-5 |
| mr-n-{number} | Set negative right margin (margin-right: -5px) | mr-n-5 |
| mt-n-{number} | Set negative top margin (margin-top: -5px) | mt-n-5 |
| mb-n-{number} | Set negative bottom margin (margin-bottom: -5px) | mb-n-5 |
| Class name | Description | Example |
|---|---|---|
| pa-{number} | Set all paddings | pa-5 |
| py-{number} | Set top and bottom paddings | py-5 |
| px-{number} | Set right and left paddings | px-5 |
| pl-{number} | Set left padding | pl-5 |
| pr-{number} | Set right padding | pr-5 |
| pt-{number} | Set top padding | pt-5 |
| pb-{number} | Set bottom padding | pb-5 |
| Class name | Description |
|---|---|
| fz-5 | Set font-size: 0.5rem |
| fz-6 | Set font-size: 0.6rem |
| fz-7 | Set font-size: 0.7rem |
| fz-8 | Set font-size: 0.8rem |
| fz-9 | Set font-size: 0.9rem |
| fz-10 | Set font-size: 1rem |
| fz-11 | Set font-size: 1.1rem |
| fz-12 | Set font-size: 1.2rem |
| fz-13 | Set font-size: 1.3rem |
| fz-14 | Set font-size: 1.4rem |
| fz-15 | Set font-size: 1.5rem |
| fz-16 | Set font-size: 1.6rem |
| fz-17 | Set font-size: 1.7rem |
| fz-18 | Set font-size: 1.8rem |
| fz-19 | Set font-size: 1.9rem |
| fz-20 | Set font-size: 2rem |
| fw-normal | Set font-weight: normal |
| fw-bold | Set font-weight: 600 |
| fw-thin | Set font-weight: thin |
| Class name | Description |
|---|---|
| row | Set display flex |
| row-inline | Set display inline-flex |
| column | Set flex-direction to column (has effect with row class) |
| wrap | Set flex-wrap (has effect with row class) |
| col | Set flex-grow: 1 (has effect in parent element with row class) |
| align-center | Align items on center (has effect in parent element with row class) |
| align-top | Align items on top (has effect in parent element with row class) |
| align-bottom | Align items on bottom (has effect in parent element with row class) |
| space-between | Justify content with spacing between elements (has effect in parent element with row class) |
| space-around | Justify content with spacing around elements (has effect in parent element with row class) |
| justify-center | Justify content on center (has effect in parent element with row class) |
| justify-start | Justify content on start (has effect in parent element with row class) |
| justify-end | Justify content on end (has effect in parent element with row class) |
| Class name | Description |
|---|---|
| text-{color} | Set {color} to text |
| bg-{color} | Set {color} to background |