---
title: Section intro stacked
description: Use this section intro component to provide a heading, link and itemized content in a stacked layout.
keywords: ['heading', 'intro', 'section']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/SectionIntroStacked/SectionIntroStacked.tsx
storybook: '/brand/storybook/?path=/story/components-sectionintrostacked--playground'
---

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

## Examples

### Default

```jsx
<section>
  <SectionIntroStacked>
    <SectionIntroStacked.Heading>
      <b>Over 90% of Fortune 100 companies and more than 150 million developers rely on GitHub</b> to deliver scalable,
      reliable, and secure solutions for teams of all sizes.
    </SectionIntroStacked.Heading>
    <SectionIntroStacked.Link href="#">Explore GitHub</SectionIntroStacked.Link>
    <SectionIntroStacked.Items>
      <SectionIntroStacked.Item>
        <b>Designed for developers</b>, GitHub offers seamless collaboration tools that make teamwork smarter, faster,
        and more secure.
      </SectionIntroStacked.Item>
      <SectionIntroStacked.Item>
        <b>Leverage GitHub Copilot to automate tasks</b>, and enhance productivity with smart, context-aware code
        suggestions.
      </SectionIntroStacked.Item>
      <SectionIntroStacked.Item>
        <b>GitHub Enterprise scales with your organization</b>, delivering the performance and security needed for teams
        of any size.
      </SectionIntroStacked.Item>
    </SectionIntroStacked.Items>
  </SectionIntroStacked>
</section>
```

### With icon items

```jsx
<section>
  <SectionIntroStacked>
    <SectionIntroStacked.Heading>Unlock a passion for learning with GitHub.</SectionIntroStacked.Heading>
    <SectionIntroStacked.Description>
      Elevate your lessons with GitHub&#39;s advanced tools and provide students access to current industry practices.
    </SectionIntroStacked.Description>
    <SectionIntroStacked.Link href="#">Sign up now</SectionIntroStacked.Link>
    <SectionIntroStacked.Items>
      <SectionIntroStacked.Item>
        <SectionIntroStacked.ItemIcon icon={CpuIcon} />
        <SectionIntroStacked.ItemHeading>Enhance your technical curriculum</SectionIntroStacked.ItemHeading>
        <SectionIntroStacked.ItemDescription>
          Elevate your lessons with GitHub's advanced tools and provide students access to current industry practices.
        </SectionIntroStacked.ItemDescription>
      </SectionIntroStacked.Item>
      <SectionIntroStacked.Item>
        <SectionIntroStacked.ItemIcon icon={LightBulbIcon} />
        <SectionIntroStacked.ItemHeading>Reinvigorate your teaching methods</SectionIntroStacked.ItemHeading>
        <SectionIntroStacked.ItemDescription>
          Use GitHub Classroom to automate feedback and manage coursework, which can make your sessions more dynamic and
          interactive.
        </SectionIntroStacked.ItemDescription>
      </SectionIntroStacked.Item>
      <SectionIntroStacked.Item>
        <SectionIntroStacked.ItemIcon icon={HeartIcon} />
        <SectionIntroStacked.ItemHeading>Boost collaboration across campus</SectionIntroStacked.ItemHeading>
        <SectionIntroStacked.ItemDescription>
          Make it easier for students and educators to collaborate on projects and assignments.
        </SectionIntroStacked.ItemDescription>
      </SectionIntroStacked.Item>
    </SectionIntroStacked.Items>
  </SectionIntroStacked>
</section>
```

### GridLine variant

Use `variant="gridline"` to apply an alternative visual style with horizontal and vertical borders.

