• Getting started
  • Guidelines
    • Overview
    • Design Principles
    • Accessibility
    • Code conventions
    • Browser support
  • Styles
    • Design tokens
    • Grid System
    • Iconography
    • Typography
  • Components
    • Buttons
      • Button
      • Dropdown
      • Icon button
      • Toggle Group
    • Cards
      • Contact Card
    • Layout
      • Stack
      • Vertical Spacing
    • Forms
      • Text Input
    • Headers and footers
      • Site Header
    • Icons
    • Lists and collections
    • Navigation
      • Horizontal nav
    • Notifications
      • Badge
      • Notice
    • Tables
      • Table
      • Index Table
    • Text
  • Utilities
    • Overview
    • Display
    • Margin
    • Padding
    • Text Align
    • Flex
    • Font Size
    • Font Weight
    • Visibility
  • Resources
  • Support
  • Contribute

Utilities

Utilities are CSS helper classes that apply a single rule to an element. They should be used to accomplish specific styling needs, and should be used sparingly, especially when modifying the default styling of a GrowPath UI component.

  • Display In Progress

    Display utility used for applying display rules to a component.

  • Flex In Progress

    Utility for applying various flex rules

  • Font Size Complete

    Utility for applying different font sizes

  • Font Weight Complete

    Utility for applying different font weights

  • Margin Complete

    Margin utility for adjusting spacing on-the-fly

  • Padding Complete

    Padding utility for adjusting spacing on-the-fly

  • Text Align Complete

    Used for aligning text within the element

  • Visibility Complete

    Utility for applying visibility rules