Container

Components

Container

Code

Container is a styled wrapper component that provides consistent background, border, and border radius styling for content.

import { Container } from '@sproutsocial/racine'

<Container p={400}>
  This is a container with default styling.
</Container>

Properties

Overview

Container is a lightweight wrapper component built on top of Box that provides consistent styling for containers throughout your application. It includes default background color, border, and border radius based on the Seeds design tokens. Visuially it is very similar to Card, but lacks interactivity.

Since this is a low level component, it should be used sparingly. Seeds offers ContentBlock, Accordion, Card, ListItemContent which have a similar visual style but require less work.

Recipes

Basic container

The simplest use case is wrapping content with consistent container styling.

import { Container } from '@sproutsocial/racine'

<Container p={400}>
  This is a basic container with padding.
</Container>

Container with custom padding

Container accepts all Box system props, allowing you to customize spacing.

import { Container } from '@sproutsocial/racine'

<Box display='flex' flexDirection='column' gap={400}>
  <Container p={300}>Container with small padding</Container>
  <Container p={500}>Container with large padding</Container>
</Box>

Full width container

Use system props to control the width of the container.

import { Container } from '@sproutsocial/racine'

<Container p={400} width={1}>
  This container spans the full width.
</Container>

Container with custom content

Container can wrap any content, including other components.

import { Container } from '@sproutsocial/racine'

<Container p={400}>
  <Text.Headline mb={300}>Headline in a Container</Text.Headline>
  <Text as='p' mt={300}>
    Body text with additional content. Container provides a clean background
    and border to group related information together.
  </Text>
</Container>

Nested containers

While not common, containers can be nested when needed.

import { Container } from '@sproutsocial/racine'

<Container p={400}>
  <Text.Headline mb={300}>Outer Container</Text.Headline>
  <Container p={300} mt={300}>
    <Text>Nested container content</Text>
  </Container>
</Container>

Container as a card-like element

Combine Container with other components to create card-like layouts.

import { Container } from '@sproutsocial/racine'

<Container p={400}>
  <Box display='flex' justifyContent='space-between' alignItems='center'>
    <Box>
      <Text.SmallSubHeadline>Card Title</Text.Headline>
      <Text.Byline ml={200}>Additional information</Text.Byline>
    </Box>
    <Button appearance='secondary' size='small'>Action</Button>
  </Box>
</Container>