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
      • Well
    Table of Contents
    • How to use it
      • Default
      • Alternating
      • Custom media
      • Opposite content
    • How to use it well
      • Nest content when necessary
      • Make interactive elements explicit
      • Use correct hierarchy
    • Configuration
    • API
      • Timeline

    Timeline

    A Timeline lists events over a period of time.

    Table of Contents
    • How to use it
      • Default
      • Alternating
      • Custom media
      • Opposite content
    • How to use it well
      • Nest content when necessary
      • Make interactive elements explicit
      • Use correct hierarchy
    • Configuration
    • API
      • Timeline
    Used for this
    • To track an issue over time
    • To show events associated with an item
    Not for this
    • To guide users through a step by step process, use a Stepper instead

    How to use it

    Default

    The Timeline component is made up of individual Timeline items. Item content appears after the item marker by default.

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

    Alternating

    Items are displayed on alternating sides of the Timeline.

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

    Custom media

    The item marker can also be replaced with another icon, image, or avatar.

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

    Opposite content

    In the opposite layout, a second content area is present on the opposite side of the Timeline.

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

    How to use it well

    Nest content when necessary

    Components such as links, buttons, and images can be nested in each Timeline item.

    Do this

    Do include images and other nested content if appropriate.

    Make interactive elements explicit

    Creating a visual affordance for a link or action is preferred to making the entire item interactive.

    Do this

    Create explicit visual affordances for interactive items.

    Not this

    Don’t rely on hover states to show that items are interactive.

    Use correct hierarchy

    Item content can be replaced with any text style. Make sure to use appropriate hierarchy when designing your content.

    Do this

    Use balanced and appropriate typographic hierarchy.

    Not this

    Don’t mix up typographic hierarchy when customizing item content.

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-accordions
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Timeline } from '@zendeskgarden/react-accordions'

    API

    The Timeline component follows this structure:

    <Timeline>  <Timeline.Item>    <Timeline.OppositeContent /> {/* Optional */}    <Timeline.Content />  </Timeline.Item>  {/* other items */}</Timeline>

    Timeline

    Extends OlHTMLAttributes<HTMLOListElement>

    Prop nameTypeDefaultDescription
    isAlternate
    		boolean

    Applies alternate styling

    Timeline.Content

    Extends HTMLAttributes<HTMLDivElement>

    Nest the Content within an Item component.

    Timeline.Item

    Extends LiHTMLAttributes<HTMLLIElement>

    An Item provides the DOM structure and styling for the default, OppositeContent, and alternate content layouts.

    Prop nameTypeDefaultDescription
    icon
    		ReactElement<any, string | JSXElementConstructor<any>>

    Replaces the dot with an icon

    surfaceColor
    		string

    Provides surface color for an icon placed on a non-default background. Accepts a color variable key (i.e. background.recessed) to render based on light/dark mode, or any hex value.

    Timeline.OppositeContent

    Extends HTMLAttributes<HTMLDivElement>

    The OppositeContent component displays content on the opposite side of the separator. Nest it within an Item component.

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