BentoGrid · ui.voila.dev

Our mantra

CRAFT

Taking care of everyone who ships great work, at every step.

Responsiveness

Tailored matches that fill the gaps in your delivery pipeline.

Simplicity

From the first search to the final invoice, we handle the whole process.

<BentoGrid.Root>
	<BentoGrid.FeaturedItem>
		<BentoGrid.FeaturedContent>
			<BentoGrid.FeaturedTitle>CARE</BentoGrid.FeaturedTitle>
		</BentoGrid.FeaturedContent>
		<BentoGrid.FeaturedDescription>Prendre soin…</BentoGrid.FeaturedDescription>
	</BentoGrid.FeaturedItem>
	<BentoGrid.Item wide>
		<BentoGrid.ItemLayout>…</BentoGrid.ItemLayout>
	</BentoGrid.Item>
</BentoGrid.Root>

wide makes an item span two columns, which is how you close a row that would otherwise leave a gap.

API

BentoGrid.Root

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/bento-grid/root.tsx.

BentoGrid.FeaturedContent

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/bento-grid/featured-content.tsx.

BentoGrid.FeaturedDescription

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <p> prop. Source: landing/components/bento-grid/featured-description.tsx.

BentoGrid.FeaturedIcon

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/bento-grid/featured-icon.tsx.

BentoGrid.FeaturedItem

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <article> prop. Source: landing/components/bento-grid/featured-item.tsx.

BentoGrid.FeaturedLabel

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <p> prop. Source: landing/components/bento-grid/featured-label.tsx.

BentoGrid.FeaturedTitle

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <h3> prop. Source: landing/components/bento-grid/featured-title.tsx.

BentoGrid.Item

Prop	Type	Default
`wide`	`boolean`	`false`	Spans two columns on desktop (the last tile of an odd set).
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <article> prop. Source: landing/components/bento-grid/item.tsx.

BentoGrid.ItemBody

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/bento-grid/item-body.tsx.

BentoGrid.ItemDescription

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <p> prop. Source: landing/components/bento-grid/item-description.tsx.

BentoGrid.ItemIcon

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/bento-grid/item-icon.tsx.

BentoGrid.ItemLayout

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/bento-grid/item-layout.tsx.

BentoGrid.ItemTitle

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <h3> prop. Source: landing/components/bento-grid/item-title.tsx.