Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
@lucide/svelte
Save your files
We automatically save your files as you type.
Full text search
Search through all your files in one place.
Multilingual
Supports 100+ languages and counting.
Calendar
Use the calendar to filter your files by date.
Notifications
Get notified when someone shares a file or mentions you in a comment.
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
bento-grid.svelte
bento-card.svelte
index.ts
Folder Structure
Folder Structure
Props
Bento Grid
Bento grid component
| Name | Type | Default | Description |
|---|---|---|---|
class | string | "" | Additional CSS classes to apply |
children | Snippet | | The content to be displayed inside the grid |
Bento Card
| Name | Type | Default | Description |
|---|---|---|---|
name | string | | The name of the card, displayed as the title |
class | string | "" | Additional CSS classes to apply |
background | Snippet | | The background of the card, can be a color or an image |
Icon | Component<any> | | The icon to be displayed on the card, passed as a Svelte component |
iconClass | string | "" | |
description | string | | A brief description of the card's content |
href | string | | The URL to navigate to when the card is clicked |
cta | string | | The call-to-action text displayed on the card |