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
- Name8.76.4•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 |