Variant
Use Tailwind CSS to assign variant (e.g. border-color, background-color, text-color).
Interactive
Use Tailwind CSS to assign animation (e.g. translate, transition-property, transition-duration, transition-timing-function).
Size
Use Tailwind CSS to assign size (e.g. padding, font-size).
Content
Card content stack vertically.
Group
Use component utility .xt-card-group to stack card content horizontally.
| Syntax | Mixin | Variants | Description | |
|---|---|---|---|---|
| Utility | .xt-card-group | xt-card-group | responsive | Card stack horizontal wrapper |
Use .flex-auto and flex-direction to expand height.
Separator
Use Tailwind CSS to style borders for separation.
Overflow
Use Tailwind CSS to overflow divs. Use component classes to style overflow.
| Syntax | Mixin | Description | |
|---|---|---|---|
| Component | .xt-overflow-main | xt-overflow-main | Overflow scrollbar style |
| Component | .xt-overflow-sub | xt-overflow-sub | Overflow scrollbar style small version |
List
You can use list component to space card's internal content.
Close button
Use Tailwind CSS to assign size (e.g. padding, font-size).
Checks
Refer to form checks custom.