@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
227 lines (185 loc) • 13.7 kB
Markdown
---
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'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'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 |