import {Pillar} from '@primer/react-brand'Examples
Default
The default Pillar displays a heading and description.
Icon
You can add an icon to enhance the visual context. We recommend using an Octicon. The icon defaults to a green presentation and can be customized using the size and hasBackground props. For custom SVG artwork or logos, set hasBackground to false to render the icon without the shared square icon frame.
Image
You can add an image to enhance the visual context.
Border
You can add an optional border to create a visual boundary around the pillar content.
Link
You can add an external link to the Pillar using the Link component.
Align
The content alignment can be changed using the align prop on the root Pillar. This can be configured to either start or center.
Stacked Pillars
Use the Stack component to stack multiple Pillars horizontally or vertically.
Component props
Pillar
| name | type | default | required | description |
|---|---|---|---|---|
align | start, center | start | false | Aligns the pillar content |
as | 'div''article' | 'div' | false | The HTML element used to render the pillar. |
Pillar.Icon
| name | type | default | required | description |
|---|---|---|---|---|
icon | React.Node | true | Octicon | |
size | 'small', 'medium', 'large', 20, 24, 28, 32, 36, 40, 44 | 32 | false | The size of the icon |
hasBackground | boolean | true | false | Adds a filled colored background to the icon. Set to false for custom artwork that should not use the shared square icon frame. |
Supports the Icon component props, excluding color.
Pillar.Image
Forwards all the props from the Image component, including src, alt, and aspectRatio.
Pillar.Heading
| name | type | default | required | description |
|---|---|---|---|---|
as | h2, h3, h4, h5, h6 | h3 | false | |
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 the props from the Heading component, including as, size, and weight.
Pillar.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 pillar component |
id, className and ref are forwarded by default to all children.
Pillar.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 |
href | string | true | Local identifier for the anchored element |
id, className and ref are forwarded by default to all children.