Skip to main content

​
Overview

Bento Grid provides a flexible grid layout system inspired by bento box designs, allowing you to create visually appealing layouts with varied component sizes.

​
Usage

<template>
  <BentoGrid>
    <BentoGridItem>
      <template #title>Feature Title</template>
      <template #description>Feature description</template>
      <template #header>Header content</template>
      <template #icon>Icon component</template>
    </BentoGridItem>
    <BentoGridCard
      name="Card Title"
      description="Card description"
      href="/link"
      cta="Learn more"
    >
      <template #background>Background component</template>
    </BentoGridCard>
  </BentoGrid>
</template>

​
API Reference

​
BentoGridItem

​
Slots

Slot NameDescription
titleComponent to show as title.
descriptionComponent to show as description.
iconComponent to show as icon.
headerComponent to show as header.

​
BentoGridCard

​
Slots

Slot NameDescription
backgroundComponent to show in background.

​
Props

Props NameTypeDescription
namestringName or title to show on card.
icon?stringIcon component to show on card.
descriptionstringDescription content to show on card.
hrefstringLink to the url for CTA.
ctastringText to show on CTA.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us