---
title: "Text Card"
description: "A card of text content — eyebrow, title, and body — optionally linkable."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/text-card"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/text-card.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Text Card

A card of text content — eyebrow, title, and body — optionally linkable.

```tsx
import { TextCard } from "@sanity/sanity-id/components/text-card"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `title` | `string` | yes | — | Card title |
| `arrow` | `"none" \| "arrow-right" \| "arrow-top-right"` | no | `props.href ? "arrow-right" : "none"` | Arrow indicator shown in the corner of the card. |
| `as` | `E` | no | — | Element or component to render as |
| `children` | `ReactNode` | no | — | Card body content |
| `className` | `string` | no | — | Additional CSS classes |
| `eyebrow` | `string` | no | — | Small label displayed above the title |
| `icon` | `IconSymbol` | no | — | Icon displayed in the card |
| `size` | `"sm" \| "md" \| "lg"` | no | `"sm"` | Card size variant |

Also accepts every prop of `Omit<ComponentProps<E>, "as">`.

## Usage

```tsx
import { TextCard } from "@sanity/sanity-id/components/text-card"

export default () => {
	const eyebrow = "Eyebrow"
	const text = "Elit nisi sint nostrud ipsum anim et adipisicing velit laboris pariatur aliqua proident adipisicing."
	return (
		<div className="grid gap-24 lg:grid-cols-3">
			<TextCard eyebrow={eyebrow} title="Text card (small)" size="sm">{text}</TextCard>
			<TextCard eyebrow={eyebrow} title="Text card (medium)" size="md">{text}</TextCard>
			<TextCard eyebrow={eyebrow} title="Text card (large)" size="lg">{text}</TextCard>
			<TextCard as="a" eyebrow={eyebrow} title="Text card with link (small)" href="#" size="sm">{text}</TextCard>
			<TextCard as="a" eyebrow={eyebrow} title="Text card with link (medium)" href="#" size="md">{text}</TextCard>
			<TextCard as="a" eyebrow={eyebrow} title="Text card with link (large)" href="#" size="lg">{text}</TextCard>
			<TextCard title="Text card no eyebrow (small)" size="sm">{text}</TextCard>
			<TextCard title="Text card no eyebrow (medium)" size="md">{text}</TextCard>
			<TextCard title="Text card no eyebrow (large)" size="lg">{text}</TextCard>
			<TextCard eyebrow={eyebrow} title="Text card with icon (small)" icon="component" size="sm">{text}</TextCard>
			<TextCard eyebrow={eyebrow} title="Text card with icon (medium)" icon="component" size="md">{text}</TextCard>
			<TextCard eyebrow={eyebrow} title="Text card with icon (large)" icon="component" size="lg">{text}</TextCard>
		</div>
	)
}
```