Table of Contents
Paragraph
Use Paragraph to render blocks of text with Garden styling.
How to use it
Default
Use Paragraph to style and format <p> elements.
Size
Size controls the space between Paragraphs. The default size is medium, and you can choose small or large too. Use typography to choose an appropriate type scale.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-typography
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { LG, MD, Paragraph, SM } from '@zendeskgarden/react-typography'
API
LG
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 |
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 |
SM
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 |