import {SectionIntro} from '@primer/react-brand'
<section><SectionIntro><SectionIntro.Heading>Focus on solving bigger problems</SectionIntro.Heading><SectionIntro.Description>Spend less time creating boilerplate and repetitive code patterns, andmore time on what matters: building great software. Write a commentdescribing the logic you want and GitHub Copilot will immediately suggestcode to implement the solution.</SectionIntro.Description><SectionIntro.Link href="#">Explore docs</SectionIntro.Link></SectionIntro></section>
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, andmore time on what matters: building great software. Write a commentdescribing the logic you want and GitHub Copilot will immediately suggestcode to implement the solution.</SectionIntro.Description><SectionIntro.Link href="#">Explore docs</SectionIntro.Link></SectionIntro></section>
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 |
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
.
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.
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.