Table of Contents
Span
Use Span to style and format inline text elements.
Used for this
- To apply styles to short strings of text
- To include icons inline with text
Not for this
- To style an entire block of text, use Paragraph instead
How to use it
Bold
To apply bold styling without indicating semantic importance, use isBold.
Hue
The color of a span is specified with hue. Use a color variable
key or PALETTE color when possible.
Icons
To include an icon at the beginning of a span, use <Span.StartIcon>.
To include an icon anywhere else in the span, use <Span.Icon>.
Monospace
Apply a fixed-width type treatment using isMonospace.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-typography
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { MD, Paragraph, Span } from '@zendeskgarden/react-typography'
API
MD
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isBold | boolean | Applies bold font style | |
isMonospace | boolean | Renders with monospace font | |
tag | any | div | Updates the element's HTML tag |
Paragraph
Extends HTMLAttributes<HTMLParagraphElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | 'large' | 'medium' | Controls the spacing between sibling paragraphs |
Span
Extends HTMLAttributes<HTMLSpanElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
hidden | boolean | Hides the span visually without hiding it from screen readers | |
hue | string | Applies a font color. Use a color variable key (i.e. foreground.subtle) or PALETTE colors when possible. Accepts all hex values. | |
isBold | boolean | Applies bold font style. Font weight is inherited by default. | |
isMonospace | boolean | Renders with monospace font | |
tag | any | span | Updates the element's HTML tag |
Span.Icon
Extends SVGAttributes<SVGElement>
Span.StartIcon
Extends SVGAttributes<SVGElement>