Layout

Section

Full-width bands in the three jsonresume.org surfaces: white, light gray and brand yellow.

import { Section } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Tones

brand

subtle

Feature rows and page headers.

page

section/tones.tsx

import { Container, Heading, Section, Text } from '@jsonresume/ui';

export default function SectionTones() {
  return (
    <>
      <Section tone="brand" spacing="sm">
        <Container>
          <Heading level={3}>brand</Heading>
        </Container>
      </Section>
      <Section tone="subtle" spacing="sm">
        <Container>
          <Heading level={3}>subtle</Heading>
          <Text tone="muted">Feature rows and page headers.</Text>
        </Container>
      </Section>
      <Section tone="page" spacing="sm">
        <Container>
          <Heading level={3}>page</Heading>
        </Container>
      </Section>
    </>
  );
}

Usage

Do

Alternate page and subtle bands to group content.
Keep brand yellow for the top of the page.

Don’t

Stack two yellow bands.
Use inverse bands for long text.

Accessibility

Renders a <section>; give it an accessible name with aria-labelledby when it has a heading.

Props

Also accepts the attributes of the element Section renders.
Prop	Type	Default	Description
asChild	boolean	–	Render as the single child element instead of a <div>.
spacing	nonesmmdlgxl	md	Style variant.
tone	brandpagesubtleinverse	page	Style variant.