@contentful/f36-density-container v4.0.0-alpha.3

title: 'DensityContainer' type: 'component' status: 'alpha' section: 'layoutComponents' slug: /components/density-container/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/density-container' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-density-container--overview'

typescript: ./src/DensityContainer.tsx

This container can be used to change the density of the children.

Import

import { DensityContainer } from '@contentful/f36-density-container';

Examples

Usage

• A low density results in the default experience.
• A high density results in a denser UI, allowing more content and actions to fit on a single screen.

Props (API reference)

Density support

To enable density support in your component, use the useDensity hook from @contentful/f36-utils.

Follow the density documentation (WIP) to ensure a consistent experience across the product.