Build / Atoms

Text

atom

Body copy at Deck's Body type scale.

import { Text } from '@meetcard/deck'

Example

<Text tone="muted" size="sm">Connected 3 days ago</Text>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Text>Capture every connection, activate every relationship.</Text>;

The full Body ramp, 20/30 down to 12/18.

Sizes

Source

const Sizes = () => <Stack gap={12}>
    <Text size="xl">Capture every connection, activate every relationship.</Text>
    <Text size="lg">Capture every connection, activate every relationship.</Text>
    <Text size="md">Capture every connection, activate every relationship.</Text>
    <Text size="sm">Capture every connection, activate every relationship.</Text>
    <Text size="xs">Capture every connection, activate every relationship.</Text>
</Stack>;

Semantic tones. Never communicate meaning with color alone.

There is no display tone on Text — the Clay Display color only clears contrast as large text, so it lives on Heading at a display size.

Tones

Source

const Tones = () => <Stack gap={8}>
    <Text tone="default">default — primary reading color
              </Text>
    <Text tone="muted">muted — secondary and supporting copy
              </Text>
    <Text tone="brand">brand — Signal Green emphasis
              </Text>
    <Text tone="warning">warning — cautionary copy
              </Text>
    <Text tone="error">error — validation and failure messages
              </Text>
    <Text tone="disabled">disabled — only inside a disabled control
              </Text>
</Stack>;

Clamps to one line. Useful in cards where names can be arbitrarily long.

Truncated

Source

const Truncated = () => <div style={{ maxWidth: 260 }}>
    <Text truncate>Capture every connection, activate every relationship.</Text>
</div>;

Props

Prop	Type	Default	Description
`as`	`'p' \| 'span' \| 'div'`	`'p'`	Rendered element. Use `span` for inline text inside another block.
`size`	`'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'`	`'md'`	Body scale step. Defaults to `md` (16/24), the standard reading size.
`tone`	`\| 'default' \| 'muted' \| 'disabled' \| 'inverse' \| 'brand' \| 'error' \| 'warning'`	`'default'`	Semantic color role.
`truncate`	`boolean`	`false`	Clamp to a single line with an ellipsis.
`weight`	`'regular' \| 'medium' \| 'semibold'`	`'regular'`	—

Also accepts everything from HTMLAttributes, so id, data-* and event handlers pass straight through.