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.
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Life begins the day you start a garden.
Lotus root spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Cordn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
In garden arrangement, as in all other kinds of decorative work, one has not only to acquire a knowledge of what to do, but also to gain some wisdom in perceiving what it is well to let alone.
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.5.1•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 |