Typography
Use Typography components to present content clearly and consistently on the page.
How to use it
Block quote
Use Blockquote to represent a body of text that is from another source.
Ellipsis text
Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
Font modifiers
You can apply two modifiers to type: bold and monospace.
Type scale
Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
Configuration
- Name9.1.0•View source•View on npm
- Installnpm install @zendeskgarden/react-typography
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Blockquote, Ellipsis, LG, MD, SM, XL, XXL, XXXL } from '@zendeskgarden/react-typography'
API
Blockquote
Extends BlockquoteHTMLAttributes<HTMLQuoteElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | 'large' | 'medium' | Controls the spacing between sibling blockquotes and paragraphs |
Ellipsis
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
tag | any | div | Updates the element's HTML tag |
title | string | Overrides the auto-generated |
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 |
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 |
XL
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isBold | boolean | Applies bold font style | |
tag | any | div | Updates the element's HTML tag |
XXL
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isBold | boolean | Applies bold font style | |
tag | any | div | Updates the element's HTML tag |
XXXL
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isBold | boolean | Applies bold font style | |
tag | any | div | Updates the element's HTML tag |