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

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

---
title: Pillar
description: Use the pillar component to group related content together.
keywords: ['feature', 'benefit', 'icon']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Pillar/Pillar.tsx
storybook: '/brand/storybook/?path=/story/components-pillar--playground'
figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=6849-31364&mode=design
---

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

## Examples

### Default

The default Pillar displays a heading and description.

```jsx
<Pillar>
  <Pillar.Heading>Collaboration is the key to DevOps success</Pillar.Heading>
  <Pillar.Description>Everything you need to know about getting started with GitHub Actions.</Pillar.Description>
</Pillar>
```

### Icon

You can add an `icon` to enhance the visual context. We recommend using an [Octicon](https://primer.style/design/foundations/icons). 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.

```jsx
<Pillar>
  <Pillar.Icon icon={<CopilotIcon />} />
  <Pillar.Heading>Code search & code view</Pillar.Heading>
  <Pillar.Description>
    Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
  </Pillar.Description>
</Pillar>
```

### Image

You can add an image to enhance the visual context.

```jsx
<Pillar>
  <Pillar.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
  <Pillar.Heading>Code search & code view</Pillar.Heading>
  <Pillar.Description>
    Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
  </Pillar.Description>
</Pillar>
```

### Full width

Use the `fullWidth` prop to allow the Pillar to fill the width of its parent container. By default, pillar width is constrained.

```jsx
<Pillar fullWidth>
  <Pillar.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
  <Pillar.Heading>Code search & code view</Pillar.Heading>
  <Pillar.Description>
    Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
  </Pillar.Description>
</Pillar>
```

### Link

You can add an external link to the Pillar using the `Link` component.

```jsx
<Pillar>
  <Pillar.Heading>Code search & code view</Pillar.Heading>
  <Pillar.Description>
    Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
  </Pillar.Description>
  <Pillar.Link href="https://github.com">Learn more</Pillar.Link>
</Pillar>
```

### Align

The content alignment can be changed using the `align` prop on the root `Pillar`. This can be configured to either `start` or `center`.

```jsx
<Pillar align="center">
  <Pillar.Icon icon={<CopilotIcon />} />
  <Pillar.Heading>Code search & code view</Pillar.Heading>
  <Pillar.Description>
    Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
  </Pillar.Description>
</Pillar>
```

### Stacked Pillars

Use the `Stack` component to stack multiple Pillars horizontally or vertically.

```jsx
<Stack direction="horizontal" alignItems="center" justifyContent="center" gap="normal">
  <Pillar>
    <Pillar.Icon icon={<CopilotIcon />} />
    <Pillar.Heading>Heading</Pillar.Heading>
    <Pillar.Description>Everything you need to know about getting started with GitHub Actions.</Pillar.Description>
  </Pillar>
  <Pillar>
    <Pillar.Icon icon={<RocketIcon />} />
    <Pillar.Heading>Heading</Pillar.Heading>
    <Pillar.Description>Everything you need to know about getting started with GitHub Actions.</Pillar.Description>
  </Pillar>
  <Pillar>
    <Pillar.Icon icon={<GitBranchIcon />} />
    <Pillar.Heading>Heading</Pillar.Heading>
    <Pillar.Description>Everything you need to know about getting started with GitHub Actions.</Pillar.Description>
  </Pillar>
</Stack>
```

## 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.                  |
| `fullWidth` | `boolean`            | `false` | `false`  | Allows the pillar to fill the width of its parent container. |

### Pillar.Icon

| name            | type                                 | default | required | description                                                                                                                       |
| --------------- | ------------------------------------ | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `icon`          | `React.Node`                         |         | `true`   | Octicon                                                                                                                           |
| `size`          | `namedIconSizes \| numericIconSizes` | `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](../Icon/index.md) props, excluding `color`.

### Pillar.Image

Forwards all the props from the [Image component](../Image/index.md), 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](../../typography/Heading/index.md), 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.