```jsx
<section>
  <SectionIntroStacked variant="gridline">
    <SectionIntroStacked.Heading>Unlock a passion for learning with GitHub.</SectionIntroStacked.Heading>
    <SectionIntroStacked.Description>
      Elevate your lessons with GitHub&#39;s advanced tools and provide students access to current industry practices.
    </SectionIntroStacked.Description>
    <SectionIntroStacked.Link href="#">Sign up now</SectionIntroStacked.Link>
    <SectionIntroStacked.Items>
      <SectionIntroStacked.Item>
        <SectionIntroStacked.ItemIcon icon={CpuIcon} />
        <SectionIntroStacked.ItemHeading>Enhance your technical curriculum</SectionIntroStacked.ItemHeading>
        <SectionIntroStacked.ItemDescription>
          Elevate your lessons with GitHub's advanced tools and provide students access to current industry practices.
        </SectionIntroStacked.ItemDescription>
      </SectionIntroStacked.Item>
      <SectionIntroStacked.Item>
        <SectionIntroStacked.ItemIcon icon={LightBulbIcon} />
        <SectionIntroStacked.ItemHeading>Reinvigorate your teaching methods</SectionIntroStacked.ItemHeading>
        <SectionIntroStacked.ItemDescription>
          Use GitHub Classroom to automate feedback and manage coursework, which can make your sessions more dynamic and
          interactive.
        </SectionIntroStacked.ItemDescription>
      </SectionIntroStacked.Item>
      <SectionIntroStacked.Item>
        <SectionIntroStacked.ItemIcon icon={HeartIcon} />
        <SectionIntroStacked.ItemHeading>Boost collaboration across campus</SectionIntroStacked.ItemHeading>
        <SectionIntroStacked.ItemDescription>
          Make it easier for students and educators to collaborate on projects and assignments.
        </SectionIntroStacked.ItemDescription>
      </SectionIntroStacked.Item>
    </SectionIntroStacked.Items>
  </SectionIntroStacked>
</section>
```

## Component props

### SectionIntroStacked `Required`

| name        | type                       | default     | required | description                                           |
| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to include within the section intro component |
| `variant`   | `'default'`, `'gridline'`  | `'default'` | `false`  | Sets the visual variant of the component.             |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element               |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                  |
| `animate`   | `AnimateProps`             |             | `false`  | Animation configuration for the component             |

Forwards all standard HTML attributes for `<header>` elements.

### SectionIntroStacked.Heading `Required`

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

| name        | type                       | default     | required | description                                           |
| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the heading component. |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element               |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                  |
| `animate`   | `AnimateProps`             |             | `false`  | Animation configuration for the component             |

Forwards all props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`.

### SectionIntroStacked.Link

Optional node that can be used to provide a link.

| name        | type                       | default     | required | description                             |
| ----------- | -------------------------- | ----------- | -------- | --------------------------------------- |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the link |
| `href`      | `string`                   | `undefined` | `true`   | The URL that the link points to         |
| `variant`   | `default`, `accent`        | `accent`    | `false`  | Visual style variant for the link       |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element    |

Forwards most props from the Link component, but with a default `size` of `medium`.

### SectionIntroStacked.Description

Optional node that can be used to provide a short description.

| name        | type                       | default     | required | description                                    |
| ----------- | -------------------------- | ----------- | -------- | ---------------------------------------------- |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the description |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element        |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element           |

### SectionIntroStacked.Items `Required`

Container for a list of items.

| name        | type                       | default     | required | description                               |
| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------- |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | `SectionIntroStacked.Item` components     |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element   |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element      |
| `animate`   | `AnimateProps`             |             | `false`  | Animation configuration for the component |

### SectionIntroStacked.Item `Required`

Individual item within the items list.

| name        | type                       | default     | required | description                                                                                                                                                                                                                            |
| ----------- | -------------------------- | ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the item. Accepts plain text with optional `<b>` or `<em>` for emphasis, or `SectionIntroStacked.ItemIcon`, `SectionIntroStacked.ItemHeading`, and `SectionIntroStacked.ItemDescription` sub-components |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element                                                                                                                                                                                                |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                                                                                                                                                                                                   |

### SectionIntroStacked.ItemIcon

Optional icon displayed alongside item content.

| name        | type     | default     | required | description                             |
| ----------- | -------- | ----------- | -------- | --------------------------------------- |
| `icon`      | `Icon`   | `undefined` | `true`   | The Octicon icon component to display   |
| `color`     | `string` | `green`     | `false`  | Color variant for the icon background   |
| `className` | `string` |             | `false`  | Sets a custom class on the root element |

Forwards all props from the [Icon component](../Icon/index.md).

### SectionIntroStacked.ItemHeading

Optional heading for an item when using sub-components.

| name        | type                       | default     | required | description                                |
| ----------- | -------------------------- | ----------- | -------- | ------------------------------------------ |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the heading |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element    |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element       |

Forwards all props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`. Defaults to `as="h3"`.

### SectionIntroStacked.ItemDescription

Optional description for an item when using sub-components.

| name        | type                       | default     | required | description                                         |
| ----------- | -------------------------- | ----------- | -------- | --------------------------------------------------- |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the item description |
| `className` | `string`                   |             | `false`  | Sets a custom class on the root element             |
| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                |