SectionIntro

Use SectionIntro to provide a title, optional description and link to a new section in the page.
  • Experimental
  • Not reviewed for accessibility
import {SectionIntro} from '@primer/react-brand'

Examples

Default

Alignment

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

Component props

SectionIntro Required

nametypedefaultrequireddescription
childrenReactNode, ReactNode[]undefinedtrueContent to include within the section intro component
alignstart, centerstarttrueThe layout applied to the content wihin the section component
classNamestringfalseSectionIntro custom class

SectionIntro.Heading Required

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

nametypedefaultrequireddescription
classNamestringfalseCustom class name for the heading component
childrenReactNode, ReactNode[]undefinedtrueContent 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.

nametypedefaultrequireddescription
childrenReactNode, ReactNode[]undefinedtrueContent to be displayed inside the section intro component

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

Optional node that can be used to provide a link.

nametypedefaultrequireddescription
classNamestringundefinedfalseSets a custom class on the root element

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