v1.0.10

Container

Stable

This component is considered stable. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/container

npm @spark-web/container

Source GitHub.com

Bundle unpkg.com

The container centers and constrains the maximum width of the content it wraps.

Open in Playroom

<Container size="small">
  <Placeholder height={64} />
</Container>

<Container size="small">
  <Placeholder height={64} />
</Container>

Examples

Size

Use the size prop to adjust the maximum width of the container.

xsmall

small

medium

large

Open in Playroom

<Stack gap="large">
  <Container size="xsmall">
    <Placeholder label="xsmall" height={64} />
  </Container>
  <Container size="small">
    <Placeholder label="small" height={64} />
  </Container>
  <Container size="medium">
    <Placeholder label="medium" height={64} />
  </Container>
  <Container size="large">
    <Placeholder label="large" height={64} />
  </Container>
</Stack>

<Stack gap="large">
  <Container size="xsmall">
    <Placeholder label="xsmall" height={64} />
  </Container>
  <Container size="small">
    <Placeholder label="small" height={64} />
  </Container>
  <Container size="medium">
    <Placeholder label="medium" height={64} />
  </Container>
  <Container size="large">
    <Placeholder label="large" height={64} />
  </Container>
</Stack>

Props

Prop	Type	Description
children	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	Children elements to be rendered inside the container.
data?	DataAttributeMap	Sets data attributes on the element.
size?	"small" \| "xsmall" \| "medium" \| "large" \| "xlarge"	Sets the size of the container.