SectionIntro

Use SectionIntro to provide a title, optional description and link to a new section in the page.

Experimental
Not reviewed for accessibility

On this page

import {SectionIntro} from '@primer/react-brand'

Examples

Default

<section>
  <SectionIntro>
    <SectionIntro.Heading>
      Focus on solving bigger problems
    </SectionIntro.Heading>
    <SectionIntro.Description>
      Spend less time creating boilerplate and repetitive code patterns, and
      more time on what matters: building great software. Write a comment
      describing the logic you want and GitHub Copilot will immediately suggest
      code to implement the solution.
    </SectionIntro.Description>
    <SectionIntro.Link href="#">Explore docs</SectionIntro.Link>
  </SectionIntro>
</section>

<section>
  <SectionIntro>
    <SectionIntro.Heading>
      Focus on solving bigger problems
    </SectionIntro.Heading>
    <SectionIntro.Description>
      Spend less time creating boilerplate and repetitive code patterns, and
      more time on what matters: building great software. Write a comment
      describing the logic you want and GitHub Copilot will immediately suggest
      code to implement the solution.
    </SectionIntro.Description>
    <SectionIntro.Link href="#">Explore docs</SectionIntro.Link>
  </SectionIntro>
</section>

Alignment

The content alignment can be changed using the align prop on the root SectionIntro. This can be configured to either start or center.

<section>
  <SectionIntro align="center">
    <SectionIntro.Heading>
      Focus on solving bigger problems
    </SectionIntro.Heading>
    <SectionIntro.Description>
      Spend less time creating boilerplate and repetitive code patterns, and
      more time on what matters: building great software. Write a comment
      describing the logic you want and GitHub Copilot will immediately suggest
      code to implement the solution.
    </SectionIntro.Description>
    <SectionIntro.Link href="#">Explore docs</SectionIntro.Link>
  </SectionIntro>
</section>

<section>
  <SectionIntro align="center">
    <SectionIntro.Heading>
      Focus on solving bigger problems
    </SectionIntro.Heading>
    <SectionIntro.Description>
      Spend less time creating boilerplate and repetitive code patterns, and
      more time on what matters: building great software. Write a comment
      describing the logic you want and GitHub Copilot will immediately suggest
      code to implement the solution.
    </SectionIntro.Description>
    <SectionIntro.Link href="#">Explore docs</SectionIntro.Link>
  </SectionIntro>
</section>

Component props

SectionIntro Required

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to include within the section intro component
`align`	`start`, `center`	`start`	`true`	The layout applied to the content wihin the section component
`className`	`string`		`false`	SectionIntro custom class

SectionIntro.Heading Required

Required node that is used to provide a heading for the section.

name	type	default	required	description
`className`	`string`		`false`	Custom class name for the heading component
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to be displayed inside the heading component.

Forwards all props from the Heading component, including as, size, and weight.

SectionIntro.Description

Optional node that can be used to provide a description for the section.

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to be displayed inside the section intro component

id, className and ref are forwarded by default to all children.

SectionIntro.Link

Optional node that can be used to provide a link.

name	type	default	required	description
`className`	`string`	`undefined`	`false`	Sets a custom class on the root element

id, className and ref are forwarded by default to all children.