Agency rates run high
Hiring an agency for every small task drains the budget of growing teams.
Skills always missing
The expertise you need is never in-house at the moment you need it.
<FeatureGrid.Root tone="destructive" columns="3">
<FeatureGrid.Card>
<FeatureGrid.CardIcon><CurrencyDollarIcon /></FeatureGrid.CardIcon>
<FeatureGrid.Card.Title>Unpredictable rates</FeatureGrid.Card.Title>
<FeatureGrid.Card.Description>Budgets…</FeatureGrid.Card.Description>
</FeatureGrid.Card>
</FeatureGrid.Root>tone on the root tints every card's icon, which is how a pains section reads
as red and a benefits section as green without setting a colour per card.
API
FeatureGrid.Root
| Prop | Type | Default | |
|---|---|---|---|
columns | "2" | "3" | "4" | — | Columns at the widest breakpoint. Narrower viewports collapse toward a single column regardless. |
tone | "brand" | "destructive" | "highlight" | "muted" | "primary" | "primary" | Which brand role colours this section: the tint, the solid fill and any connector line move together. Tokens, so a rebrand reaches them. |
Plus every <div> prop. Source: landing/components/feature-grid/root.tsx.
FeatureGrid.Card
| Prop | Type | Default | |
|---|---|---|---|
variant | "elevated" | "outline" | — | How each cell separates from the page: a raised surface, or a plain border. |
Plus every <div> prop. Source: landing/components/feature-grid/card.tsx.
FeatureGrid.CardDescription
Plus every <p> prop. Source: landing/components/feature-grid/card-description.tsx.
FeatureGrid.CardIcon
| Prop | Type | Default | |
|---|---|---|---|
tone | "brand" | "destructive" | "highlight" | "muted" | "primary" | — | Overrides the tone inherited from FeatureGrid.Root, for one card. |
Plus every <span> prop. Source: landing/components/feature-grid/card-icon.tsx.
FeatureGrid.CardTitle
| Prop | Type | Default | |
|---|---|---|---|
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/feature-grid/card-title.tsx.