Shopify · alex-page · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022
diff --git a/.changeset/fair-owls-hug.md b/.changeset/fair-owls-hug.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Use description and title front matter for pages rendered from /content
diff --git a/polaris.shopify.com/content/components/account-connection/index.md b/polaris.shopify.com/content/components/account-connection/index.md
@@ -1,5 +1,6 @@
 ---
 title: Account connection
+description: The account connection component is used so merchants can connect or disconnect their store to various accounts. For example, if merchants want to use the Facebook sales channel, they need to connect their Facebook account to their Shopify store.
 category: Actions
 keywords:
   - AccountConnection
@@ -19,12 +20,6 @@ examples:
     description: Use to let merchants connect or disconnect their store to their third-party accounts, like Facebook.
 ---
 
-# Account connection
-
-The account connection component is used so merchants can connect or disconnect their store to various accounts. For example, if merchants want to use the Facebook sales channel, they need to connect their Facebook account to their Shopify store.
-
----
-
 ## Best practices
 
 The account component should:

diff --git a/polaris.shopify.com/content/components/action-list/index.md b/polaris.shopify.com/content/components/action-list/index.md
@@ -1,5 +1,6 @@
 ---
 title: Action list
+description: Action lists render a list of actions or selectable options. This component is usually placed inside a [popover container](https://polaris.shopify.com/components/popover) to create a dropdown menu or to let merchants select from a list of options.
 category: Actions
 keywords:
   - ActionList
@@ -35,12 +36,6 @@ examples:
     description: Use help text when the normal Verb noun syntax for the actions does not provide sufficient context for the merchant.
 ---
 
-# Action list
-
-Action lists render a list of actions or selectable options. This component is usually placed inside a [popover container](https://polaris.shopify.com/components/popover) to create a dropdown menu or to let merchants select from a list of options.
-
----
-
 ## Best practices
 
 Actions lists should:

diff --git a/polaris.shopify.com/content/components/app-provider/index.md b/polaris.shopify.com/content/components/app-provider/index.md
@@ -1,5 +1,6 @@
 ---
 title: App provider
+description: App provider is a required component that enables sharing global settings throughout the hierarchy of your application.
 category: Structure
 keywords:
   - app
@@ -29,12 +30,6 @@ examples:
     description: With a `colorScheme`, the app provider component will set the root color scheme for the App (such as light or dark). For `colorScheme` configuration, see the [CustomProperties](https://polaris.shopify.com/components/custom-properties) component documentation.
 ---
 
-# App provider
-
-App provider is a required component that enables sharing global settings throughout the hierarchy of your application.
-
----
-
 ## Best practices
 
 The app provider component is required to use Polaris. Without it, the components in your application will not function correctly. You must wrap the root (the top) of your application in the app provider component.

diff --git a/polaris.shopify.com/content/components/autocomplete/index.md b/polaris.shopify.com/content/components/autocomplete/index.md
@@ -1,5 +1,6 @@
 ---
 title: Autocomplete
+description: The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `Combobox` and `Listbox` components with minor UI differences.
 category: Forms
 keywords:
   - autocomplete
@@ -36,12 +37,6 @@ examples:
     description: Use to help merchants complete a destructive action quickly.
 ---
 
-# Autocomplete
-
-The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `Combobox` and `Listbox` components with minor UI differences.
-
----
-
 ## Best practices
 
 The autocomplete component should:

diff --git a/polaris.shopify.com/content/components/avatar/index.md b/polaris.shopify.com/content/components/avatar/index.md
@@ -1,5 +1,6 @@
 ---
 title: Avatar
+description: Avatars are used to show a thumbnail representation of an individual or business in the interface.
 category: Images and icons
 keywords:
   - photo
@@ -29,12 +30,6 @@ examples:
     description: Use a `square` shape when the avatar represents a non-person entity like an app, channel, or store.
 ---
 
-# Avatar
-
-Avatars are used to show a thumbnail representation of an individual or business in the interface.
-
----
-
 ## Best practices
 
 Avatars should be one of 4 sizes:

diff --git a/polaris.shopify.com/content/components/badge/index.md b/polaris.shopify.com/content/components/badge/index.md
@@ -1,5 +1,6 @@
 ---
 title: Badge
+description: Badges are used to inform merchants of the status of an object or of an action that’s been taken.
 category: Images and icons
 keywords:
   - pills
@@ -49,12 +50,6 @@ examples:
     description: Use when the status and progress accessibilityLabels are not appropriate to a given context.
 ---
 
-# Badge
-
-Badges are used to inform merchants of the status of an object or of an action that’s been taken.
-
----
-
 ## Best practices
 
 Badges benefit merchants by:

diff --git a/polaris.shopify.com/content/components/banner/index.md b/polaris.shopify.com/content/components/banner/index.md
@@ -1,5 +1,6 @@
 ---
 title: Banner
+description: Informs merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way. Banners are placed at the top of the page or section they apply to, and below the page or section header.
 category: Feedback indicators
 keywords:
   - inform
@@ -56,12 +57,6 @@ examples:
     description: Banners inside of cards render with less spacing and a pared-back design to fit within a content context.
 ---
 
-# Banner
-
-Informs merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way. Banners are placed at the top of the page or section they apply to, and below the page or section header.
-
----
-
 ## Best practices
 
 Banners should:

diff --git a/polaris.shopify.com/content/components/button-group/index.md b/polaris.shopify.com/content/components/button-group/index.md
@@ -1,5 +1,6 @@
 ---
 title: Button group
+description: Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
 category: Actions
 keywords:
   - ButtonGroup
@@ -29,12 +30,6 @@ examples:
     description: Use to emphasize several buttons as a thematically-related set among other controls.
 ---
 
-# Button group
-
-Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
-
----
-
 ## Best practices
 
 Button groups should:

diff --git a/polaris.shopify.com/content/components/button/index.md b/polaris.shopify.com/content/components/button/index.md
@@ -1,5 +1,6 @@
 ---
 title: Button
+description: Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.
 category: Actions
 keywords:
   - CTA
@@ -80,14 +81,6 @@ examples:
     description: Use when a button has been pressed and the associated action is in progress.
 ---
 
-# Button
-
-Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.
-
-For navigational actions that appear within or directly following a sentence, use the [link component](https://polaris.shopify.com/components/link).
-
----
-
 ## Best practices
 
 Buttons should:

diff --git a/polaris.shopify.com/content/components/callout-card/index.md b/polaris.shopify.com/content/components/callout-card/index.md
@@ -1,5 +1,6 @@
 ---
 title: Callout card
+description: Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.
 category: Structure
 keywords:
   - CalloutCard
@@ -33,12 +34,6 @@ examples:
     description: Make all callout cards dismissible so merchants can get rid of cards about features they’re not interested in.
 ---
 
-# Callout card
-
-Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.
-
----
-
 ## Best practices
 
 Callout cards should:

diff --git a/polaris.shopify.com/content/components/caption/index.md b/polaris.shopify.com/content/components/caption/index.md
@@ -1,5 +1,6 @@
 ---
 title: Caption
+description: Caption text size is smaller than the recommended size for general reading. On web, it should be used only in a graph or as a timestamp for a list item. On Android and iOS, it can also be used as help text or as other kinds of secondary text for list items.
 category: Titles and text
 keywords:
   - labels
@@ -20,12 +21,6 @@ examples:
     description: Use to provide details in situations where content is compact and space is tight.
 ---
 
-# Caption
-
-Caption text size is smaller than the recommended size for general reading. On web, it should be used only in a graph or as a timestamp for a list item. On Android and iOS, it can also be used as help text or as other kinds of secondary text for list items.
-
----
-
 ## Best practices
 
 - Use for secondary labels in graphs and charts

diff --git a/polaris.shopify.com/content/components/card/index.md b/polaris.shopify.com/content/components/card/index.md
@@ -1,5 +1,6 @@
 ---
 title: Card
+description: Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.
 category: Structure
 keywords:
   - layout
@@ -73,12 +74,6 @@ examples:
     description: Use when you need further control over the spacing of your card sections.
 ---
 
-# Card
-
-Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.
-
----
-
 ## Best practices
 
 Cards should:

diff --git a/polaris.shopify.com/content/components/checkbox/index.md b/polaris.shopify.com/content/components/checkbox/index.md
@@ -1,5 +1,6 @@
 ---
 title: Checkbox
+description: Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have merchants indicate they agree to specific terms and services.
 category: Forms
 keywords:
   - accept
@@ -19,12 +20,6 @@ examples:
     description: Use in forms to toggle the state of something on or off. Default checkboxes can appear as selected and disabled, or unselected.
 ---
 
-# Checkbox
-
-Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have merchants indicate they agree to specific terms and services.
-
----
-
 ## Best practices
 
 Checkboxes should:

diff --git a/polaris.shopify.com/content/components/choice-list/index.md b/polaris.shopify.com/content/components/choice-list/index.md
@@ -1,5 +1,6 @@
 ---
 title: Choice list
+description: A choice list lets you create a list of grouped radio buttons or checkboxes. Use this component if you need to group together a related list of interactive choices.
 category: Forms
 keywords:
   - ChoiceList
@@ -35,12 +36,6 @@ examples:
     description: Use when you need merchants to view and/or interact with additional content under a choice. The content is only rendered when the choice is selected. Works for both single-choice and multi-choice list.
 ---
 
-# Choice list
-
-A choice list lets you create a list of grouped radio buttons or checkboxes. Use this component if you need to group together a related list of interactive choices.
-
----
-
 ## Best practices
 
 Choice lists should:

diff --git a/polaris.shopify.com/content/components/collapsible/index.md b/polaris.shopify.com/content/components/collapsible/index.md
@@ -1,5 +1,6 @@
 ---
 title: Collapsible
+description: The collapsible component is used to put long sections of information under a block that merchants can expand or collapse.
 category: Behavior
 keywords:
   - hide
@@ -24,12 +25,6 @@ examples:
     description: Use for a basic “show more” interaction when you need to display more content.
 ---
 
-# Collapsible
-
-The collapsible component is used to put long sections of information under a block that merchants can expand or collapse.
-
----
-
 ## Best practices
 
 The collapsible component should:

diff --git a/polaris.shopify.com/content/components/color-picker/index.md b/polaris.shopify.com/content/components/color-picker/index.md
@@ -1,5 +1,6 @@
 ---
 title: Color picker
+description: The color picker is used to let merchants select a color visually. For example, merchants use the color picker to customize the accent color of the email templates for their shop.
 category: Forms
 keywords:
   - ColorPicker
@@ -25,12 +26,6 @@ examples:
     description: Use when attached to a visual builder to allow the designated object to have a transparent background that allows underlying objects to show through.
 ---
 
-# Color picker
-
-The color picker is used to let merchants select a color visually. For example, merchants use the color picker to customize the accent color of the email templates for their shop.
-
----
-
 ## Best practices
 
 - Use the alpha slider if you want to allow merchants to be able to select a transparent color
diff --git a/polaris.shopify.com/content/components/combobox/index.md b/polaris.shopify.com/content/components/combobox/index.md
@@ -1,5 +1,6 @@
 ---
 title: Combobox
+description: Combobox is an accessible autocomplete input that enables merchants to filter a list of options and select one or more values.
 category: Forms
 keywords:
   - autocomplete
@@ -30,12 +31,6 @@ examples:
     description: Use to indicate to merchants that the list data is being fetched.
 ---
 
-# Combobox
-
-Combobox is an accessible autocomplete input that enables merchants to filter a list of options and select one or more values.
-
----
-
 ## Anatomy
 
 ![A diagram of the Combobox component showing the smaller primitive components it is composed of.](/images/components/combobox/combobox-anatomy.png)

diff --git a/polaris.shopify.com/content/components/contextual-save-bar/index.md b/polaris.shopify.com/content/components/contextual-save-bar/index.md
@@ -1,5 +1,6 @@
 ---
 title: Contextual save bar
+description: The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.
 category: Forms
 keywords:
   - form
@@ -21,12 +22,6 @@ examples:
     description: Use the fullWidth flag when you want to remove the default max-width set on the contextual save bar.
 ---
 
-# Contextual Save Bar
-
-The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.
-
----
-
 ## Required components
 
 The contextual save bar component must be wrapped in the [frame](https://polaris.shopify.com/components/frame) component.

diff --git a/polaris.shopify.com/content/components/custom-properties/index.md b/polaris.shopify.com/content/components/custom-properties/index.md
@@ -1,5 +1,6 @@
 ---
 title: CustomProperties
+description: Use the custom properties component to share global theme settings throughout the hierarchy of your application. Custom properties is included by default as a child of the [app provider component](https://polaris.shopify.com/components/app-provider) but can be used independently to apply a base color scheme to its children.
 category: Structure
 keywords:
   - theme
@@ -19,12 +20,6 @@ examples:
     description: Custom properties can be nested within the custom properties rendered by the app provider in order to override the color scheme at a local level.
 ---
 
-# Custom Properties
-
-Use the custom properties component to share global theme settings throughout the hierarchy of your application. Custom properties is included by default as a child of the [app provider component](https://polaris.shopify.com/components/app-provider) but can be used independently to apply a base color scheme to its children.
-
----
-
 ## Consuming custom properties colors in a component
 
 The CustomProperties component uses [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to share color values with components. For a full list of available CSS custom properties, see the [Polaris tokens docs](https://github.com/Shopify/polaris/tree/main/polaris-tokens#readme).