Widget Grid

The Widget Grid system organizes multiple widgets into rows and columns, this grid layout allows widgets to be consistently aligned and evenly spaced. It also allows users to arrange, access, and interact with various widgets.

Overview

Code

Anatomy

  1. Columns
  2. Gutters

Usage Guidelines

Use When

  • Offer centralized and personlized workspace for viewing and interacting with key tools and insights.

Best Practices

  • Avoid clutter by only including relevant widgets to build a productivity dashboards.
  • Allow customization, enable users to add, remove, rearrange widgets to fit their workflows.
  • Provide quick actions, include buttons like “Launch” or “Run” for quick access to the widget’s main function.
  • Use the widget grid layout with 6 to 16 columns based on the viewport size.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Widget Grid

The Widget Grid system organizes multiple widgets into rows and columns, this grid layout allows widgets to be consistently aligned and evenly spaced. It also allows users to arrange, access, and interact with various widgets.

Overview

Code

Anatomy

  1. Columns
  2. Gutters

Usage Guidelines

Use When

  • Offer centralized and personlized workspace for viewing and interacting with key tools and insights.

Best Practices

  • Avoid clutter by only including relevant widgets to build a productivity dashboards.
  • Allow customization, enable users to add, remove, rearrange widgets to fit their workflows.
  • Provide quick actions, include buttons like “Launch” or “Run” for quick access to the widget’s main function.
  • Use the widget grid layout with 6 to 16 columns based on the viewport size.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Widget Grid

The Widget Grid system organizes multiple widgets into rows and columns, this grid layout allows widgets to be consistently aligned and evenly spaced. It also allows users to arrange, access, and interact with various widgets.

Overview

Code

Anatomy

  1. Columns
  2. Gutters

Usage Guidelines

Use When

  • Offer centralized and personlized workspace for viewing and interacting with key tools and insights.

Best Practices

  • Avoid clutter by only including relevant widgets to build a productivity dashboards.
  • Allow customization, enable users to add, remove, rearrange widgets to fit their workflows.
  • Provide quick actions, include buttons like “Launch” or “Run” for quick access to the widget’s main function.
  • Use the widget grid layout with 6 to 16 columns based on the viewport size.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

On This Page

Widget Grid

The Widget Grid system organizes multiple widgets into rows and columns, this grid layout allows widgets to be consistently aligned and evenly spaced. It also allows users to arrange, access, and interact with various widgets.

Overview

Code

Anatomy

  1. Columns
  2. Gutters

Usage Guidelines

Use When

  • Offer centralized and personlized workspace for viewing and interacting with key tools and insights.

Best Practices

  • Avoid clutter by only including relevant widgets to build a productivity dashboards.
  • Allow customization, enable users to add, remove, rearrange widgets to fit their workflows.
  • Provide quick actions, include buttons like “Launch” or “Run” for quick access to the widget’s main function.
  • Use the widget grid layout with 6 to 16 columns based on the viewport size.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

On This Page

Widget Grid

The Widget Grid system organizes multiple widgets into rows and columns, this grid layout allows widgets to be consistently aligned and evenly spaced. It also allows users to arrange, access, and interact with various widgets.

Overview

Code

Anatomy

  1. Columns
  2. Gutters

Usage Guidelines

Use When

  • Offer centralized and personlized workspace for viewing and interacting with key tools and insights.

Best Practices

  • Avoid clutter by only including relevant widgets to build a productivity dashboards.
  • Allow customization, enable users to add, remove, rearrange widgets to fit their workflows.
  • Provide quick actions, include buttons like “Launch” or “Run” for quick access to the widget’s main function.
  • Use the widget grid layout with 6 to 16 columns based on the viewport size.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.