Section

When to useLink to "When to use"

• The parts of a landing page: hero, features, pricing, a call to action, each its own band.
• Alternating backgrounds on a long documentation page, to group related content.

Use something else when:

• you only need the page column, with no background or vertical rhythm: Container
• you want a bordered box inside the column: Card
• you are building an app frame with a side navigation: AppShell

UsageLink to "Usage"

import { Heading, Section, SiteFooter, SiteHeader } from "@arshad-shah/cynosure";

<SiteHeader brand="Acme" nav={nav} />
<main id="main">
  <Section as="header">…hero…</Section>
  <Section variant="soft" id="features" aria-labelledby="features-heading">
    <Heading id="features-heading">Features</Heading>
  </Section>
  <Section variant="accent" size="md">…</Section>
</main>
<SiteFooter columns={columns} />

Width and full bleedLink to "Width and full bleed"

A Section fills its parent's width. For bands from edge to edge of the window, place Sections at the top level of the page (or directly in main), not inside a Container: each brings its own Container for the content. size sets that column's width; contained={false} drops it.

PaddingLink to "Padding"

paddingBlock takes a space token. The default is the --cy-section-padding-block token, twice space 10.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

Section has no keyboard behaviour of its own.

• Landmarks: a section is a region landmark only when it has a name: pass aria-labelledby with the id of its heading. as="aside" is a complementary landmark. role, aria-label and id are set on the root.
• In-page links: id makes the Section the target of a link such as #pricing.
• Colours: text keeps the ink colour on every variant. In forced-colours mode, bands with a background get a line above and below instead.
• Nesting: a nested Section gets its own default padding.

TouchLink to "Touch"

Nothing pressable of its own; what you put in keeps its own hit areas.

ThemingLink to "Theming"

createTheme({ components: { section: { paddingBlock: "6rem" } } });

RelatedLink to "Related"

Container · SiteHeader · SiteFooter · PageHeader · Card