Kontainer

Kontainer memusatkan isinya, membatasi lebarnya agar baris teks tetap terbaca, dan menjaga celah tepi agar tidak ada yang menyentuh pinggir layar ponsel. Biasanya ia adalah hal pertama di dalam body().

Kontainer dasar

Semua yang di dalamnya tetap terpusat dan berhenti membesar pada batas ukurannya.

container(
  text({ variant: 'lead' }, 'Semua yang di dalamnya tetap terpusat dan berhenti membesar pada batas ukurannya.'),
)

Ukuran

Lima langkah, dari satu kolom yang terbaca sampai tanpa batas sama sekali. sm sekitar 40rem — kira-kira lebar yang diinginkan prosa.

sm — 40rem

md — 56rem

lg — 72rem (bawaan)

stack({ gap: 'sm' },
  container({ size: 'sm', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'sm — 40rem'),
  ),
  container({ size: 'md', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'md — 56rem'),
  ),
  container({ size: 'lg', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'lg — 72rem (bawaan)'),
  ),
)

Lebar khusus

width menerima panjang CSS apa pun dan menimpa size, untuk satu halaman yang butuh sesuatu yang tidak ada di skalanya.

width: 30rem

container({ width: '30rem', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small', align: 'center' }, 'width: 30rem'),
)

Celah tepi

Celah tepi adalah bantalan yang dijaga antara konten dan pinggir viewport. Ia menerima token jarak, jumlah satuan jarak, atau panjang mentah.

Celah tepi yang lebih lebar, untuk halaman yang kontennya tidak boleh sampai ke pinggir pada tablet.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Celah tepi yang lebih lebar, untuk halaman yang kontennya tidak boleh sampai ke pinggir pada tablet.'),
)

Sebagai elemen lain

as mengubah tag-nya tanpa mengubah apa pun yang lain — berguna ketika kontainernya sekaligus menjadi <main> halamannya atau sebuah <section>.

Sebuah elemen main

Tata letak sama, markah benar.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Sebuah elemen main'),
  text({ tone: 'muted' }, 'Tata letak sama, markah benar.'),
)

Props

Prop	Tipe	Bawaan	Deskripsi
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Batas lebar mana yang diterapkan.
`width`	`string`	—	max-width mentah, menimpa size.
`gutter`	`Space`	`'md'`	Bantalan sebaris yang dijaga terhadap pinggir viewport.
`as`	`string`	`'div'`	Elemen yang dirender, misalnya main atau section.