Components Typography
Code
StableInline code for identifiers, values and file names in running text.
Use Code for short fragments inside a sentence. For multi-line samples use CodeBlock, and for one line the reader should copy use CopyableCode.
Overview
Set STANCE_THEME to high-contrast to preview the accessible theme.
import { Code, Text } from '@bindshq/stance-react';
export function Basic() {
return (
<Text size="sm">
Set <Code>STANCE_THEME</Code> to <Code>high-contrast</Code> to preview the accessible theme.
</Text>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Set STANCE_THEME to high-contrast to preview the accessible theme.
Set STANCE_THEME to high-contrast to preview the accessible theme.
Set STANCE_THEME to high-contrast to preview the accessible theme.
Import
import { Code } from '@bindshq/stance-react';Examples
Templates live in /dashboard/templates.
import { Code, Text } from '@bindshq/stance-react';
export function Plain() {
return (
<Text size="sm">
Templates live in <Code variant="plain">/dashboard/templates</Code>.
</Text>
);
}Organisation ID: org_8f2c91
import { Code, Text } from '@bindshq/stance-react';
export function Small() {
return (
<Text size="sm">
Organisation ID: <Code size="sm">org_8f2c91</Code>
</Text>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'muted' | 'plain' | 'muted' | With or without a background chip. |
size | 'sm' | 'md' | 'md' | Relative size. |
Accessibility
- Renders <code>, which assistive technology can announce as code.
- Long values wrap anywhere instead of overflowing.
Usage guidelines
Do
- Use for literal values the reader might type.
Don’t
- Use for emphasis.