diff --git a/docs/app/views/examples/components/panel/_preview.html.erb b/docs/app/views/examples/components/panel/_preview.html.erb
index b3fa728c58..9be111ada8 100644
--- a/docs/app/views/examples/components/panel/_preview.html.erb
+++ b/docs/app/views/examples/components/panel/_preview.html.erb
@@ -56,7 +56,7 @@ Ut elementum id leo ac fringilla.
 
 <h3>Body</h3>
 
-There are a few for the panel body container.
+There are a few options for the panel body container.
 
 <h4>Panel Block</h4>
 
diff --git a/packages/sage-react/lib/Panel/Panel.jsx b/packages/sage-react/lib/Panel/Panel.jsx
index 6e13b4545f..50ab032354 100644
--- a/packages/sage-react/lib/Panel/Panel.jsx
+++ b/packages/sage-react/lib/Panel/Panel.jsx
@@ -72,10 +72,16 @@ Panel.defaultProps = {
 };
 
 Panel.propTypes = {
+  /** Renders any content passed within. */
   children: PropTypes.node,
+  /** CSS class that will be applied to the outermost container. */
   className: PropTypes.string,
+  /** Removes padding on both top and bottom of the Panel. */
   clearPaddingBoth: PropTypes.bool,
+  /** Removes padding on the bottom of the Panel. */
   clearPaddingBottom: PropTypes.bool,
+  /** Removes padding on the top of the Panel. */
   clearPaddingTop: PropTypes.bool,
+  /** Setting this to true will display a loading spinner within the Panel. */
   loading: PropTypes.bool,
 };
