@primer/react-brand 0.69.1-rc.9dc041db → 0.70.0-rc.4599efb5

package/docs/components/Bento/index.md

@@ -0,0 +1,223 @@
+---
+title: Bento
+description: Use the bento to present content in a responsive grid layout.
+keywords: ['grid', 'layout', 'responsive', 'container', 'masonry']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/Bento/Bento.tsx
+storybook: '/brand/storybook/?path=/story/components-bento--default'
+a11yReviewed: true
+---
+
+> This component is deprecated and will be removed in a future release. Use CTA banner or River instead.
+
+```js
+import {Bento} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
+  <Bento>
+    <Bento.Item />
+    <Bento.Item />
+    <Bento.Item />
+  </Bento>
+</Box>
+```
+
+### Example layout
+
+```jsx
+<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
+  <Bento>
+    <Bento.Item columnSpan={12} rowSpan={2} />
+    <Bento.Item columnSpan={7} rowSpan={2} />
+    <Bento.Item columnSpan={5} rowSpan={2} />
+    <Bento.Item columnSpan={12} rowSpan={2} />
+  </Bento>
+</Box>
+```
+
+### Dark mode items
+
+```jsx
+<Bento>
+  <Bento.Item columnSpan={7} rowSpan={2} colorMode="dark" />
+  <Bento.Item columnSpan={5} rowSpan={2} colorMode="dark" />
+  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
+  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
+</Bento>
+```
+
+### Responsive behavior
+
+Use `columnSpan`, `rowSpan`, `columnStart`, `rowStart`, `flow`, `verticalAlign`, `horizontalAlign` with an `Object` of breakpoint-specific keys and values corresponding to each type to enable responsive behavior for each of these properties.
+Breakpoints use `min-width`, where it will also apply your chosen `span` value to all larger breakpoints.
+
+> Bento items can render in a different source order to what is presented visually. It's important to ensure that the
+> content of each item is self-contained and can be read independently of its adjacent items.
+
+```jsx
+<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
+  <Bento>
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        small: 6,
+        large: 3,
+      }}
+      rowSpan={{
+        xsmall: 4,
+        large: 4,
+      }}
+    />
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        small: 6,
+        large: 3,
+      }}
+      rowSpan={{
+        xsmall: 4,
+        large: 2,
+      }}
+    />
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        small: 6,
+        large: 6,
+      }}
+      rowSpan={{
+        xsmall: 4,
+        large: 4,
+      }}
+    />
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        small: 6,
+        large: 3,
+      }}
+      rowSpan={{
+        xsmall: 4,
+        large: 3,
+      }}
+      rowStart={{
+        large: 5,
+      }}
+    />
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        small: 6,
+        large: 3,
+      }}
+      rowSpan={{
+        xsmall: 4,
+        large: 5,
+      }}
+    />
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        small: 6,
+        large: 6,
+      }}
+      rowSpan={{
+        xsmall: 4,
+        large: 3,
+      }}
+    />
+  </Bento>
+</Box>
+```
+
+#### Responsive flow
+
+```jsx
+<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
+  <Bento>
+    <Bento.Item
+      flow={{
+        xsmall: 'row',
+        small: 'row',
+        medium: 'column',
+      }}
+    >
+      <Bento.Content padding="normal">
+        <Bento.Heading as="h3">Heading</Bento.Heading>
+        <Link href="#">Call to action</Link>
+      </Bento.Content>
+      <Bento.Visual>
+        <img alt="placeholder, blank area with an gray background color" src="/images/placeholder.png" />
+      </Bento.Visual>
+    </Bento.Item>
+  </Bento>
+</Box>
+```
+
+## Component props
+
+### Bento
+
+| Name        | Type     | Default | Required | Description                             |
+| :---------- | :------- | :-----: | :------- | --------------------------------------- |
+| `className` | `string` |         | `false`  | Sets a custom class on the root element |
+
+The `Bento` component API supports all standard HTML attribute props for the interface `HTMLDivElement`.
+
+### Bento.Item
+
+| Name                 | Type                                                                                                             |  Default  | Required | Description                                                                                                                     |
+| :------------------- | :--------------------------------------------------------------------------------------------------------------- | :-------: | :------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `className`          | `string`                                                                                                         |           | `false`  | Sets a custom class on the root element                                                                                         |
+| `children`           | `React.ReactNode[]`                                                                                              |           | `false`  | The children to be rendered within the `Bento.Item`                                                                             |
+| `columnStart`        | `'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9' \| '10' \| '11' \| '12' \| 'ResponsiveColumnIndex'` |           | `false`  | The column number in which this content should start                                                                            |
+| `columnSpan`         | `'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9' \| '10' \| '11' \| '12' \| 'ResponsiveColumnIndex'` |           | `false`  | The number of columns this content should span                                                                                  |
+| `rowStart`           | `'number' \| 'ResponsiveRowIndex'`                                                                               |           | `false`  | The row number in which this content should start                                                                               |
+| `rowSpan`            | `'number' \| 'ResponsiveRowIndex'`                                                                               |           | `false`  | The number of rows this content should span                                                                                     |
+| `flow`               | `'"row"' \| '"column"' \| 'ResponsiveFlow'`                                                                      |           | `false`  | The flow of the `Bento.Content` and `Bento.Visual` within the `Bento.Item`                                                      |
+| `colorMode`          | `'"light"' \| '"dark"'`                                                                                          | `"light"` | `false`  | The color mode specified for this `Bento.Item`                                                                                  |
+| `visualAsBackground` | `boolean`                                                                                                        |  `false`  | `false`  | Determines if the `Bento.Visual` child element is set as the background for the `Bento.Item` with the `Bento.Content` overlayed |
+| `order`              | `'"default"' \| '"reversed"' \| 'ResponsiveOrder'`                                                               | `default` | `false`  | Determines the visual order for the `Bento.Item`. This changes the semantic ordering of elements for accessibility.             |
+
+The `Bento.Item` component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.
+
+### Bento.Content
+
+| Name              | Type                                                                 |   Default  | Required | Description                                                     |
+| :---------------- | :------------------------------------------------------------------- | :--------: | :------- | --------------------------------------------------------------- |
+| `className`       | `string`                                                             |            | `false`  | Sets a custom class on the root element                         |
+| `children`        | `React.ReactNode[]`                                                  |            | `false`  | The children to be rendered within the `Bento.Content`          |
+| `leadingVisual`   | `ReactElement`                                                       |            | `false`  | Sets the icon before the heading text                           |
+| `padding`         | `'"condensed"' \| '"normal"' \| '"spacious"' \| 'ResponsivePadding'` | `"normal"` | `false`  | Sets a custom class on the root element                         |
+| `horizontalAlign` | `'"start"' \| '"center"' \| '"end"' \| 'ResponsiveAlign'`            |  `"start"` | `false`  | The horizontal alignment of children within the `Bento.Content` |
+| `verticalAlign`   | `'"start"' \| '"center"' \| '"end"' \| 'ResponsiveAlign'`            |  `"start"` | `false`  | The vertical alignment of children within the `Bento.Content`.  |
+
+The `Bento.Content` component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.
+
+### Bento.Heading
+
+Required node that is used to provide a heading for the `Bento.Content`.
+
+| name        | type                       | default     | required | description                                           |
+| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |
+| `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 props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`.
+
+### Bento.Visual
+
+| Name        | Type                                                                 |   Default   | Required | Description                                                                                              |
+| :---------- | :------------------------------------------------------------------- | :---------: | :------- | -------------------------------------------------------------------------------------------------------- |
+| `className` | `string`                                                             |             | `false`  | Sets a custom class on the root element                                                                  |
+| `fillMedia` | `boolean`                                                            |    `true`   | `false`  | Determines how the visual reacts within its container. Either filling the container or contained within. |
+| `position`  | `string`                                                             | `"50% 50%"` | `false`  | The positioning of the visual.                                                                           |
+| `padding`   | `'"condensed"' \| '"normal"' \| '"spacious"' \| 'ResponsivePadding'` |             | `false`  | Sets a custom class on the root element                                                                  |
+
+The `Bento.Visual` component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.

