Section intro stacked

Ready to use


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

Examples

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

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.

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, including as, size, and weight.

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.

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

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

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

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.

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, including as, size, and weight. Defaults to as="h3".

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