<ContactCards.Root>
<ContactCards.Card>
<ContactCards.Card.Title>Par email</ContactCards.Card.Title>
<ContactCards.Card.Description>Pour toute question…</ContactCards.Card.Description>
<Button variant="outline" render={<a href="mailto:contact@acme.dev">contact@acme.dev</a>} />
</ContactCards.Card>
</ContactCards.Root>API
ContactCards.Root
Plus every <div> prop. Source: landing/components/contact-cards/root.tsx.
ContactCards.Card
Plus every <div> prop. Source: landing/components/contact-cards/card.tsx.
ContactCards.CardDescription
| Prop | Type | Default | |
|---|---|---|---|
align | "center" | "left" | "right" | — | Text alignment. |
size | "base" | "lg" | "sm" | "xl" | "xs" | — | Type scale, independent of variant so a muted note can still be
large. |
variant | "body" | "lead" | "muted" | — | Role of the copy. lead is a standfirst under a heading, muted is
secondary detail, body is everything else. |
weight | "bold" | "medium" | "normal" | "semibold" | — | Font weight. Prefer a heading over bold body copy when the text is actually a heading. |
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 the DOM props of the element it renders. Source: landing/components/contact-cards/card-description.tsx.
ContactCards.CardTitle
| Prop | Type | Default | |
|---|---|---|---|
align | "center" | "left" | "right" | — | Text alignment. center suits a section intro; anything longer than a
line or two reads better left-aligned. |
level | HeadingLevel | — | Sets both the rendered tag and the size scale (override the tag with render). |
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 the DOM props of the element it renders. Source: landing/components/contact-cards/card-title.tsx.