Send your brief
Describe your needs: we prepare a tailored quote.
Approve the quote
A clear, detailed offer, with no commitment, within 48 h.
Kick off the project
A vetted freelancer starts, with full progress tracking.
<NumberedCards.Root tone="highlight" columns="3">
<NumberedCards.Card>
<NumberedCards.Card.Header>
<NumberedCards.CardIcon><EnvelopeIcon /></NumberedCards.CardIcon>
<NumberedCards.CardLabel>Step 1</NumberedCards.CardLabel>
</NumberedCards.Card.Header>
<NumberedCards.Card.Title>Envoyez votre demande</NumberedCards.Card.Title>
<NumberedCards.Card.Description>Describe…</NumberedCards.Card.Description>
</NumberedCards.Card>
</NumberedCards.Root>The label is your text, not a counter — write "Step 1" or "01" as the design asks. For a two-audience flow reach for StepTracks.
API
NumberedCards.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/numbered-cards/root.tsx.
NumberedCards.Card
Plus every <div> prop. Source: landing/components/numbered-cards/card.tsx.
NumberedCards.CardDescription
Plus every <p> prop. Source: landing/components/numbered-cards/card-description.tsx.
NumberedCards.CardHeader
Plus every <div> prop. Source: landing/components/numbered-cards/card-header.tsx.
NumberedCards.CardIcon
Plus every <span> prop. Source: landing/components/numbered-cards/card-icon.tsx.
NumberedCards.CardLabel
Plus every <span> prop. Source: landing/components/numbered-cards/card-label.tsx.
NumberedCards.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/numbered-cards/card-title.tsx.