Style Guide Guide

  • Getting Started
  • Guidelineschevron-right
    • Overview
    • Accessibility
    • Browser support
    • Code conventions
    • Data entry
    • Data validation
    • Design principles
    • Input modes
    • Navigation
    • Notifications
    • Writing Guidelines
  • Styleschevron-right
    • Overview
    • Color Palette
    • Design tokens
    • Iconography
    • Imagery
    • Motion
    • Typography
    • Voice and tone
  • Componentschevron-right
    • Overview
    • Blocks and cardschevron-right
      • Overview
      • Card
      • Hero
    • Buttonschevron-right
      • Overview
      • Button
      • Button group
      • Text button
    • Charts and graphschevron-right
      • Overview
      • Bar graph
    • Form controlschevron-right
      • Overview
      • Text field
    • Headers and footerschevron-right
      • Overview
      • Footer
      • Header
    • Iconschevron-right
      • Overview
      • Icons
    • Interactivechevron-right
      • Overview
      • Tabs
    • Lists and collectionschevron-right
      • Overview
      • Card list
    • Mediachevron-right
      • Overview
      • Video
    • Messagingchevron-right
      • Overview
      • Alert
    • Navigationchevron-right
      • Overview
      • Pagination
    • Tableschevron-right
      • Overview
      • Table
    • Textchevron-right
      • Overview
      • Page header
      • Section header
      • Text passage
  • Utilitieschevron-right
    • Overview
  • Page Templates
  • Downloads
  • Support
  • Contribute

Components

This is a list of all the components

  • text

    Text

    Text components description

  • tables

    Tables

    Responsive data display for a range of contexts

  • navigation

    Navigation

    Components for wayfinding (see also headers and footers)

  • messaging

    Messaging

    Tools for status and info updates, from micro-copy tooltips to high-impact alerts

  • media

    Media

    Images and video

  • lists-and-collections

    Lists and collections

    From simple text lists to complex card collections

  • interactive

    Interactive

    Components for revealing/hiding content for more compressed and focused layouts

  • icons

    Icons

    Icon reference and usage

  • headers-and-footers

    Headers and footers

    Responsive containers for app title, navigation, and search

  • form-controls

    Form controls

    Components for efficient data entry

  • charts-and-graphs

    Charts and graphs

    Essential data-viz patterns

  • buttons

    Buttons

    Button styles and interactions for every context

  • blocks-and-cards

    Blocks and Cards

    A block component that consists of a header, body, and footer.

  • About
  • Roadmap
  • Release History
  • Contribute