@primer/react-brand/docs/components/SectionIntro/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Section intro
description: Use the section intro component to provide a title, optional description and link to a new section in the page.
keywords: ['heading', 'intro', 'section']
ready: true
figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=3891%3A17104&t=j6zvLXblgsO36Wmu-11
source: https://github.com/primer/brand/blob/main/packages/react/src/SectionIntro/SectionIntro.tsx
storybook: '/brand/storybook/?path=/story/components-sectionintro--playground'
---

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

## Examples

### Default

```jsx
<section>
  <SectionIntro>
    <SectionIntro.Label>Label</SectionIntro.Label>
    <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`.

```jsx
<section>
  <SectionIntro align="center">
    <SectionIntro.Label>Label</SectionIntro.Label>
    <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                                     |
| `fullWidth` | `boolean`                  |             | `false`  | Fills available space                                         |

### SectionIntro.Label

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

| name             | type                 | default   | required | description                                  |
| ---------------- | -------------------- | --------- | -------- | -------------------------------------------- |
| `children`       | `ReactNode`          |           | `true`   | Content to be displayed inside the label     |
| `animate`        | `boolean`            | `false`   | `false`  | Enables the cursor animation                 |
| `animationDelay` | `number`             | `1000`    | `false`  | Delay before the cursor animation starts     |
| `variant`        | `'default', 'muted'` | `'muted'` | `false`  | Specify alternative text appearance          |
| `className`      | `string`             |           | `false`  | Sets a custom class on the root of the label |
| `id`             | `string`             |           | `false`  | Sets a custom id on the root of the label    |
| `ref`            | `React.RefObject`    |           | `false`  | Forward a Ref to the underlying DOM node     |

### 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](../../typography/Heading/index.md), 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.