Container

Implementation

import { Container } from "slipstream-ui";

const Example = () => <Container>...</Container>;

Sizing

Additional responsive max-width options may be tacked on via the className attribute (e.g. className="md:max-w-xl"). See (link: max-width) for detailed information on max-width's as defined by Tailwind.

Example

Container - size="sm"

Container - size="md"

Container - size="lg"

Container - size="xl"

Container - size="2xl"

Container - size="3xl"

Container - size="fluid"

<Container size="sm">...</Container>

<Container size="md">...</Container>

<Container size="lg">...</Container>

Props

Attribute	Type	Value	Default Value	Description
size	string	0/none/xs/sm/md/lg xl/2xl/3xl/4xl/5xl/6xl/7xl full/min/max/prose/screen-sm/screen-md screen-lg/screen-xl/screen-2xl"	max-w-6xl	Set max width of container element
fluid	boolean	true/false		Override max width to be 100%