+ `,
+})
diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md
deleted file mode 100644
index e2efe76b..00000000
--- a/docs/content/components/alerts.md
+++ /dev/null
@@ -1,197 +0,0 @@
----
-title: Alerts
-path: components/alerts
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/alerts'
-rails: 'https://primer.style/view-components/components/alpha/banner'
-bundle: alerts
----
-
-Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
-
-## Default
-
-Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
-
-```html live
-
- Flash message goes here.
-
-```
-
-You can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically overridden.
-
-```html live
-
-
- This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more
- text, it'll eventually wrap to a new line.
-
-
And this is another paragraph.
-
-```
-
-Should the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. _Note the extra top and bottom margin in the example below._
-
-```html live
-
-
- Flash message goes here.
-
-
-```
-
-## Colors
-
-Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.
-
-```html live
-
- Flash message goes here.
-
-
-
- Flash message goes here.
-
-
-
- Flash message goes here.
-
-
-
- Flash message goes here.
-
-```
-
-## With icon
-
-Add an icon to the left of the flash message to give it some funky fresh attention.
-
-```html live
-
-
-
- Flash message with an icon
-
-
-
-
-
- Flash message with an icon
-
-
-
-
-
- Flash message with an icon
-
-
-
-
-
- Flash message with an icon
-
-```
-
-When using a `24px` icon, add a `.v-align-bottom` class and increase the font-size with `.f4` for a more balanced alignment.
-
-```html live
-
-
-
- Flash message with a larger icon
-
-```
-
-## With dismiss
-
-Add a close icon on the right to allow users to dismiss a flash message.
-
-```html live
-
- Dismissable flash message goes here.
-
-
-
-
- Dismissable flash message goes here.
-
-
-
-
- Dismissable flash message goes here.
-
-
-
-
- Dismissable flash message goes here.
-
-
-```
-
-## With action button
-
-A flash message with an action button.
-
-```html live
-
- Flash message with action here.
-
-
-
-
- Flash message with action here.
-
-
-
-
- Flash message with action here.
-
-
-
-
-
- Flash message with action here.
-
-
-```
-
-## Full width flash
-
-A flash message that is full width and removes border and border radius.
-
-```html live
-
- Full width flash message.
-
-```
-
-## Flash banner
-
-A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown.
-
-```html live
-
-
- Flash banner message.
-
-
-```
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
deleted file mode 100644
index 3ef1b54a..00000000
--- a/docs/content/components/autocomplete.md
+++ /dev/null
@@ -1,450 +0,0 @@
----
-title: Autocomplete
-path: components/autocomplete
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/autocomplete'
-bundle: autocomplete
----
-
-A list of items used to show autocompleted results. Use the [``](https://github.com/github/auto-complete-element) element to add functionality.
-
-## Default (stacked label)
-
-```html live
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-```
-
-## Inline label
-
-**Note**: On smaller screen sizes, the labels will be stacked.
-
-```html live
-
-
-
-
-
-
Team 1 (works on Ruby architecture)
-
Team 2 (works on frontend JS architecture)
-
Team 3 (this team works on design systems)
-
-
-
-
-
-```
-
-## Embedded icon with visible label
-
-### Stacked label
-
-```html live
-
-
-
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-```
-
-### Inline label
-
-```html live
-
-
-
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-```
-
-## Embedded icon with hidden label
-
-```html live
-
-
-
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-```
-
-## Within form group
-
-```html live
-
-
-
-
-
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-
-
-```
-
-## Within input group
-
-When rendering `Autocomplete` with embedded icon within an [input group](https://primer.style/css/components/forms#input-group), add `.input-group-button--autocomplete-embedded-icon` to `.input-group-button`.
-
-### Stacked
-
-```html live
-
-
-
-
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-
-
-
-
-```
-
-### Inline
-```html live
-
-
-
-
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-
-
-
-
-```
-
-## Container with `max-width`
-
-```html live
-
-
-
-
-
-
-
-
-
-
-
-
-
Option 1
-
Option 2
-
Option 3
-
-
-
-
-
-
-
-
-
-```
-
-## Additional content
-
-Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style.
-
-```html live
-
-
-
-
-
- GitHub Inc.
- @github
-
-
-
- Hubot
- @hubot
-
-
-
- Monalisa Octocat
- @octocat
-
-
-
-
-
-```
-
-## Suggester
-
-The `.suggester` component is meant for showing suggestions while typing in a larger text area. Use the [``](https://github.com/github/text-expander-element) element to add functionality.
-
-```html live
-
-
-
-
-
- #924 Markdown tables are inaccessible
-
-
-
- #980 Use actual book emoji in Flexbox docs
-
-
-
- #979 Add `.radio-group` component
-
-
-
- #925 Release 14.0.0
-
-
-
- #978 Add `.css-truncate-overflow`
-
-
-
-
-
-```
diff --git a/docs/content/components/avatar-stack.md b/docs/content/components/avatar-stack.md
deleted file mode 100644
index a9ac9a0b..00000000
--- a/docs/content/components/avatar-stack.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: AvatarStack
-path: components/avatar-stack
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/avatars'
-rails: 'https://primer.style/view-components/components/beta/avatarstack'
-bundle: avatars
----
-
-Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
-
-```html live
-
-
-
-
-
-
-
-```
-
-Based on the number of avatars in the stack, add these modifier classes:
-
-- `AvatarStack--two` for 2 avatars.
-- `AvatarStack--three-plus` for 3 or more avatars.
-
-If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
-
-```html live
-
-
-
-
-
-
-
-
-
-
-```
-
-You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
-
-```html live
-
-```
-
-Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
-
-```html live
-
-
-
-
-
-
-
-```
diff --git a/docs/content/components/avatars.md b/docs/content/components/avatars.md
deleted file mode 100644
index 298736fe..00000000
--- a/docs/content/components/avatars.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Avatars
-path: components/avatars
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/avatars'
-rails: 'https://primer.style/view-components/components/beta/avatar'
-bundle: avatars
----
-
-Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
-
-## Basic example
-
-Add `.avatar` to any `` element to make it an avatar. This resets some key styles for alignment, address a Firefox image placeholder bug, and rounds the corners.
-
-Be sure to set `width` and `height` attributes for maximum browser performance.
-
-```html live
-
-```
-
-### Small avatars
-
-We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
-
-```html live
-
-```
-
-### Avatar sizes
-
-Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only supported for the `20px` avatar size.
-
-```html live
-
-
-
-
-
-
-
-
-```
-
-### Parent-child avatars
-
-When you need a larger parent avatar, and a smaller child one, overlaid slightly, use the parent-child classes.
-
-```html live
-
-
-
-
-```
-
-## Circle badge
-
-`.CircleBadge` allows for the display of badge-like icons or logos. They are used mostly with Octicons or partner integration icons.
-
-`.CircleBadge` should have an `aria-label`, `title` (for a link), or an `alt` (for child `img` elements) attribute specified if there is no text-based alternative to describe it. If there is a text-based alternative or the icon has no semantic value, `aria-hidden="true"` or an empty `alt` attribute may be used.
-
-### Small
-
-```html live
-
-
-
-
-
-
-
-```
-
-### Medium
-
-```html live
-
-
-
-```
-
-### Large
-
-```html live
-
-
-
-```
-
-### Dashed connection
-
-For specific cases where two badges or more need to be shown as related or connected (such as integrations or specific product workflows), a `DashedConnection` class was created. Use utility classes to ensure badges are spaced correctly.
-
-```html live
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
diff --git a/docs/content/components/blankslate.md b/docs/content/components/blankslate.md
deleted file mode 100644
index 516c435c..00000000
--- a/docs/content/components/blankslate.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: Blankslate
-path: components/blankslate
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/blankslate'
-rails: 'https://primer.style/view-components/components/beta/blankslate'
-bundle: blankslate
----
-
-Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well.
-
-## Basic example
-
-Wrap some content in the outer `.blankslate` wrapper and add the `.blankslate-heading` class to headings to give it the blankslate appearance.
-
-```html live
-
-
This is a blank slate
-
Use it to provide information when no dynamic content exists.
-
-```
-
-## With Octicons
-
-When it helps the message, include (relevant) icons in your blank slate. Add the `.blankslate-icon` class to give icons the proper styling.
-
-```html live
-
-
-
-
This is a blank slate
-
Use it to provide information when no dynamic content exists.
-
-```
-
-## With graphic, button and link
-
-Add a graphic, button and/or link to add additional information and provide users a way to add content to this page. Add the `.blankslate-image` class to the image, and the `.blankslate-action` to any button or link wrappers.
-
-```html live
-
-
-
You don’t seem to have any pull requests.
-
Pull requests help you discuss potential changes before they are merged into the base branch.
-
-
-
-
-
-
-
-```
-
-## Variations
-
-Add an additional optional class to the `.blankslate` to change its appearance.
-
-### Narrow
-
-`.blankslate-narrow` narrows the blankslate container to not occupy the entire available width.
-
-```html live
-
-
-
You don’t seem to have any pull requests.
-
Pull requests help you discuss potential changes before they are merged into the base branch.
-
-
-
-
-
-
-
-```
-
-### Large
-
-`.blankslate-large` increases the size of the text in the blankslate
-
-```html live
-
-
-
You don’t seem to have any pull requests.
-
Pull requests help you discuss potential changes before they are merged into the base branch.
-
-
-
-
-
-
-
-```
-
-### Spacious
-
-`.blankslate-spacious` significantly increases the vertical padding.
-
-```html live
-
-
-
You don’t seem to have any pull requests.
-
Pull requests help you discuss potential changes before they are merged into the base branch.
-
-
-
-
-
-
-
-```
-
-**Note**: It's possible to combine variations. Large and spacious (`blankslate blankslate-large blankslate-spacious`) is often used together.
-
-### Add border
-
-To add a border, wrap the blankslate component with the [Box component](/components/box).
-
-```html live
-
-
-
-
You don’t seem to have any pull requests.
-
Pull requests help you discuss potential changes before they are merged into the base branch.
-
-
-
-
-
-
-
-
-```
-
-### Capped
-
-Removes the `border-radius` on the top corners.
-
-```html live
-
-
-
-
You don’t seem to have any pull requests.
-
Pull requests help you discuss potential changes before they are merged into the base branch.
-
-
-
-
-
-
-
-
-```
diff --git a/docs/content/components/box-overlay.md b/docs/content/components/box-overlay.md
deleted file mode 100644
index 57760f88..00000000
--- a/docs/content/components/box-overlay.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Box overlay
-path: components/box-overlay
-status: Alpha
-status_issue: 'https://github.com/github/design-systems/issues/374'
-source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/box-overlay.scss'
-rails: 'https://primer.style/view-components/components/alpha/dialog'
-symbols: [Box--overlay, Box-header, Box-overlay--narrow, Box-overlay--wide]
-keywords: [box, overlay]
----
-
-Use the `Box--overlay` with the `` and [``](https://github.com/github/details-dialog), and add the `details-overlay-dark` utility if you wish to apply a dark transparent background.
-
-Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.
-
-```html live
-
-
- Open dialog
-
-
-
-
Box title
-
-
-
-
- The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven of typography together with Hermann Zapf, the most famous artist of the...
-
-
-
-
-
- @broccolini
-
-
-
- @jonrohan
-
-
-
- @shawnbot
-
-
-
-
-
-
-
-
-
-
-```
-
-[aria attributes]: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
diff --git a/docs/content/components/box.md b/docs/content/components/box.md
deleted file mode 100644
index 8ab9eee4..00000000
--- a/docs/content/components/box.md
+++ /dev/null
@@ -1,579 +0,0 @@
----
-title: Box
-path: components/box
-status_issue: 'https://github.com/github/design-systems/issues/198'
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/box'
-rails: 'https://primer.style/view-components/components/beta/borderbox'
-bundle: box
----
-
-The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
-
-## Box
-
-A `.Box` is a container with a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
-
-```html live
-
- This is a box.
-
-```
-
-## Box elements
-
-Box elements include `Box-header`, `Box-body`, and `Box-footer`. These elements include borders and consistent padding. Optionally, you can include use `Box-title` which applies a bold font-weight the heading.
-
-```html live
-
-
-
- Box title
-
-
-
- Box body
-
-
-
-```
-
-### Box row
-
-Use `Box-row` to add rows with borders and maintain the same padding. Box rows have a lighter border to give contrast between the header and footer.
-
-**Note:** Box rows have some reliance on markup structure in order to target the first and last rows, therefore using an unordered list is recommended. See [box row markup structure](#box-row-markup-structure) for more information.
-
-```html live
-
-
-
- Box row one
-
-
- Box row two
-
-
- Box row three
-
-
- Box row four
-
-
-
-```
-
-Rows can be used with or without `Box-header`, `Box-footer`, or `Box-body`.
-
-```html live
-
-
- Box header
-
-
- Box body
-
-
-
- Box row one
-
-
- Box row two
-
-
- Box row three
-
-
- Box row four
-
-
-
-
-```
-
-### Box row markup structure
-
-Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that row corners don't poke outside the `Box`, this can be particularly noticeable when using a highlight on box rows.
-
-Using an unordered list is recommended in order to target the first and last rows, however, if you need to use a `
` for your rows, you may want to place your rows inside a parent `
` so that the first and last rows are styled appropriately.
-
-```html live
-
-
- Box header
-
-
-
-
Box row using a div
-
Box row using a div
-
-
-```
-
-## Box padding density
-
-You can changed the padding density of the box component.
-
-Use `Box--condensed` to apply a more condensed line-height and reduce the padding on the Y axis.
-
-```html live
-
-
-
- Box title
-
-
-
- Box body
-
-
-
- Box row one
-
-
- Box row two
-
-
-
-
-```
-
-Use `Box--spacious` to increase padding and increase the title font size.
-
-You may want to increase the overall font size to work with the larger padding, in this example the default body font size is increased to 16px using the `f4` typography utility.
-
-```html live
-
-
-
- Box title
-
-
-
- Box body
-
-
-
- Box row one
-
-
- Box row two
-
-
-
-
-```
-
-## Blue box theme
-
-Use `Box--blue` to style the box borders and box header in blue.
-
-```html live
-
-
- Box header
-
-
-
- Box row one
-
-
- Box row two
-
-
-
-
-```
-
-## Blue box header theme
-
-Use `Box-header--blue` to add to change the header border and background to blue.
-
-```html live
-
-
-
Box with blue header
-
-
- Box body
-
-
-```
-
-## Box danger theme
-
-Use `Box--danger` to apply a red border to the outside of the box. This theme is helpful for communicating destructive actions.
-
-**Note:** `Box-danger` only works with either `Box-row`'s or `Box-body`.
-
-```html live
-
-
- Row one
-
-
- Row two
-
-
-```
-
-`Box-danger` is often paired with a red heading. See the [subhead](./subhead) docs for more information.
-
-```html live
-
-
-
Danger zone
-
-
-
-
- Box body
-
-
-
-```
-
-## Row themes
-
-You can change the background color for individual rows, or change the color on hover or navigation focus.
-
-```html live
-
-
- .Box-row--gray
-
-
- .Box-row--hover-gray
-
-
- .Box-row--yellow
-
-
- .Box-row--hover-blue
-
-
- .Box-row--blue
-
-
-```
-
-Use `Box-row--focus-gray` or `Box-row--focus-blue` when using along-side `navigation-focus` if you want to highlight rows when using keyboard commands.
-
-```html live
-
-
- .Box-row--focus-gray and .navigation-focus
-
-
- .Box-row--focus-gray
-
-
- .Box-row--focus-blue and .navigation-focus
-
-
- .Box-row--focus-blue
-
-
-```
-
-### Box row unread
-
-Use `.Box-row--unread` to apply a blue vertical line highlight for indicating a row contains unread items.
-
-```html live
-
-
- Box row
-
-
- Box row unread
-
-
- Box row
-
-
-```
-
-### Box row link
-
-Use .`Box-row-link` when you want a link to appear dark gray and blue on hover on desktop, and remain a blue link on mobile. This is useful to indicate links on mobile without having hover styles.
-
-```html live
-
-```
-
-## Dashed border
-
-Use the `border-dashed` utility to apply a dashed border to a box.
-
-```html live
-
- A box with a dashed border
-
-```
-
-## Boxes with flash alerts
-
-Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
-
-Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information.
-
-```html live
-
-
- Box header
-
-
-
- Flash message with close button.
-
-
-
-
- Flash success with an icon.
-
-
-
-
- Flash warning with an icon.
-
-
- Flash error inside a Box.
-
-
- Box body
-
-
-```
-
-## Boxes with icons
-
-Use `Box-btn-octicon` with `btn-octicon` when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements.
-
-```html live
-
-
- Box body
-
-
-
-```
-
-It's common to want to float icons to the far left or right and stop the `Box-title`from wrapping underneath. To do this you'll need to create a media object with utilities. Add `clearfix` to the surrounding div (this could be the header, body, or rows), add `overflow-hidden` to the title (or other text element), and float the icons as desired.
-
-```html live
-
-
-
-
A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right
-
-
- Box body
-
-
-```
-
-```html live
-
-
-
-
A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left
-
-
-```
-
-## Box headers with counters
-
-Use a counter with a background that works against the contrast of the box header. The default counter colors do not stand out well against the header background so we suggest using one of the following styles:
-
-Use `Counter--gray` for a counter with a gray background and dark gray text.
-
-```html live
-
-
-
- Box title
- 12
-
-
-
- Box body
-
-
-```
-
-Use `Counter--gray-dark` for a counter with a dark gray background and white text.
-
-```html live
-
-
-
- Box title
- 12
-
-
-
- Box body
-
-
-```
-
-## Form elements and buttons in boxes
-
-To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
-
-Use [flexbox utilities](/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
-
-```html live
-
-
-
- Box title
-
-
-
-
- Box body
-
-
-```
-
-A similar approach can be used for buttons with multiple lines of text within a row.
-
-```html live
-
-
-
- Row title
-
- Description
-
-
-
-
-
-
- Row title
-
- Description
-
-
-
-
-
-
- Row title
-
- Description
-
-
-
-
-
-```
-
-Using flexbox along with form, button, and link styles, you can create more complex box headers for things like bulk actions and sorting.
-
-```html live
-
-
-
-
-
-
- Box body
-
-
-```
-
-You can put forms in boxes. Often form submission buttons are aligned to the bottom right of the form which you can do with `text-right` instead of using floats.
-
-```html live
-
-
-
- Example form title
-
-
-
-
-```
-
-When a box is all by itself centered on a page you can use [column widths](/utilities/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/utilities/typography) instead of the built in box title styles.
-
-```html live
-
-
-
-```
-
-Box patterns can also be made with, and modified with [border utilities](/utilities/borders).
diff --git a/docs/content/components/branch-name.md b/docs/content/components/branch-name.md
deleted file mode 100644
index 43884953..00000000
--- a/docs/content/components/branch-name.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Branch name
-path: components/branch-name
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/branch-name'
-bundle: branch-name
----
-
-Branch names can be a link name or not:
-
-```html live
-a_new_feature_branch
-```
-
-```html live
-a_new_feature_branch
-```
-
-You may also include an octicon before the branch name text:
-
-```html live
-
-
-
- a_new_feature_branch
-
-```
diff --git a/docs/content/components/breadcrumb.md b/docs/content/components/breadcrumb.md
deleted file mode 100644
index 1471ef9e..00000000
--- a/docs/content/components/breadcrumb.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Breadcrumbs
-path: components/breadcrumb
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/breadcrumb'
-rails: 'https://primer.style/view-components/components/beta/breadcrumbs'
-bundle: breadcrumb
----
-
-Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
-
-- Are many levels deep on a site
-- Do not have a section-level navigation
-- May need the ability to quickly go back to the previous (parent) page
-
-All items must contain links, and the last item must be selected.
-
-#### Usage
-
-```html live
-
-```
diff --git a/docs/content/components/button-group.md b/docs/content/components/button-group.md
deleted file mode 100644
index b20b680d..00000000
--- a/docs/content/components/button-group.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Button group
-path: components/button-group
-status: Stable
-source: 'https://github.com/primer/css/tree/main/src/buttons'
-rails: 'https://primer.style/view-components/components/beta/buttongroup'
-bundle: buttons
----
-
-Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
-
-```html live
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
-
-```html live
-
-
-
-
-
-```
-
-Add `.BtnGroup-parent` to parent elements, like `
- GitHub Inc.
- @github
- 
- Hubot
- @hubot
- 
- Monalisa Octocat
- @octocat
- 
- 
-```
-
-### Small avatars
-
-We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
-
-```html live
-
-```
-
-### Avatar sizes
-
-Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only supported for the `20px` avatar size.
-
-```html live
-
-
-
-
-
-
-```
-
-### Parent-child avatars
-
-When you need a larger parent avatar, and a smaller child one, overlaid slightly, use the parent-child classes.
-
-```html live
-
-
-
-
-
-
-
-```
-
-### Medium
-
-```html live
-
- 
- 
- @broccolini
- 
- @jonrohan
- 
- @shawnbot
-