Container

import {Container, Flex} from '@sentry/scraps/layout';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/layout/container');

import {SIZES} from './stories/consts';

The Container component is a foundational layout component that extends HTML elements with responsive CSS properties through props. It serves as the building block for other layout components like Flex and Grid to provides a consistent API for spacing, sizing, positioning, and styling.

You can specialize the Container component yourself and tailor it to your use case if neither Grid nor Flex are sufficient, but that should be an exception and you should try to use the higher order components instead.

Usage

The simplest usage renders a div element with enhanced layout properties:

<Container padding="md" background="primary">
  Basic container content
</Container>

Composition

The Container implements composition via <a href="/stories/layout/composition">render prop</a> pattern.

<Container padding="md" background="primary">
  {props => <div {...props}>Basic container content</div>}
</Container>

Specifying the DOM Node via as prop

The Container component renders a div element by default, but you can specify the DOM node to render by passing a as prop.

<Container as="section" padding="md" background="primary">
  Basic container content
</Container>

Spacing

The padding prop uses the theme's spacing system with shorthand support:

<Storybook.Demo> <Flex gap="md"> {SIZES.map(size => ( <Container key={size} background="primary" padding={size} border="primary" radius="md" > <strong>{size} padding</strong> -{' '} {size === 'xs' ? '4px' : size === 'sm' ? '6px' : size === 'md' ? '8px' : size === 'lg' ? '12px' : size === 'xl' ? '16px' : '24px'} </Container> ))} </Flex> </Storybook.Demo>

<Container padding="md">8px padding on all sides</Container>
<Container padding="md lg">8px top/bottom, 12px left/right</Container>
<Container padding="xs sm md lg">2px top, 6px right, 8px bottom, 12px left</Container>

Border Radius

Apply rounded corners using theme radius values:

<Storybook.Demo> <Flex gap="md"> <Container background="primary" padding="md" radius="sm" border="primary"> Small radius </Container> <Container background="primary" padding="md" radius="md" border="primary"> Medium radius </Container> <Container background="primary" padding="md" radius="lg" border="primary"> Large radius </Container> </Flex> </Storybook.Demo>

<Container background="primary" padding="md" radius="md">
  Rounded corners
</Container>

Position

Set positioning for absolute/relative layouts:

<Storybook.Demo> <Container position="relative" height="100px" background="primary" border="primary"> <Container position="absolute" padding="xs" background="primary" style={{top: '12px', right: '8px'}} border="primary" > Absolute positioned </Container> Relative container </Container> </Storybook.Demo>

<Container position="relative" height="100px" background="primary">
  <Container
    position="absolute"
    padding="xs"
    background="primary"
    style={{top: '12px', right: '8px'}}
  >
    Absolute positioned
  </Container>
  Relative container
</Container>

Responsive Example

<Storybook.Demo> <Flex padding={{xs: 'sm', lg: 'xl'}} background={{xs: 'primary', sm: 'secondary', lg: 'primary'}} radius={{xs: '0', sm: 'md'}} border="primary"

<Container padding="sm" background="primary" style={{flex: 1}} border="primary">

  Item 1
</Container>
<Container padding="sm" background="primary" style={{flex: 1}} border="primary">
  Item 2
</Container>

2xs breakpoint

The 2xs breakpoint is a breakpoint that applies from 0 to the smallest defined breakpoint size.

<Storybook.Demo> <Container display={{'2xs': 'none', sm: 'block'}}> This content is hidden below the sm breakpoint </Container> </Storybook.Demo>

<Container display={{'2xs': 'none', sm: 'block'}}>
  This content is hidden below the sm breakpoint
</Container>

Grid Integration

The area prop supports CSS Grid integration:

<Storybook.Demo> <Container display="grid" style={{ gridTemplateAreas: '"header header" "sidebar content"', gridTemplateColumns: '200px 1fr', gridTemplateRows: 'auto 1fr', gap: '8px', height: '200px', }}

<Container

  area="header"
  background="primary"
  padding="sm"
  border="primary"
  radius="md"
>
  Header
</Container>
<Container
  area="sidebar"
  background="primary"
  padding="sm"
  border="primary"
  radius="md"
>
  Sidebar
</Container>
<Container
  area="content"
  background="primary"
  padding="sm"
  border="primary"
  radius="md"
>
  Content
</Container>