Marble UI
← Components

Container / Section

Preview: Sizes

Centered page column with responsive side padding.

Import

import { Container, Section } from '@marbleui/ui'

Props

<Container>

PropTypeDefaultDescription
asElementType'div'
size'sm' | 'md' | 'lg' | 'xl' | 'full''lg'

Also accepts HTML element props (278).

<Section>

Vertical page section with consistent spacing; `tone` sets the band background.

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'
tone'default' | 'muted' | 'inverted''default'

Also accepts HTML element props (278).

Usage notes

Container centers page content at a set max width with responsive side padding. Section is the full-width band around it, with consistent vertical spacing and a background tone.

<Section tone="muted" size="lg" aria-labelledby="pricing-title">
  <Container size="md">
    <h2 id="pricing-title">Pricing</h2>
    <PricingTable />
  </Container>
</Section>
  • Container size is sm (42 rem), md (56 rem), lg (72 rem, default), xl (80 rem) or full. Side padding grows from 1 to 2 rem at wider breakpoints. Use as="main" for the main column.
  • Section renders a section; size sets vertical padding (sm 2 rem, md 4 rem default, lg 6 rem). Name it with aria-labelledby if it should be a landmark.
  • tone is default, muted or inverted. inverted only swaps the band’s background and text color; components inside with their own colors (muted text, cards, buttons) aren’t re-themed, so check contrast.
Example source · show
import { Container, Section } from './container'

const Bar = ({ t }: { t: string }) => <div className="rounded-md border border-dashed border-border-strong bg-surface-muted py-3 text-center text-xs text-fg-muted">{t}</div>
export const styles = {
  Sizes: () => <div className="flex w-[40rem] flex-col gap-2 rounded-xl border border-border py-3">{(['sm', 'md', 'lg'] as const).map((s) => <Container key={s} size={s} className="!max-w-[var(--w)]" style={{ '--w': { sm: '16rem', md: '24rem', lg: '34rem' }[s] } as React.CSSProperties}><Bar t={`Container ${s}`} /></Container>)}</div>,
  Sections: () => <div className="w-[36rem] overflow-hidden rounded-xl border border-border">{(['default', 'muted', 'inverted'] as const).map((t) => <Section key={t} tone={t} size="sm"><Container size="sm"><p className="text-sm font-medium">Section · {t}</p></Container></Section>)}</div>,
}

Source: packages/ui/src/container/container.tsx

Catalog

Category
layout
Priority
Extra
Primitive
custom