Layout

Effective layouts are essential for creating intuitive, readable user interfaces. This guide covers the key layout components and principles used throughout the Harness design system.

Core Layout Components

Harness provides two primary components for constructing layouts:

1. Layout Component - A collection of flexible primitives for building layouts with Flex, Grid, Horizontal, and Vertical arrangements.
2. Spacer Component - A utility for adding consistent vertical spacing between elements.

Note

Whenever possible, use Layout components with the gap property instead of Spacer components. The Spacer component is primarily useful for specific cases where gaps cannot be used.

Layout Types

Flex Layouts

Flex layouts allow you to arrange items in a row or column with flexible spacing and alignment options.

Grid Layouts

Grid layouts give you precise control over two-dimensional layout with rows and columns.

Horizontal and Vertical

Horizontal and Vertical are convenient wrappers around Flex that are pre-configured for row and column layouts.

Spacing

Consistent spacing is critical for creating visually balanced layouts. Use the gap property on Layout components or the Spacer component when needed.

Important: To utilize the gap property, you must use the Layout components (Layout.Flex or Layout.Grid). Regular HTML elements or non-Layout components do not support the standardized gap property from the Harness design system.

Using the Gap Property

Using the Spacer Component

Common Layout Patterns

Sidebar Layout

A common layout pattern with a sidebar and main content area.

Header, Content, Footer Layout

A traditional page layout with header, content, and footer sections.

Form Layout

A common layout for forms with labels and inputs.

Dashboard Card Layout

A grid of cards for dashboard displays.

Best Practices

1. Use Layout Components Instead of Raw Flex/Grid

   The Layout components provide consistent props and behavior across your application

2. Prefer Gap Over Spacer

   Use the gap property on Layout components rather than inserting Spacer components between items

3. Responsive Considerations

   For complex responsive layouts, use the built-in responsive options or combine with media queries

4. Grid vs. Flex

   • Use Grid for two-dimensional layouts with rows and columns

   • Use Flex for one-dimensional layouts (either row or column)

5. Combine Layout Components

   Nest Layout components to create complex interface structures

Layout Component API

// Flex component
<Layout.Flex
  direction="row" | "column"
  align="start" | "center" | "end" | "stretch" | "baseline"
  justify="start" | "center" | "end" | "between" | "around" | "evenly"
  wrap="nowrap" | "wrap" | "wrap-reverse"
  gap="none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
  className="custom-class"
/>

// Grid component
<Layout.Grid
  columns="1fr 2fr" | {number}
  rows="auto 1fr" | {number}
  align="start" | "center" | "end" | "stretch" | "baseline"
  justify="start" | "center" | "end" | "between" | "around" | "evenly"
  gap="none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
  className="custom-class"
/>

// Horizontal component (pre-configured Flex)
<Layout.Horizontal
  align="start" | "center" | "end" | "stretch" | "baseline"
  justify="start" | "center" | "end" | "between" | "around" | "evenly"
  gap="none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
  className="custom-class"
/>

// Vertical component (pre-configured Flex)
<Layout.Vertical
  align="start" | "center" | "end" | "stretch" | "baseline"
  justify="start" | "center" | "end" | "between" | "around" | "evenly"
  gap="none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
  className="custom-class"
/>

Spacer Component API

<Spacer
  size={4} // Height of the spacer in pixels (default 4px)
  className="custom-class"
/>