Responsiveness

Start with a layout that works in a narrow window, then add columns and persistent navigation when there is room. Choose changes based on the content and task. A breakpoint describes available width, rather than a particular device.

Choose an example, drag the width slider, or play the resize sequence. These abstract, scaled diagrams use a single illustrative threshold of 768 CSS pixels (48rem with a 16px initial font size). Real interfaces may need different thresholds for each part of the layout.

Breakpoints

The published DASH preset and helper types currently leave named viewport breakpoints to the consuming application. Define shared thresholds in that application's Panda configuration, or use explicit media queries.

Start with the narrow layout and add a change where its content needs more space. This example uses 48rem as a local threshold for two columns. That value is an example to evaluate with real content, rather than a DASH-wide breakpoint.

import { css } from "@hashintel/ds-helpers/css";

export const layout = css({
  display: "grid",
  gridTemplateColumns: "minmax(0, 1fr)",
  gap: "4",
  "@media (min-width: 48rem)": {
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    gap: "6",
  },
});

Decide what changes

The five views above show these changes. Keep the content available as its arrangement changes.

Keep the DOM reading order useful at every width. Avoid visual reordering that makes keyboard focus jump unexpectedly. Prefer wrapping and flexible tracks to fixed widths that clip labels.

Input methods and density

Screen width does not tell you whether someone uses a mouse, touch, or keyboard. Expose essential actions without hover. The preset provides _supportHover for hover feedback on a fine pointer and _pointerCoarse for adaptations to a coarse pointer.

Density changes spacing through the density utility. It is independent of breakpoints: a wide screen can still need comfortable spacing, and a narrow screen still needs usable targets. See Spacing and Accessibility.

Check reflow

Test between breakpoints, not only at their exact values. Include long names, translated labels, validation messages, and browser zoom. At 320 CSS pixels wide, ordinary content should reflow without horizontal page scrolling. WCAG's reflow criterion allows exceptions for content that needs two dimensions, including data tables and diagrams.

Give such content its own scrollable region, retain visible controls, and provide a text or table alternative when it communicates information that the graphic alone would make hard to access.

The table contains illustrative data. Its scrollable region is keyboard-focusable, so all columns remain reachable without making the entire page scroll sideways.

See the token setup before using responsive Panda styles in an application.