Text Card
A card of text content — eyebrow, title, and body — optionally linkable.
import { TextCard } from "@sanity/sanity-id/components/text-card"Props
Also accepts every prop of Omit<ComponentProps<E>, "as">.
| Prop | Type | Description |
|---|---|---|
title (required) | string | Card title |
arrow | "none" | "arrow-right" | "arrow-top-right" | Arrow indicator shown in the corner of the card. default value: props.href ? "arrow-right" : "none" |
as | E | Element or component to render as |
children | ReactNode | Card body content |
className | string | Additional CSS classes |
eyebrow | string | Small label displayed above the title |
icon | IconSymbol | Icon displayed in the card |
size | "sm" | "md" | "lg" | Card size variant default value: "sm" |
Required.
Usage
Eyebrow
Text card (small)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card (medium)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card (large)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card with link (small)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card with link (medium)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card with link (large)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Text card no eyebrow (small)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Text card no eyebrow (medium)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Text card no eyebrow (large)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card with icon (small)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card with icon (medium)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
Eyebrow
Text card with icon (large)
Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing.
1import { TextCard } from "@sanity/sanity-id/components/text-card"
2
3export default () => {
4 const eyebrow = "Eyebrow"
5 const text = "Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing."
6 return (
7 <div className="grid gap-24 lg:grid-cols-3">
8 <TextCard eyebrow={eyebrow} title="Text card (small)" size="sm">{text}</TextCard>
9 <TextCard eyebrow={eyebrow} title="Text card (medium)" size="md">{text}</TextCard>
10 <TextCard eyebrow={eyebrow} title="Text card (large)" size="lg">{text}</TextCard>
11 <TextCard as="a" eyebrow={eyebrow} title="Text card with link (small)" href="#" size="sm">{text}</TextCard>
12 <TextCard as="a" eyebrow={eyebrow} title="Text card with link (medium)" href="#" size="md">{text}</TextCard>
13 <TextCard as="a" eyebrow={eyebrow} title="Text card with link (large)" href="#" size="lg">{text}</TextCard>
14 <TextCard title="Text card no eyebrow (small)" size="sm">{text}</TextCard>
15 <TextCard title="Text card no eyebrow (medium)" size="md">{text}</TextCard>
16 <TextCard title="Text card no eyebrow (large)" size="lg">{text}</TextCard>
17 <TextCard eyebrow={eyebrow} title="Text card with icon (small)" icon="component" size="sm">{text}</TextCard>
18 <TextCard eyebrow={eyebrow} title="Text card with icon (medium)" icon="component" size="md">{text}</TextCard>
19 <TextCard eyebrow={eyebrow} title="Text card with icon (large)" icon="component" size="lg">{text}</TextCard>
20 </div>
21 )
22 }