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.
Radius can be used to separate different content from each other. Etc.
Root's has 5 radius variables.
| Size | Variable | Value |
|---|---|---|
| none | --ab-border-radius-none | 0px |
| 100 | --ab-border-radius-100 | 2px |
| 200 | --ab-border-radius-100 | 4px |
| 300 | --ab-border-radius-300 | 8px |
| 400 | --ab-border-radius-400 | 16px |
The border variables can be applied to the border property like this:
To make a border-radius around anything you can use the ab-container utility component.
It allows you to apply border-radius by using certain modifiers.
| Class (CSS) | Attribute (Web Component) |
|---|---|
ab-container--radius-100 | radius="100" |
ab-container--radius-200 | radius="200" |
ab-container--radius-300 | radius="300" |
ab-container--radius-400 | radius="400" |