Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
        • Code
        • Lists
        • Paragraph
        • Span
        • Typography
      • Well
    Table of Contents
    • How to use it
      • Block quote
      • Ellipsis text
      • Font modifiers
      • Type scale
    • Configuration
    • API
      • Blockquote
      • Ellipsis
      • LG
      • MD
      • SM
      • XL
      • XXL
      • XXXL

    Typography

    Use Typography components to present content clearly and consistently on the page.


    Table of Contents
    • How to use it
      • Block quote
      • Ellipsis text
      • Font modifiers
      • Type scale
    • Configuration
    • API
      • Blockquote
      • Ellipsis
      • LG
      • MD
      • SM
      • XL
      • XXL
      • XXXL

    How to use it

    Block quote

    Use Blockquote to represent a body of text that is from another source.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Ellipsis text

    Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Font modifiers

    You can apply two modifiers to type: bold and monospace.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Type scale

    Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    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 { Blockquote, Ellipsis, LG, MD, SM, XL, XXL, XXXL } from '@zendeskgarden/react-typography'

    API

    Blockquote

    Extends BlockquoteHTMLAttributes<HTMLQuoteElement>

    Prop nameTypeDefaultDescription
    size
    'small' | 'medium' | 'large'
    'medium'

    Controls the spacing between sibling blockquotes and paragraphs

    Ellipsis

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    tag
    any
    div

    Updates the element's HTML tag

    title
    string

    Overrides the auto-generated title attribute

    LG

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    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 nameTypeDefaultDescription
    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 nameTypeDefaultDescription
    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 nameTypeDefaultDescription
    isBold
    boolean

    Applies bold font style

    tag
    any
    div

    Updates the element's HTML tag

    XXL

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    isBold
    boolean

    Applies bold font style

    tag
    any
    div

    Updates the element's HTML tag

    XXXL

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    isBold
    boolean

    Applies bold font style

    tag
    any
    div

    Updates the element's HTML tag

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025