Code
<script lang="ts">
import { BentoGrid, BentoCard } from 'sv5ui-plus';
</script>
<BentoGrid class="max-w-4xl mx-auto">
<BentoCard class="col-span-1" name="Small Card" description="Info" />
<BentoCard class="col-span-2" name="Large Card" description="Details" />
<BentoCard class="col-span-1" name="Medium Card" description="Stats" />
</BentoGrid>
BentoGrid
A masonry-like grid layout composed of beautifully animated cards, inspired by Bento boxes.
Usage
Use BentoGrid as a wrapper and BentoCard for the children. Adjust the col-span-* classes on the children
to make them span different columns.
Notifications
Manage your alert settings.
Security
Keep your account safe.
Integrations
Connect with your favorite tools seamlessly.