Section

Use the section component to group related content together.

Experimental
Not reviewed for accessibility

The default Section wraps its content in a semantic <section> element and provides default paddings.

<Section>
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Default section</SectionIntro.Heading>
    <SectionIntro.Description>
      This content is wrapped in a Section component.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<Section>
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Default section</SectionIntro.Heading>
    <SectionIntro.Description>
      This content is wrapped in a Section component.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<Section paddingBlockStart="none" paddingBlockEnd="spacious">
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Custom paddings</SectionIntro.Heading>
    <SectionIntro.Description>
      This section has a custom padding at the top and bottom.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<Section paddingBlockStart="none" paddingBlockEnd="spacious">
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Custom paddings</SectionIntro.Heading>
    <SectionIntro.Description>
      This section has a custom padding at the top and bottom.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<Section backgroundColor="subtle">
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Predefined background</SectionIntro.Heading>
    <SectionIntro.Description>
      This section has a predefined background color.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<Section backgroundColor="subtle">
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Predefined background</SectionIntro.Heading>
    <SectionIntro.Description>
      This section has a predefined background color.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<Section backgroundColor="#FFF8F8">
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Custom background</SectionIntro.Heading>
    <SectionIntro.Description>
      This section uses a custom background color.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<Section backgroundColor="#FFF8F8">
  <SectionIntro align="center">
    <SectionIntro.Heading size="3">Custom background</SectionIntro.Heading>
    <SectionIntro.Description>
      This section uses a custom background color.
    </SectionIntro.Description>
  </SectionIntro>
</Section>

<ThemeProvider colorMode="dark">
  <Section
    backgroundImageSrc="https://github.com/user-attachments/assets/068634a3-926d-49b8-b949-0b1e2a204651"
    backgroundImageSize="cover"
    backgroundImagePosition="top center"
  >
    <SectionIntro align="center">
      <SectionIntro.Heading size="3">Section</SectionIntro.Heading>
      <SectionIntro.Description>
        This section has a custom background image.
      </SectionIntro.Description>
    </SectionIntro>
  </Section>
</ThemeProvider>

<ThemeProvider colorMode="dark">
  <Section
    backgroundImageSrc="https://github.com/user-attachments/assets/068634a3-926d-49b8-b949-0b1e2a204651"
    backgroundImageSize="cover"
    backgroundImagePosition="top center"
  >
    <SectionIntro align="center">
      <SectionIntro.Heading size="3">Section</SectionIntro.Heading>
      <SectionIntro.Description>
        This section has a custom background image.
      </SectionIntro.Description>
    </SectionIntro>
  </Section>
</ThemeProvider>

<ThemeProvider colorMode="dark">
  <Section
    paddingBlockStart="spacious"
    paddingBlockEnd="spacious"
    backgroundColor="default"
    backgroundImageSrc={[
      'https://github.com/user-attachments/assets/a7340dea-2076-42da-87a9-057f953beb83',
      'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
    ]}
    backgroundImagePosition={['bottom -1px center', 'center']}
    backgroundImageSize={['auto', 'cover']}
  >
    <SectionIntro align="center">
      <SectionIntro.Heading size="3" size="3">
        Multiple background images
      </SectionIntro.Heading>
    </SectionIntro>
  </Section>
  <Section backgroundColor="default">
    <SectionIntro align="center">
      <SectionIntro.Heading size="4">Another section</SectionIntro.Heading>
    </SectionIntro>
  </Section>
</ThemeProvider>

<ThemeProvider colorMode="dark">
  <Section
    paddingBlockStart="spacious"
    paddingBlockEnd="spacious"
    backgroundColor="default"
    backgroundImageSrc={[
      'https://github.com/user-attachments/assets/a7340dea-2076-42da-87a9-057f953beb83',
      'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
    ]}
    backgroundImagePosition={['bottom -1px center', 'center']}
    backgroundImageSize={['auto', 'cover']}
  >
    <SectionIntro align="center">
      <SectionIntro.Heading size="3" size="3">
        Multiple background images
      </SectionIntro.Heading>
    </SectionIntro>
  </Section>
  <Section backgroundColor="default">
    <SectionIntro align="center">
      <SectionIntro.Heading size="4">Another section</SectionIntro.Heading>
    </SectionIntro>
  </Section>
</ThemeProvider>

<ThemeProvider colorMode="dark">
    <Section backgroundColor="default"></Section>
  </ThemeProvider>
  <Section backgroundColor="default" rounded>
    <SectionIntro align="center">
      <SectionIntro.Heading size="3">Rounded corners</SectionIntro.Heading>
        <SectionIntro.Description>
          This section has rounded top corners that overlap the previous section.
        </SectionIntro.Description>
    </SectionIntro>
  </Section>

<ThemeProvider colorMode="dark">
    <Section backgroundColor="default"></Section>
  </ThemeProvider>
  <Section backgroundColor="default" rounded>
    <SectionIntro align="center">
      <SectionIntro.Heading size="3">Rounded corners</SectionIntro.Heading>
        <SectionIntro.Description>
          This section has rounded top corners that overlap the previous section.
        </SectionIntro.Description>
    </SectionIntro>
  </Section>

Component props

name	type	default	required	description
`paddingBlockStart`	`'none'`, `'condensed'`, `'normal'`, `'spacious'` `ResponsiveMap`	`'normal'`	`false`	Control the padding at the top of the section.
`paddingBlockEnd`	`'none'`, `'condensed'`, `'normal'`, `'spacious'` `ResponsiveMap`	`'normal'`	`false`	Control the padding at the bottom of the section.
`backgroundColor`	`'default'`, `'subtle'` \| `string` `ResponsiveMap`		`false`	Add a background color. Use a predefined color, a CSS custom property, or a custom color value.
`backgroundImageSrc`	`string` \| `string[]` `ResponsiveMap`		`false`	Add one or more background images.
`backgroundImageSize`	`string` \| `string[]` `ResponsiveMap`	`'cover'`	`false`	Control the size of the background image(s). This accepts all CSS `background-size` supported values, including keywords like `contain`.
`backgroundImagePosition`	`string` \| `string[]` `ResponsiveMap`	`'50%`	`false`	Control the position of the background image(s). This accepts all CSS `background-position` supported values, including keywords like `top` and edge offsets.

name

type

default

required

description

paddingBlockStart

'none', 'condensed', 'normal', 'spacious' ResponsiveMap

'normal'

false

Control the padding at the top of the section.

paddingBlockEnd

'none', 'condensed', 'normal', 'spacious' ResponsiveMap

'normal'

false

Control the padding at the bottom of the section.

backgroundColor

'default', 'subtle' | string ResponsiveMap

false

Add a background color. Use a predefined color, a CSS custom property, or a custom color value.

backgroundImageSrc

string | string[] ResponsiveMap

false

Add one or more background images.

backgroundImageSize

string | string[] ResponsiveMap

'cover'

false

Control the size of the background image(s). This accepts all CSS background-size supported values, including keywords like contain.

backgroundImagePosition

string | string[] ResponsiveMap

'50%

false

Control the position of the background image(s). This accepts all CSS background-position supported values, including keywords like top and edge offsets.

Primer Design System

Site navigation

On this page

Section

Examples

Default

With indepenedent block paddings

With predefined background color

With custom background color

With background image

With multiple background images

With rounded corners

Component props

Section