Skip to content

Section

A semantic <section> with a space preset for vertical padding. Pairs naturally with Container to compose evenly-spaced page sections without bespoke padding math.

stable
since v0.1.0
3.45 kB
primitive
layout

Preview

tsx

import { Container, Section, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Section paddingY="8" background="bg.subtle">
      <Container size="md">
        <Text>Section content</Text>
      </Container>
    </Section>
  );
}

Space presets

space controls the section’s vertical padding: sm, md (default), lg, xl. Use lg or xl for marketing pages; sm for compact tools.

Preview

tsx

import { Section, Stack, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Stack gap="2">
      {(['sm', 'md', 'lg', 'xl'] as const).map((space) => (
        <Section key={space} space={space} background="bg.subtle" borderRadius="md">
          <Text>
            <code>space="{space}"</code>
          </Text>
        </Section>
      ))}
    </Stack>
  );
}

Nesting with Container

The canonical composition is <Section><Container>...</Container></Section>: Section owns vertical rhythm, Container owns horizontal measure. Together they produce the standard “padded, centered” page section.

Preview

tsx

import { Container, Heading, Section, Stack, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Section space="lg" background="bg.subtle" borderRadius="md">
      <Container size="md">
        <Stack gap="3">
          <Heading level={2} size="lg" id="features">
            Features
          </Heading>
          <Text color="fg.muted">
            Section owns the vertical rhythm; Container caps the horizontal measure. Together they
            produce a padded, centred slab of content with no bespoke CSS.
          </Text>
        </Stack>
      </Container>
    </Section>
  );
}

API

PropTypeDefaultDescription

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last.

children

ReactNode

—

Section content.

space

"sm"|"md"|"lg"|"xl"

"md"

Vertical padding preset — `sm`, `md`, `lg`, or `xl` — driving the band's top/bottom rhythm.

padding

Responsive<SpaceToken>

—

Padding on all four sides. Token from the spacing scale.

paddingX

Responsive<SpaceToken>

—

Horizontal padding (left + right). Overrides `padding` on the X axis.

paddingY

Responsive<SpaceToken>

—

Vertical padding (top + bottom). Overrides `padding` on the Y axis.

paddingTop

Responsive<SpaceToken>

—

Padding on the top edge. Beats `padding` / `paddingY`.

paddingRight

Responsive<SpaceToken>

—

Padding on the right (inline-end in RTL) edge.

paddingBottom

Responsive<SpaceToken>

—

Padding on the bottom edge.

paddingLeft

Responsive<SpaceToken>

—

Padding on the left (inline-start in RTL) edge.

margin

Responsive<MarginValue>

—

Margin on all four sides. Accepts the spacing scale or `"auto"`.

marginX

Responsive<MarginValue>

—

Horizontal margin (left + right). Use `"auto"` to centre.

marginY

Responsive<MarginValue>

—

Vertical margin (top + bottom).

marginTop

Responsive<MarginValue>

—

Margin on the top edge.

marginRight

Responsive<MarginValue>

—

Margin on the right edge.

marginBottom

Responsive<MarginValue>

—

Margin on the bottom edge.

marginLeft

Responsive<MarginValue>

—

Margin on the left edge.

width

Responsive<SizeValue>

—

Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.

height

Responsive<SizeValue>

—

Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.

minWidth

Responsive<SizeValue>

—

Minimum width — useful for preventing flex children from collapsing.

maxWidth

Responsive<SizeValue>

—

Maximum width — `"prose"` caps to a comfortable reading measure.

minHeight

Responsive<SizeValue>

—

Minimum height.

maxHeight

Responsive<SizeValue>

—

Maximum height.

background

Responsive<ColorToken>

—

Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.

color

Responsive<ColorToken>

—

Text colour. Inherits unless set.

borderColor

Responsive<ColorToken>

—

Border colour. Pair with `borderWidth` to make the border visible.

borderWidth

Responsive<BorderWidth>

—

Border thickness in scale steps.

borderStyle

Responsive<BorderStyle>

—

Border line style.

borderRadius

Responsive<RadiusToken>

—

Corner rounding token.

boxShadow

Responsive<ShadowToken>

—

Drop-shadow token from the elevation scale.

opacity

Responsive<number | `${number}`>

—

Opacity 0–1. Use sparingly — prefer surface tokens over translucency.

overflow

Responsive<Overflow>

—

How content that exceeds the box is handled.

overflowX

Responsive<Overflow>

—

Horizontal-axis overflow control. Overrides `overflow` for the X axis.

overflowY

Responsive<Overflow>

—

Vertical-axis overflow control.

display

Responsive<Display>

—

CSS `display` value. `"contents"` removes the element's box from layout.

position

Responsive<Position>

—

CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.

top

Responsive<InsetValue>

—

Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.

right

Responsive<InsetValue>

—

Right inset (when positioned).

bottom

Responsive<InsetValue>

—

Bottom inset (when positioned).

left

Responsive<InsetValue>

—

Left inset (when positioned).

zIndex

Responsive<ZIndexToken>

—

Stacking-context layer token (`"modal"`, `"tooltip"`, …).

gridColumn

Responsive<string>

—

Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).

gridRow

Responsive<string>

—

Grid-row shorthand.

gridArea

Responsive<string>

—

Named grid area.

flex

Responsive<"1" | "none" | "auto" | "initial" | (string & {})>

—

Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.

flexGrow

Responsive<number | `${number}`>

—

Grow factor inside a flex container.

flexShrink

Responsive<number | `${number}`>

—

Shrink factor inside a flex container.

flexBasis

Responsive<SizeValue | "content">

—

Initial main-axis size before grow/shrink.

alignSelf

Responsive<AlignSelf>

—

Override `align-items` for a single child.

justifySelf

Responsive<JustifySelf>

—

Override `justify-items` for a single child (grid).

order

Responsive<number | `${number}`>

—

Flex/grid child reorder index.

asChild

boolean

—

When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

as

ElementType

"section"

Rendered intrinsic element — restrict to landmark tags for accessibility.

ref

ForwardedRef<Element>

—

Recipes

Landing-page sections: <Section space="xl" aria-labelledby="cta-heading"><Container size="lg">...</Container></Section>.
Dashboard panels: <Section space="sm"> keeps panels visually distinct without inflating the page.
Alternate background colours per section via background="bg.subtle" to delineate without dividers.