| Class name | Type | |
|---|---|---|
| indicator | Component | Container element |
| indicator-item | Component | will be placed on the corner of sibiling |
| indicator-start | Utility | align horizontally to the left |
| indicator-center | Utility | align horizontally to the center |
| indicator-end | Utility | align horizontally to the right (default) |
| indicator-top | Utility | align vertically to top (default) |
| indicator-middle | Utility | align vertically to middle |
| indicator-bottom | Utility | align vertically to bottom |
Examples
an empty badge as indicator
Preview
HTML
content
a badge as indicator
Preview
HTML
new
content
a badge as indicator for button
Preview
HTML
99+
a badge as indicator for image (canter and middle)
Preview
HTML
Text Here
a badge as indicator for avatar
Preview
HTML
typing…
a button as indicator for card
Preview
HTML
Job Title
Rerum reiciendis beatae tenetur excepturi
a badge as indicator for input
Preview
HTML
Available
indicator indicator-start
Preview
HTML
content
indicator indicator-center
Preview
HTML
content
indicator [indicator-end is default]
Preview
HTML
content
indicator indicator-middle indicator-start
Preview
HTML
content
indicator indicator-middle indicator-center
Preview
HTML
content
indicator indicator-middle [indicator-end is default]
Preview
HTML
content
indicator indicator-bottom indicator-start
Preview
HTML
content
indicator indicator-bottom indicator-center
Preview
HTML
content
indicator indicator-bottom [indicator-end is default]
Preview
HTML
content
multiple indicators
Preview
HTML
1
2
3
4
5
6
7
8
9
content