package/docs/components/Breadcrumbs/index.md

@@ -0,0 +1,51 @@
+---
+title: Breadcrumbs
+description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.
+keywords: ['navigation']
+---
+
+## Anatomy
+
+## Usage
+
+Use breadcrumbs to display a user's path within a site's hierarchy, helping them understand their location and easily navigate back to higher-level pages, especially on sites with deep structures.
+
+Breadcrumbs are most appropriate on pages that:
+
+- Are missing section-level navigation elements E.g. [SubNav](../SubNav/index.md)
+- Need to surface contextually-relevant content through its parent page(s)
+
+### Placement
+
+Place breadcrumbs at the top of the page, below the header and any navigation bar, to ensure they are immediately visible and accessible to users as they begin navigating the page.
+
+Align breadcrumbs with the main content area to maintain a consistent and orderly layout, helping users easily associate the breadcrumbs with the content they are navigating.
+
+Use consistent placement across all pages of the site so that users can rely on breadcrumbs as a stable navigation tool.
+
+## Accessibility
+
+Ensure that the text of each individual Breadcrumb item fits entirely within a 320px wide viewport. Failure to do this violates [WCAG 1.4.10 Reflow](https://github.com/github/accessibility-audit-guide/blob/main/web/WCAG/1.4.10%20Reflow.md).
+
+**✅ Do**
+
+_Use short Breadcrumb item names to ensure they fit within a 320px wide viewport._
+
+**❌ Don't**
+
+_Don't allow Breadcrumb item names to overflow the 320px wide viewport, as this violates WCAG 1.4.10 Reflow\._
+
+## Options
+
+### Variants
+
+The breadcrumbs component is available in two variants:
+
+- The default variant uses the standard text color, positioning the navigation as a secondary element on the page. This is suitable for most scenarios.
+- The accent variant emphasizes parent links with an accent color. This variant should should be reserved for pages where the breadcrumbs are essential for navigation.
+
+## Related components
+
+- [Anchor nav](../AnchorNav/index.md): To display navigation for different sections of a page.
+- [Pagination](../Pagination/index.md): To display navigation for content that is split into sequential pages.
+- [Sub nav](../SubNav/index.md): To display the secondary navigation of a site.

package/docs/components/Breadcrumbs/react.md

@@ -0,0 +1,53 @@
+---
+title: Breadcrumbs
+description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.
+keywords: ['navigation']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+storybook: '/brand/storybook/?path=/story/components-breadcrumbs--playground'
+---
+
+```js
+import {Breadcrumbs} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<Breadcrumbs>
+  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot/chat" selected>
+    Chat
+  </Breadcrumbs.Item>
+</Breadcrumbs>
+```
+
+### Accent
+
+```jsx
+<Breadcrumbs variant="accent">
+  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot/chat" selected>
+    Chat
+  </Breadcrumbs.Item>
+</Breadcrumbs>
+```
+
+## Component props
+
+### Breadcrumbs `Required`
+
+| name      | type                 | default | required | description                               |
+| --------- | -------------------- | ------- | -------- | ----------------------------------------- |
+| `variant` | `BreadcrumbVariants` |         | `false`  | Specify alternative breadcrumb appearance |
+
+### Breadcrumbs.Item `Required`
+
+| name       | type      | default | required | description                         |
+| ---------- | --------- | ------- | -------- | ----------------------------------- |
+| `selected` | `boolean` |         | `false`  | Used for indicating the active link |
+| `href`     | `string`  |         | `true`   | URL of the page the link goes to    |

package/docs/components/BreakoutBanner/index.md

@@ -0,0 +1,102 @@
+---
+title: Breakout banner
+description: Use a breakout banner to break up content on longer pages and highlight important information.
+keywords: ['banner', 'promo', 'callout', 'attention', 'highlight']
+---
+
+Use breakout banners to promote important information and actions in-between blocks of content.
+Whereas the CTA banner is intended to redirect users to their respective conversion outlets, links in the breakout banner should only cross-link to supporting content.
+
+## Anatomy
+
+## Usage
+
+Breakout banners should be used in the middle of a page to break up long blocks of content. Avoid using the breakout banner at the beginning or towards the end of a page.
+
+**✅ Do**
+
+_Use breakout banners to break up longer pages._
+
+**❌ Don't**
+
+_Don't use the breakout banner too early or late in the page (E.g. near the footer). Prefer CTA banner in case of
+the latter. Also avoid placing the breakout banner too close to related components like the CTA banner._
+
+### Alignment
+
+The breakout banner content can be aligned to the start or center of the parent element, with the former being the default. Use the center alignment if context calls for it.
+E.g. Use center alignment if the breakout banner is placed between two sections that are also centered aligned to avoid breaking the visual flow.
+
+**✅ Do**
+
+_Use start alignment when possible._
+
+**❌ Don't**
+
+_Don't use start alignment when adjacent content is center aligned._
+
+### Use sparingly
+
+Breakout banners should be used sparingly, at most once per page. This is to avoid diluting the impact of the spotlighted content or links in the context of the wider page.
+
+**✅ Do**
+
+_Use breakout banner sparingly._
+
+**❌ Don't**
+
+_Don't stack multiple breakout banners, prefer Bento instead._
+
+### Use concise headings
+
+Both heading and optional descriptions in the breakout banner should be short and focussed. Heading should be not be longer than 3 lines, and description should be no longer than 3-4 lines.
+
+**✅ Do**
+
+_Use concise, but impactful heading and description text._
+
+**❌ Don't**
+
+_Don't use longer form content in the heading or description. Consider using Bento as an alternative._
+
+### Background visuals
+
+Background images should be abstract and low fidelity to not compete with the foreground text.
+
+**✅ Do**
+
+_Use approved wallpapers that provide space and contrast with the foreground text._
+
+**❌ Don't**
+
+_Don't use images of people's faces, real objects, etc._
+
+### Leading visuals
+
+**✅ Do**
+
+_Use logos or icons that are related to the adjacent banner content._
+
+**❌ Don't**
+
+_Don't use decorative imagery as a leading visual. Use the background image to apply decoration._
+
+**✅ Do**
+
+_Use monochrome colors, which correspond to the text color of the current, active color mode._
+
+**❌ Don't**
+
+_Don't use full color visuals._
+
+## Accessibility
+
+- Ensure proper color contrast between text and background
+- Make sure leading visuals include proper aria labels
+- Use semantic heading elements with appropriate heading levels
+- Ensure links have descriptive text that makes sense out of context
+
+## Related components
+
+- [CTABanner](../CTABanner/index.md): To highlight important information and actions towards the end of a page
+- [Bento](../Bento/index.md): For more complex layout needs when presenting multiple content blocks

package/docs/components/BreakoutBanner/react.md

@@ -0,0 +1,174 @@
+---
+title: Breakout banner
+description: Use a breakout banner to break up content on longer pages and highlight important information.
+keywords: ['banner', 'promo', 'callout', 'attention', 'highlight']
+source: https://github.com/primer/brand/blob/main/packages/react/src/BreakoutBanner/BreakoutBanner.tsx
+storybook: '/brand/storybook/?path=/story/components-breakoutbanner--playground'
+ready: true
+---
+
+```js
+import {BreakoutBanner} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<BreakoutBanner>
+  <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+  <BreakoutBanner.LinkGroup>
+    <Link href="#">Primary action</Link>
+  </BreakoutBanner.LinkGroup>
+</BreakoutBanner>
+```
+
+### Optional description
+
+```jsx
+<BreakoutBanner>
+  <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+  <BreakoutBanner.Description>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+    felis nam pulvinar risus elementum.
+  </BreakoutBanner.Description>
+  <BreakoutBanner.LinkGroup>
+    <Link href="#">Primary action</Link>
+  </BreakoutBanner.LinkGroup>
+</BreakoutBanner>
+```
+
+### Additional action
+
+```jsx
+<BreakoutBanner>
+  <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+  <BreakoutBanner.LinkGroup>
+    <Link href="#">Primary action</Link>
+    <Link href="#">Secondary action</Link>
+  </BreakoutBanner.LinkGroup>
+</BreakoutBanner>
+```
+
+### Vertically stacked actions
+
+```jsx
+<BreakoutBanner>
+  <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+  <BreakoutBanner.LinkGroup direction="vertical">
+    <Link href="#">Primary action</Link>
+    <Link href="#">Secondary action</Link>
+  </BreakoutBanner.LinkGroup>
+</BreakoutBanner>
+```
+
+### Alignment
+
+The content alignment can be changed using the `align` prop on the root `BreakoutBanner`. This can be configured to either `start` or `center`.
+
+```jsx
+<BreakoutBanner align="center">
+  <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+  <BreakoutBanner.Description>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+    felis nam pulvinar risus elementum.
+  </BreakoutBanner.Description>
+  <BreakoutBanner.LinkGroup>
+    <Link href="#">Primary action</Link>
+    <Link href="#">Secondary action</Link>
+  </BreakoutBanner.LinkGroup>
+</BreakoutBanner>
+```
+
+### Leading visual
+
+> An accessible label should always be provided for the leading visual.
+
+```jsx
+<BreakoutBanner leadingVisual={<LogoGithubIcon size="medium" aria-label="GitHub logo" />}>
+  <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+  <BreakoutBanner.LinkGroup>
+    <Link href="#">Primary action</Link>
+  </BreakoutBanner.LinkGroup>
+</BreakoutBanner>
+```
+
+### Optional background image
+
+```jsx
+<ThemeProvider colorMode="dark">
+  <BreakoutBanner
+    backgroundImageSrc={{
+      narrow: 'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
+      regular: 'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
+      wide: 'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
+    }}
+  >
+    <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+    <BreakoutBanner.LinkGroup>
+      <Link href="#">Primary action</Link>
+    </BreakoutBanner.LinkGroup>
+  </BreakoutBanner>
+</ThemeProvider>
+```
+
+### Optional background color
+
+```jsx
+<BreakoutBanner backgroundColor="var(--base-color-scale-blue-0)">
+  <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+  <BreakoutBanner.Description>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+    felis nam pulvinar risus elementum.
+  </BreakoutBanner.Description>
+  <BreakoutBanner.LinkGroup>
+    <Link href="#">Primary action</Link>
+    <Link href="#">Secondary action</Link>
+  </BreakoutBanner.LinkGroup>
+</BreakoutBanner>
+```
+
+## Component props
+
+### BreakoutBanner `Required`
+
+| name                      | type                                                   | default     | required | description                                                      |
+| ------------------------- | ------------------------------------------------------ | ----------- | -------- | ---------------------------------------------------------------- |
+| `children`                | `ReactNode`, `ReactNode[]`                             | `undefined` | `true`   | Content to include within the banner component                   |
+| `align`                   | `'start' \| 'center'`                                  | `'start'`   | `true`   | The horizontal positioning of content wihin the banner component |
+| `backgroundColor`         | `'default' \| 'subtle' \| 'string' \| 'ResponsiveMap'` | `'subtle'`  | `false`  | Optional, custom background color                                |
+| `backgroundImageSrc`      | `'string' \| 'ResponsiveMap'`                          | `undefined` | `false`  | Optional, custom background image                                |
+| `backgroundImagePosition` | `'string' \| 'ResponsiveMap'`                          | `'center'`  | `false`  | Optional, custom background position                             |
+| `backgroundImageSize`     | `'string' \| 'ResponsiveMap'`                          | `'cover'`   | `false`  | Optional, custom background position size                        |
+| `leadingVisual`           | `ReactElement`, `Icon`                                 | `undefined` | `false`  | An optional leading visual that appears before the heading       |
+
+### BreakoutBanner.Heading `Required`
+
+| name       | type                                           | default     | required | description                                                           |
+| ---------- | ---------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------- |
+| `children` | `ReactNode`, `ReactNode[]`                     | `undefined` | `true`   | Content to be displayed inside the `BreakoutBanner.Heading` component |
+| `as`       | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h3'`      | `false`  | Heading level                                                         |
+| `size`     | `'1' \| '2' \| '3' \| '4' \| '5' \| '6'`       | `'4'`       | `false`  | Visual heading size, irrespective of level                            |
+
+### BreakoutBanner.Description
+
+Optional child that can be used to provide additional information.
+
+| name       | type                       | default     | required | description                                         |
+| ---------- | -------------------------- | ----------- | -------- | --------------------------------------------------- |
+| `children` | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the banner component |
+
+### BreakoutBanner.LinkGroup
+
+| name        | type                                            | default        | required | description                                  |
+| ----------- | ----------------------------------------------- | -------------- | -------- | -------------------------------------------- |
+| `children`  | `Link`                                          | `undefined`    | `true`   | The links to be displayed within the group   |
+| `direction` | `'horizontal' \| 'vertical' \| 'ResponsiveMap'` | `'horizontal'` | `false`  | Positioning of the links across x and y axis |
+
+All components forward `id`, `className` and `ref` by default
+
+## Related components
+
+- [CTABanner](../CTABanner/index.md): For highlighting important information and actions towards the end of a page
+- [Bento](../Bento/index.md): For more complex layout needs when presenting multiple content blocks