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
      • Default
      • Nesting
      • Size
    • Configuration
    • API
      • OrderedList
      • UnorderedList

    Lists

    Use Lists to style and format ordered and unordered lists.


    Table of Contents
    • How to use it
      • Default
      • Nesting
      • Size
    • Configuration
    • API
      • OrderedList
      • UnorderedList

    How to use it

    Default

    Use Lists to style and format ordered (<ol>) and unordered (<ul>) lists.

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

    Nesting

    You can nest lists, setting the marker type for an outline style treatment.

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

    Size

    Lists come in small, medium, and large. The default size is medium.

    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 { OrderedList, UnorderedList } from '@zendeskgarden/react-typography'

    API

    OrderedList

    Extends OlHTMLAttributes<HTMLOListElement>

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

    Adjusts the vertical spacing between list items

    type
    'decimal' | 'decimal-leading-zero' | 'lower-alpha' | 'lower-roman' | 'upper-alpha' | 'upper-roman'
    'decimal'

    Sets the marker style

    OrderedList.Item

    Extends LiHTMLAttributes<HTMLLIElement>

    UnorderedList

    Extends HTMLAttributes<HTMLUListElement>

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

    Adjusts the vertical spacing between list items

    type
    'square' | 'circle' | 'disc'
    'disc'

    Sets the marker style

    UnorderedList.Item

    Extends LiHTMLAttributes<HTMLLIElement>

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