Forma 36: DensityContainer component
npm install @contentful/f36-density-container---
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.
``jsx static=true`
import { DensityContainer } from '@contentful/f36-density-container';
- A low density results in the default experience.high
- A density results in a denser UI, allowing more content and actions to fit on a single screen.
`jsx file=./examples/DensityUsage.tsx
`
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.
`jsx file=./examples/DensitySupport.tsx
``