Windi CSS
General | Colors Typography SVG |
Accessibility | Screen Readers |
Animations | Animation Transforms Transitions |
Backgrounds | Background Gradients Background Blend Mode |
Behaviors | Box Decoration Break Image Rendering Listings Overflow Overscroll Behavior Placeholder |
Borders | Border Divider Outline Ring |
Effects | Box Shadow Opacity Mix Blend Mode |
Filters | Filter Backdrop Filter |
Interactivity | Accent Color Appearance Cursor Caret Pointer Events Resize Scroll Behavior Touch Action User Select Will Change |
Layout | Columns Container Display Flexbox Grid Positioning Sizing Spacing Tables |
Usage
Class attribute
Element Content
vue
<template>
<div class="un-bg-teal">
Element Content
</div>
</template>
Responsive Design
Element Content
vue
<template>
<div class="lt-lg:un-bg-teal lg:un-animate-bounce">
Element Content
</div>
</template>
Button Translate on Hover
vue
<template>
<b-button
color="primary"
size="md"
class="hover:-un-translate-y-0.5"
>
Large button
</b-button>
</template>
Card Translate on Hover
vue
<template>
<Card
class="hover:-un-translate-y-0.5"
>
<CardImg
src="/unsplash/image/480x220/dlxmedia-hu-U-W8FKeC6Mo-unsplash.jpg"
alt="Image Description"
ratio="16x9"
/>
<CardImgOverlay>
<CardBody>
<CardTitle text-color="dark">
Design Tools
</CardTitle>
<CardText text-color="dark">
Access to advanced design techniques
</CardText>
</CardBody>
<CardFooter>
<CardLink
stretched
to="/"
icon="bi:chevron-right"
icon-end
>
Browse tools
</CardLink>
</CardFooter>
</CardImgOverlay>
</Card>
</template>