Responsive

Prism System provides responsive levers at different levels to the users: low-level breakpoints, responsive properties, and responsive components.

Breakpoints

Prism System provides 4 breakpoints. These are set in rem so that any font-size adjustments done by the user are accounted.

Responsive Properties

To make responsive styling easier, there are several properties that accept responsive values, like spacing, orientation, alignment, and justification. This allows you to specify different values for different breakpoints. There are two ways to specify them:

1. Explicit Object notation: { mobile: '$100', tablet: '$300' }
2. Shorthand Array notation: ['$100', '$300']

Start with a single value like <Stack spacing="$400" /> for all sizes and, as required, add specific breakpoints one-by-one like <Stack spacing={['$100', '$400']} />.

Here's an example of flipping the Stack orientation based on breakpoints.

Here's a Cluster with distinct spacings based on breakpoints.

Responsive Components and Hooks

We also have a Visible component that you could use to show or hide components on specific breakpoints.

There is also a useResponsiveValue hook that you can use to pick values based on breakpoints.