diff --git a/packages/sage-react/lib/Panel/Panel.story.jsx b/packages/sage-react/lib/Panel/Panel.story.jsx
deleted file mode 100644
index 20d5877872..0000000000
--- a/packages/sage-react/lib/Panel/Panel.story.jsx
+++ /dev/null
@@ -1,435 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from '../Button';
-import { Grid } from '../Grid';
-import { Icon } from '../Icon';
-import { Badge } from '../Badge';
-import { OptionsDropdown } from '../Dropdown';
-import { SageClassnames, SageTokens } from '../configs';
-import { Panel } from './Panel';
-
-export default {
-  title: 'Sage/Panel',
-  component: Panel,
-  // displays description on Docs tab
-  parameters: {
-    docs: {
-      description: {
-        component: 'Panels are used as multi-purpose containers for a variety of content.'
-      },
-    },
-  },
-  subcomponents: {
-    'Panel.Header': Panel.Header,
-    'Panel.Block': Panel.Block,
-    'Panel.Divider': Panel.Divider,
-    'Panel.Footer': Panel.Footer,
-    'Panel.Stack': Panel.Stack,
-    'Panel.List': Panel.List,
-    'Panel.Subheader': Panel.Subheader,
-    'Panel.Subtext': Panel.Subtext,
-    'Panel.Tiles': Panel.Tiles,
-    'Panel.Figure': Panel.Figure,
-    'Panel.Row': Panel.Row
-  },
-};
-
-export const Default = (args) => (
-  <Grid container={Grid.CONTAINER_SIZES.LG}>
-    <Panel {...args}>
-      <Panel.Header
-        title="Panel header"
-        titleClassName="custom-panel-header-class"
-        subtext={(
-          <p>All kinds of awesome, wonderful content can go in here! <a href="https://example.com">Learn more</a></p>
-        )}
-      >
-        <OptionsDropdown
-          align="right"
-          options={[
-            {
-              id: '1',
-              label: 'Option 1',
-            },
-            {
-              id: '2',
-              label: 'Option 2',
-            },
-            {
-              id: '3',
-              label: 'Option 3',
-            }
-          ]}
-          panelMaxWidth="240px"
-        />
-      </Panel.Header>
-      <Panel.Block sageType={true}>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          Duis sit amet libero lacus.
-          Aenean ullamcorper faucibus purus a ultrices.
-          Curabitur congue dolor eu condimentum scelerisque.
-          Morbi at elit nunc. Nulla tellus elit, tincidunt non cursus sit amet,
-          dapibus eu enim.
-        </p>
-        <p>
-          Duis gravida lobortis libero, et suscipit ligula pharetra in.
-          Morbi convallis felis massa, ac pharetra sem vestibulum volutpat.
-          Mauris id varius lacus, vel pharetra dui.
-        </p>
-      </Panel.Block>
-      <Panel.Footer>
-        <Button color={Button.COLORS.SECONDARY}>Cancel</Button>
-        <Button color={Button.COLORS.PRIMARY}>Save</Button>
-      </Panel.Footer>
-    </Panel>
-  </Grid>
-);
-
-export const PanelStack = (args) => (
-  <Grid container={Grid.CONTAINER_SIZES.SM}>
-    <Panel {...args}>
-      <Panel.Header title="Panel with a stack" />
-      <Panel.Stack>
-        <Icon icon={Icon.ICONS.CIRCLE_1} size={Icon.SIZES['2XL']} />
-        <p className={SageClassnames.TYPE.BODY}>
-          Each item is spaced appropriately. Lorem ipsum dolor sit amet
-        </p>
-        <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-          Aliquam malesuada leo
-        </p>
-      </Panel.Stack>
-    </Panel>
-  </Grid>
-);
-
-export const PanelList = (args) => (
-  <Grid container={Grid.CONTAINER_SIZES.MD}>
-    <Panel {...args}>
-      <Panel.Header title="Panel with a list" />
-      <Panel.List
-        itemGridTemplate={SageTokens.GRID_TEMPLATES.ETE}
-        items={[
-          (
-            <>
-              <Icon icon={Icon.ICONS.CHECK_CIRCLE} />
-              <Panel.Block>
-                <p className={SageClassnames.TYPE.BODY}>
-                  Lorem ipsum dolor sit amet
-                </p>
-                <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                  Aliquam malesuada leo
-                </p>
-              </Panel.Block>
-              <Button
-                icon={SageTokens.ICONS.DOT_MENU_HORIZONTAL}
-                subtle={true}
-                iconOnly={true}
-                color={Button.COLORS.SECONDARY}
-              >
-                Options
-              </Button>
-            </>
-          ),
-          (
-            <>
-              <Icon icon={Icon.ICONS.CHECK_CIRCLE} />
-              <Panel.Block>
-                <p className={SageClassnames.TYPE.BODY}>
-                  Lorem ipsum dolor sit amet
-                </p>
-                <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                  Aliquam malesuada leo
-                </p>
-              </Panel.Block>
-              <Button
-                icon={SageTokens.ICONS.DOT_MENU_HORIZONTAL}
-                subtle={true}
-                iconOnly={true}
-                color={Button.COLORS.SECONDARY}
-              >
-                Options
-              </Button>
-            </>
-          ),
-          (
-            <>
-              <Icon icon={Icon.ICONS.CHECK_CIRCLE} />
-              <Panel.Block>
-                <p className={SageClassnames.TYPE.BODY}>
-                  Lorem ipsum dolor sit amet
-                </p>
-                <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                  Aliquam malesuada leo
-                </p>
-              </Panel.Block>
-              <Button
-                icon={SageTokens.ICONS.DOT_MENU_HORIZONTAL}
-                subtle={true}
-                iconOnly={true}
-                color={Button.COLORS.SECONDARY}
-              >
-                Options
-              </Button>
-            </>
-          )
-        ]}
-      />
-    </Panel>
-  </Grid>
-);
-
-export const PanelTiles = ({ tiles, ...args }) => (
-  <Grid container={Grid.CONTAINER_SIZES.XL}>
-    <Panel {...args}>
-      <Panel.Header title="Panel with tiles" />
-      <Panel.Subheader title="Tiles provided through props" />
-      <Panel.Tiles
-        tilesInRow={tiles}
-        wrapTiles={false}
-        tiles={[
-          (
-            <Panel.Block>
-              <Icon icon={Icon.ICONS.CIRCLE_1} size={Icon.SIZES['2XL']} />
-              <p className={SageClassnames.TYPE.BODY}>
-                Lorem ipsum dolor sit amet
-              </p>
-              <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                Aliquam malesuada leo
-              </p>
-            </Panel.Block>
-          ),
-          (
-            <Panel.Block>
-              <Icon icon={Icon.ICONS.CIRCLE_2} size={Icon.SIZES['2XL']} />
-              <p className={SageClassnames.TYPE.BODY}>
-                Consectetur adipiscing elit
-              </p>
-              <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                Ut posuere tortor sodales
-              </p>
-            </Panel.Block>
-          ),
-          (
-            <Panel.Block>
-              <Icon icon={Icon.ICONS.CIRCLE_3} size={Icon.SIZES['2XL']} />
-              <p className={SageClassnames.TYPE.BODY}>
-                Nunc quis arcu maximus
-              </p>
-              <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                Praesent id urna vel arcu
-              </p>
-            </Panel.Block>
-          ),
-          (
-            <Panel.Block>
-              <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES['2XL']} />
-              <p className={SageClassnames.TYPE.BODY}>
-                Sed at ipsum pretium
-              </p>
-              <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                Ornare convallis vitae sit
-              </p>
-            </Panel.Block>
-          ),
-          (
-            <Panel.Block>
-              <Icon icon={Icon.ICONS.CIRCLE_5} size={Icon.SIZES['2XL']} />
-              <p className={SageClassnames.TYPE.BODY}>
-                Eleifend ligula
-              </p>
-              <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                Finibus est
-              </p>
-            </Panel.Block>
-          ),
-          (
-            <Panel.Block>
-              <Icon icon={Icon.ICONS.CIRCLE_6} size={Icon.SIZES['2XL']} />
-              <p className={SageClassnames.TYPE.BODY}>
-                Mauris in orci ac odio
-              </p>
-              <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                Aliquet tristique nec et mi
-              </p>
-            </Panel.Block>
-          ),
-          (
-            <Panel.Block>
-              <Icon icon={Icon.ICONS.CIRCLE_7} size={Icon.SIZES['2XL']} />
-              <p className={SageClassnames.TYPE.BODY}>
-                Proin nec tellus varius
-              </p>
-              <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-                Molestie libero vel
-              </p>
-            </Panel.Block>
-          )
-        ]}
-      />
-      <Panel.Divider />
-      <Panel.Subheader title="Tiles provided through as children" />
-      <Panel.Tiles tilesInRow={tiles}>
-        <Panel.Block>
-          <Icon icon={Icon.ICONS.CIRCLE_1} size={Icon.SIZES['2XL']} />
-          <p className={SageClassnames.TYPE.BODY}>
-            Lorem ipsum dolor sit amet
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Aliquam malesuada leo
-          </p>
-        </Panel.Block>
-        <Panel.Block>
-          <Icon icon={Icon.ICONS.CIRCLE_2} size={Icon.SIZES['2XL']} />
-          <p className={SageClassnames.TYPE.BODY}>
-            Consectetur adipiscing elit
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Ut posuere tortor sodales
-          </p>
-        </Panel.Block>
-        <Panel.Block>
-          <Icon icon={Icon.ICONS.CIRCLE_3} size={Icon.SIZES['2XL']} />
-          <p className={SageClassnames.TYPE.BODY}>
-            Nunc quis arcu maximus
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Praesent id urna vel arcu
-          </p>
-        </Panel.Block>
-        <Panel.Block>
-          <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES['2XL']} />
-          <p className={SageClassnames.TYPE.BODY}>
-            Sed at ipsum pretium
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Ornare convallis vitae sit
-          </p>
-        </Panel.Block>
-        <Panel.Block>
-          <Icon icon={Icon.ICONS.CIRCLE_5} size={Icon.SIZES['2XL']} />
-          <p className={SageClassnames.TYPE.BODY}>
-            Eleifend ligula
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Finibus est
-          </p>
-        </Panel.Block>
-        <Panel.Block>
-          <Icon icon={Icon.ICONS.CIRCLE_6} size={Icon.SIZES['2XL']} />
-          <p className={SageClassnames.TYPE.BODY}>
-            Mauris in orci ac odio
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Aliquet tristique nec et mi
-          </p>
-        </Panel.Block>
-        <Panel.Block>
-          <Icon icon={Icon.ICONS.CIRCLE_7} size={Icon.SIZES['2XL']} />
-          <p className={SageClassnames.TYPE.BODY}>
-            Proin nec tellus varius
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Molestie libero vel
-          </p>
-        </Panel.Block>
-      </Panel.Tiles>
-    </Panel>
-  </Grid>
-);
-PanelTiles.args = {
-  tiles: 3,
-};
-// fully custom ArgsTable
-PanelTiles.argTypes = {
-  tiles: {
-    control: {
-      type: 'select',
-      options: [2, 3, 4]
-    }
-  }
-};
-PanelTiles.defaultProps = {
-  tiles: null
-};
-PanelTiles.propTypes = {
-  tiles: PropTypes.number
-};
-
-export const PanelRow = (args) => (
-  <Grid container={Grid.CONTAINER_SIZES.LG}>
-    <Panel {...args}>
-      <Panel.Header title="Panel with a row" />
-      <Panel.Row gridTemplate={SageTokens.GRID_TEMPLATES.ETI}>
-        <Icon
-          icon={Icon.ICONS.CHECK_CIRCLE}
-          color={SageTokens.COLOR_SLIDERS.SAGE}
-          iconOnly={true}
-        />
-        <Panel.Block>
-          <p className={SageClassnames.TYPE.BODY}>
-            Proin nec tellus varius
-          </p>
-          <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}>
-            Molestie libero vel
-          </p>
-        </Panel.Block>
-        <Badge color={Badge.COLORS.WARNING} value="In progress" />
-        <Button
-          icon={SageTokens.ICONS.PEN}
-          subtle={true}
-          iconOnly={true}
-          color={Button.COLORS.PRIMARY}
-        >
-          Options
-        </Button>
-      </Panel.Row>
-    </Panel>
-  </Grid>
-);
-
-export const PanelFigure = ({ aspectRatio, backgroundColor, bleed, padded }) => (
-  <Grid container={Grid.CONTAINER_SIZES.LG}>
-    <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.SPACERS.MD_BOTTOM}`}>
-      <strong>Note:</strong> Normally there would be other content along with the figure.
-      Observe the space that remains inside the panel outside the figure with each setting.
-    </p>
-    <Panel>
-      <Panel.Figure
-        aspectRatio={aspectRatio}
-        backgroundColor={backgroundColor}
-        bleed={bleed}
-        padded={padded}
-      >
-        <img src="//source.unsplash.com/800x500" alt="" />
-      </Panel.Figure>
-    </Panel>
-  </Grid>
-);
-PanelFigure.args = {
-  aspectRatio: null,
-  backgroundColor: null,
-  bleed: null,
-  padded: false,
-};
-// fully custom ArgsTable
-PanelFigure.argTypes = {
-  bleed: {
-    control: {
-      type: 'radio',
-      options: Panel.Figure.BLEED_OPTIONS
-    }
-  },
-};
-PanelFigure.defaultProps = {
-  aspectRatio: null,
-  backgroundColor: null,
-  bleed: null,
-  padded: false,
-};
-PanelFigure.propTypes = {
-  aspectRatio: PropTypes.number,
-  backgroundColor: PropTypes.string,
-  bleed: PropTypes.oneOf(Object.values(Panel.Figure.BLEED_OPTIONS)),
-  padded: PropTypes.bool,
-};
diff --git a/packages/sage-react/lib/Panel/Panel.story.mdx b/packages/sage-react/lib/Panel/Panel.story.mdx
new file mode 100644
index 0000000000..585cca4b74
--- /dev/null
+++ b/packages/sage-react/lib/Panel/Panel.story.mdx
@@ -0,0 +1,387 @@
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
+import { Badge } from "../Badge";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { OptionsDropdown } from "../Dropdown";
+import { Panel } from "./Panel";
+import { SageClassnames, SageTokens } from "../configs";
+
+<Meta
+  title='Sage/Panel'
+  component={Panel}
+  subcomponents={{
+    "Panel.Header": Panel.Header,
+    "Panel.Block": Panel.Block,
+    "Panel.Divider": Panel.Divider,
+    "Panel.Footer": Panel.Footer,
+    "Panel.Stack": Panel.Stack,
+    "Panel.List": Panel.List,
+    "Panel.Subheader": Panel.Subheader,
+    "Panel.Subtext": Panel.Subtext,
+    "Panel.Tiles": Panel.Tiles,
+    "Panel.Figure": Panel.Figure,
+    "Panel.Row": Panel.Row,
+  }}
+/>
+
+export const DefaultTemplate = args => (
+  <Panel {...args}>
+    <Panel.Header title='Panel Title' />
+    <Panel.Block>
+      Eu occaecat dolor minim mollit dolore qui cillum aliquip mollit ipsum et
+      ullamco consectetur occaecat. Officia irure elit ex nulla. Labore qui sit
+      nulla ex excepteur qui id sit id minim irure excepteur et. Excepteur
+      consectetur nisi Lorem tempor do deserunt veniam occaecat.
+    </Panel.Block>
+    <Panel.Footer>
+      <Button color={Button.COLORS.PRIMARY}>Submit</Button>
+    </Panel.Footer>
+  </Panel>
+);
+
+# Panel
+
+Panels are rich containers that allow for grouping and organizing content details.
+
+All panels are made up of three basic building blocks: Header, Body, and Footer.
+
+<Canvas
+  mdxSource={`
+  <Panel>
+    <Panel.Header title="Panel Title" />
+    <Panel.Block>
+      Eu occaecat dolor minim mollit dolore qui cillum aliquip mollit ipsum et
+      ullamco consectetur occaecat. Officia irure elit ex nulla. Labore qui
+      sit nulla ex excepteur qui id sit id minim irure excepteur et. Excepteur
+      consectetur nisi Lorem tempor do deserunt veniam occaecat.
+    </Panel.Block>
+    <Panel.Footer>
+      <Button color={Button.COLORS.PRIMARY}>Submit</Button>
+    </Panel.Footer>
+  </Panel>
+`}
+>
+  <Story
+    name='Default'
+    args={{
+      children: null,
+      className: null,
+      clearPaddingBoth: false,
+      clearPaddingBottom: false,
+      clearPaddingTop: false,
+      loading: false,
+    }}
+  >
+    {DefaultTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable of={Panel} />
+
+## Panel Building blocks
+
+### Header
+
+This area usually contains at least a title and an icon or menu positioned in the right corner, both optional. An optional subtext element is useful for documenting the panel objective. It employs the Sage Row layout base with `24px` gutters.
+
+### Body
+
+There are a few options for the panel body container.
+
+#### Panel Block
+
+A block is a completely unopinionated container meant to provide the most flexible way to group elements within a panel. This component is purely a wrapper and does not apply any layout or spacing by default so it is great for blocks of text or small groups of content within some of the other panel components. Set `type_block` to `true` to enforce open text spacing rules as established by the `sage-type` class.
+
+<Canvas
+  mdxSource={`
+    <Panel>
+      <Panel.Block sageType={true}>
+        <p>Panel block text</p>
+      </Panel.Block>
+    </Panel>
+  `}
+>
+  <Story name='Block'>
+    <Panel>
+      <Panel.Block>
+        <p>Panel block text</p>
+      </Panel.Block>
+    </Panel>
+  </Story>
+</Canvas>
+
+#### Panel Stack
+
+A stack is a single column of elements sitting atop each other with the standard `8px` gap between each item in the stack. A common use is for stacking cards, but this is also help for presentation of several distinct lines of text content beyond open type formatting.
+
+<Canvas
+  mdxSource={`
+    <Panel>
+      <Panel.Stack>
+        <p>Panel stack text</p>
+        <p>Panel stack text</p>
+        <p>Panel stack text</p>
+      </Panel.Stack>
+    </Panel>
+  `}
+>
+  <Story name='Stack'>
+    <Panel>
+      <Panel.Stack>
+        <p>Panel stack text</p>
+        <p>Panel stack text</p>
+        <p>Panel stack text</p>
+      </Panel.Stack>
+    </Panel>
+  </Story>
+</Canvas>
+
+#### Panel List
+
+A list is a similar to a stack but has no space between items, and each item has a border that extends into the panel's outer gutters. Lists can also have row-like layouts with elements setup inline.
+
+<Canvas
+  mdxSource={`
+    <Panel>
+      <Panel.List>
+        <Panel.ListItem>
+          <p>Panel list text</p>
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <p>Panel list text</p>
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <p>Panel list text</p>
+        </Panel.ListItem>
+      </Panel.List>
+    </Panel>
+  `}
+>
+  <Story name='List'>
+    <Panel>
+      <Panel.List>
+        <Panel.ListItem>
+          <p>Panel list text</p>
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <p>Panel list text</p>
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <p>Panel list text</p>
+        </Panel.ListItem>
+      </Panel.List>
+    </Panel>
+  </Story>
+</Canvas>
+
+### Footer
+
+This area often contains one or more buttons that can be sent to the right edge of the panel with the `align_spread: true` component attribute. It employs the Sage Row layout base with `24px` gutters.
+
+### Miscellaneous
+
+#### Panel Row
+
+A panel row is a single or isolated inline arrangement of elements. It can either be a custom component or employ one of the standard [Grid Template Patterns](https://sage.kajabi.com/pages/patterns/grid_templates).
+
+<Canvas
+  mdxSource={`
+    <Panel>
+      <Panel.Row gridTemplate='eti'>
+        <Icon
+          icon={Icon.ICONS.CHECK_CIRCLE}
+          color={SageTokens.COLOR_SLIDERS.SAGE}
+        />
+        <Panel.Block>
+          <p className={SageClassnames.TYPE.BODY}>Proin nec tellus varius</p>
+          <p
+            className={"${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}"}
+          >
+            Molestie libero vel
+          </p>
+        </Panel.Block>
+        <Badge color={Badge.COLORS.WARNING} value='In progress' />
+        <Button
+          icon={SageTokens.ICONS.PEN}
+          subtle={true}
+          iconOnly={true}
+          color={Button.COLORS.PRIMARY}
+        >
+          Options
+        </Button>
+      </Panel.Row>
+    </Panel>
+  `}
+>
+  <Story name='Row'>
+    <Panel>
+      <Panel.Row gridTemplate='eti'>
+        <Icon
+          icon={Icon.ICONS.CHECK_CIRCLE}
+          color={SageTokens.COLOR_SLIDERS.SAGE}
+        />
+        <Panel.Block>
+          <p className={SageClassnames.TYPE.BODY}>Proin nec tellus varius</p>
+          <p
+            className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}
+          >
+            Molestie libero vel
+          </p>
+        </Panel.Block>
+        <Badge color={Badge.COLORS.WARNING} value='In progress' />
+        <Button
+          icon={SageTokens.ICONS.PEN}
+          subtle={true}
+          iconOnly={true}
+          color={Button.COLORS.PRIMARY}
+        >
+          Options
+        </Button>
+      </Panel.Row>
+    </Panel>
+  </Story>
+</Canvas>
+
+#### Panel Tiles
+
+Tiles are groups of elements that typically also each contain additional content but are laid out in a neat tiling pattern. Items can use the generic `.sage-panel__tile`, or be another Sage Component such as a Card. Use one of the tiling pattern modifiers to determine how many tiles appear in a row of the grid: 2-up, 3-up, and 4-up patterns.
+
+<Canvas
+  mdxSource={`
+    <Panel>
+      <Panel.Tiles tilesInRow={3}>
+        <Panel.Block>
+          <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES["2XL"]} />
+          <p className={SageClassnames.TYPE.BODY}>Sed at ipsum pretium</p>
+          <p
+            className={"${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}"}
+          >
+            Ornare convallis vitae sit
+          </p>
+        </Panel.Block>
+        <Panel.Block>
+          <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES["2XL"]} />
+          <p className={SageClassnames.TYPE.BODY}>Sed at ipsum pretium</p>
+          <p
+            className={"${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}"}
+          >
+            Ornare convallis vitae sit
+          </p>
+        </Panel.Block>
+        <Panel.Block>
+          <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES["2XL"]} />
+          <p className={SageClassnames.TYPE.BODY}>Sed at ipsum pretium</p>
+          <p
+            className={"${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}"}
+          >
+            Ornare convallis vitae sit
+          </p>
+        </Panel.Block>
+      </Panel.Tiles>
+    </Panel>
+  `}
+>
+  <Story name='Tiles'>
+    <Panel>
+      <Panel.Tiles tilesInRow={3}>
+        <Panel.Block>
+          <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES["2XL"]} />
+          <p className={SageClassnames.TYPE.BODY}>Sed at ipsum pretium</p>
+          <p
+            className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}
+          >
+            Ornare convallis vitae sit
+          </p>
+        </Panel.Block>
+        <Panel.Block>
+          <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES["2XL"]} />
+          <p className={SageClassnames.TYPE.BODY}>Sed at ipsum pretium</p>
+          <p
+            className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}
+          >
+            Ornare convallis vitae sit
+          </p>
+        </Panel.Block>
+        <Panel.Block>
+          <Icon icon={Icon.ICONS.CIRCLE_4} size={Icon.SIZES["2XL"]} />
+          <p className={SageClassnames.TYPE.BODY}>Sed at ipsum pretium</p>
+          <p
+            className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_500}`}
+          >
+            Ornare convallis vitae sit
+          </p>
+        </Panel.Block>
+      </Panel.Tiles>
+    </Panel>
+  </Story>
+</Canvas>
+
+#### Panel Divider
+
+The Divider is a thin rule that helps to provide additional visual separation between groups within the panel.
+
+<Canvas
+  mdxSource={`
+    <Panel>
+      <Panel.Block>
+        <p>Divider</p>
+      </Panel.Block>
+      <Panel.Divider />
+      <Panel.Block>
+        <p>Divider with label</p>
+      </Panel.Block>
+      <Panel.Divider data-divider-label='Divider label' />
+      <Panel.Block>
+        <p>Divider with full bleed</p>
+      </Panel.Block>
+      <Panel.Divider bleed={true} />
+      <Panel.Block>
+        <p>Panel block text</p>
+      </Panel.Block>
+    </Panel>
+  `}
+>
+  <Story name='Divider'>
+    <Panel>
+      <Panel.Block>
+        <p>Divider</p>
+      </Panel.Block>
+      <Panel.Divider />
+      <Panel.Block>
+        <p>Divider with label</p>
+      </Panel.Block>
+      <Panel.Divider data-divider-label='Divider label' />
+      <Panel.Block>
+        <p>Divider with full bleed</p>
+      </Panel.Block>
+      <Panel.Divider bleed={true} />
+      <Panel.Block>
+        <p>Panel block text</p>
+      </Panel.Block>
+    </Panel>
+  </Story>
+</Canvas>
+
+#### Panel Figure
+
+A panel figure contains an image that occupies a substantive space in the panel.
+
+<Canvas
+  mdxSource={`
+    <Panel>
+      <Panel.Figure>
+        <img src='https://source.unsplash.com/random/800x600' alt='' />
+      </Panel.Figure>
+    </Panel>
+  `}
+>
+  <Story name='Figure'>
+    <Panel>
+      <Panel.Figure>
+        <img src='https://source.unsplash.com/random/800x600' alt='' />
+      </Panel.Figure>
+    </Panel>
+  </Story>
+</Canvas>