BentoGrid

One featured tile plus a run of smaller ones.

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

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

BentoGrid.FeaturedContent

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

BentoGrid.FeaturedDescription

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

BentoGrid.FeaturedIcon

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

BentoGrid.FeaturedItem

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

BentoGrid.FeaturedLabel

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

BentoGrid.FeaturedTitle

PropTypeDefault
renderComponentRenderFn<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

PropTypeDefault
widebooleanfalseSpans two columns on desktop (the last tile of an odd set).

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

BentoGrid.ItemBody

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

BentoGrid.ItemDescription

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

BentoGrid.ItemIcon

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

BentoGrid.ItemLayout

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

BentoGrid.ItemTitle

PropTypeDefault
renderComponentRenderFn<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.