diff --git a/packages/big-design/src/components/AccordionPanel/Accordion/Accordion.tsx b/packages/big-design/src/components/AccordionPanel/Accordion/Accordion.tsx
new file mode 100644
index 000000000..f84855787
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/Accordion/Accordion.tsx
@@ -0,0 +1,49 @@
+import { ExpandMoreIcon } from '@bigcommerce/big-design-icons';
+import React, { memo } from 'react';
+
+import { useUniqueId } from '../../../hooks';
+
+import { StyledAccordionButton, StyledAccordionContent } from './styled';
+
+export interface AccordionProps {
+  children?: React.ReactNode;
+  defaultExpanded?: boolean;
+  header: string;
+  iconLeft?: React.ReactNode;
+  isExpanded: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export const Accordion: React.FC<AccordionProps> = memo(
+  ({ children, header, iconLeft, isExpanded, onClick }) => {
+    const accordionId = useUniqueId('accordion');
+    const accordionItemId = useUniqueId('accordion-item');
+
+    return (
+      <>
+        <StyledAccordionButton
+          aria-controls={accordionItemId}
+          aria-expanded={isExpanded}
+          iconLeft={iconLeft}
+          iconRight={<ExpandMoreIcon className="collapse-icon" color="secondary70" />}
+          id={accordionId}
+          isExpanded={isExpanded}
+          onClick={onClick}
+          variant="subtle"
+        >
+          {header}
+        </StyledAccordionButton>
+        <StyledAccordionContent
+          aria-labelledby={accordionId}
+          display={isExpanded ? 'block' : 'none'}
+          hidden={!isExpanded}
+          iconLeft={iconLeft}
+          id={accordionItemId}
+          role="region"
+        >
+          {children}
+        </StyledAccordionContent>
+      </>
+    );
+  },
+);
diff --git a/packages/big-design/src/components/AccordionPanel/Accordion/index.ts b/packages/big-design/src/components/AccordionPanel/Accordion/index.ts
new file mode 100644
index 000000000..6484592db
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/Accordion/index.ts
@@ -0,0 +1,4 @@
+import { AccordionProps as _AccordionProps } from './Accordion';
+
+export { Accordion } from './Accordion';
+export type AccordionProps = _AccordionProps;
diff --git a/packages/big-design/src/components/AccordionPanel/Accordion/styled.tsx b/packages/big-design/src/components/AccordionPanel/Accordion/styled.tsx
new file mode 100644
index 000000000..142d8bb44
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/Accordion/styled.tsx
@@ -0,0 +1,58 @@
+import { theme as defaultTheme, remCalc } from '@bigcommerce/big-design-theme';
+import styled, { css } from 'styled-components';
+
+import { withTransition } from '../../../mixins/transitions';
+import { Box } from '../../Box';
+import { StyleableButton } from '../../Button/private';
+
+interface StyledAccordionButtonProps {
+  isExpanded: boolean;
+}
+
+interface StyledAccordionContentProps {
+  iconLeft: React.ReactNode;
+}
+
+export const StyledAccordionButton = styled(StyleableButton)<StyledAccordionButtonProps>`
+  border-top: ${({ theme }) => theme.border.box};
+  border-radius: 0;
+  padding: ${({ theme }) => theme.spacing.xLarge};
+  text-align: left;
+  width: 100%;
+  span {
+    width: 100%;
+    color: ${({ theme }) => theme.colors.secondary70};
+    grid-template-columns: ${({ iconLeft, theme }) =>
+      iconLeft
+        ? `${theme.spacing.xLarge} 1fr ${theme.spacing.medium}`
+        : `1fr ${theme.spacing.medium}`};
+  }
+
+  ${({ isExpanded }) =>
+    isExpanded &&
+    css`
+      border-bottom: ${({ theme }) => theme.border.box};
+    `}
+
+  &:focus {
+    z-index: ${({ theme }) => theme.zIndex.fixed};
+  }
+
+  .collapse-icon {
+    ${withTransition(['transform'])}
+
+    ${({ isExpanded }) =>
+      isExpanded &&
+      css`
+        transform: rotate(-180deg);
+      `}
+  }
+`;
+
+export const StyledAccordionContent = styled(Box)<StyledAccordionContentProps>`
+  padding: ${({ theme }) => theme.spacing.xLarge}};
+  padding-left: ${({ iconLeft, theme }) => (iconLeft ? remCalc(60) : `${theme.spacing.xLarge}`)};
+`;
+
+StyledAccordionButton.defaultProps = { theme: defaultTheme };
+StyledAccordionContent.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/AccordionPanel/AccordionPanel.tsx b/packages/big-design/src/components/AccordionPanel/AccordionPanel.tsx
new file mode 100644
index 000000000..ed3ecf5c5
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/AccordionPanel.tsx
@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+
+import { Panel } from '../Panel';
+
+import { Accordion, AccordionProps } from './Accordion';
+import { StyledAccordionPanelWrapper } from './styled';
+
+export interface AccordionPanelProps {
+  header: string;
+  panels: AccordionProps[];
+}
+
+export const AccordionPanel: React.FC<AccordionPanelProps> = memo(({ header, panels }) => {
+  return (
+    <Panel header={header}>
+      <StyledAccordionPanelWrapper>
+        {panels.map((panel, index) => (
+          <Accordion {...panel} key={index} />
+        ))}
+      </StyledAccordionPanelWrapper>
+    </Panel>
+  );
+});
diff --git a/packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap
new file mode 100644
index 000000000..3aa06be8e
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders accordion panel header 1`] = `
+<h2
+  class="styled__StyledH2-sc-tqnj75-2 styled__StyledH2-sc-1h6ef3q-1 kEGvNd fjdBDH"
+>
+  Accordion Panel Header
+</h2>
+`;
diff --git a/packages/big-design/src/components/AccordionPanel/index.ts b/packages/big-design/src/components/AccordionPanel/index.ts
new file mode 100644
index 000000000..1a5daa750
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/index.ts
@@ -0,0 +1,5 @@
+import { AccordionPanelProps as _AccordionPanelProps } from './AccordionPanel';
+
+export { AccordionPanel } from './AccordionPanel';
+export { useAccordionPanel } from './useAccordionPanel';
+export type AccordionPanelProps = _AccordionPanelProps;
diff --git a/packages/big-design/src/components/AccordionPanel/spec.tsx b/packages/big-design/src/components/AccordionPanel/spec.tsx
new file mode 100644
index 000000000..d13309fc9
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/spec.tsx
@@ -0,0 +1,135 @@
+import { ErrorIcon } from '@bigcommerce/big-design-icons';
+import userEvent from '@testing-library/user-event';
+import React, { useState } from 'react';
+
+import { render, screen } from '@test/utils';
+
+import { Text } from '../Typography';
+
+import { AccordionProps } from './Accordion';
+
+import { AccordionPanel, useAccordionPanel } from '.';
+
+const TestComponent: React.FC = () => {
+  const { panels } = useAccordionPanel([
+    {
+      header: 'Panel Header',
+      children: <Text>This is a child component</Text>,
+    },
+  ]);
+
+  return <AccordionPanel header="Accordion Panel Header" panels={panels} />;
+};
+
+const TestComponentWithoutHook: React.FC = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const testPanels: AccordionProps[] = [
+    {
+      header: 'Panel Header',
+      isExpanded,
+      children: <Text>This is a child component</Text>,
+      onClick: () => setIsExpanded(!isExpanded),
+    },
+  ];
+
+  return <AccordionPanel header="Accordion Panel Header" panels={testPanels} />;
+};
+
+const TestComponentWithDefault: React.FC = () => {
+  const { panels } = useAccordionPanel([
+    {
+      defaultExpanded: true,
+      header: 'Panel Header',
+      iconLeft: <ErrorIcon />,
+      children: <Text>This is a child component</Text>,
+    },
+  ]);
+
+  return <AccordionPanel header="Accordion Panel Header" panels={panels} />;
+};
+
+test('it renders accordion panel header', async () => {
+  render(<TestComponent />);
+
+  const header = await screen.findByRole('heading', { name: /Accordion Panel Header/i });
+
+  expect(header).toMatchSnapshot();
+  expect(header).toBeVisible();
+});
+
+test('it renders accordion panel children', async () => {
+  render(<TestComponent />);
+
+  const child = await screen.findByText('Panel Header');
+
+  expect(child).toBeVisible();
+});
+
+test('accordion renders header', async () => {
+  render(<TestComponent />);
+
+  const header = await screen.findByText('Panel Header');
+
+  expect(header).toBeVisible();
+});
+
+test('accordion collapses and expands on click', async () => {
+  render(<TestComponent />);
+
+  const buttonPanel = await screen.findByRole('button');
+
+  await userEvent.click(buttonPanel);
+
+  const panelChild = await screen.findByRole('region');
+
+  expect(panelChild).toBeVisible();
+
+  await userEvent.click(buttonPanel);
+
+  expect(panelChild).not.toBeVisible();
+});
+
+test('accordion renders children', async () => {
+  render(<TestComponent />);
+
+  const buttonPanel = await screen.findByRole('button');
+
+  await userEvent.click(buttonPanel);
+
+  const child = await screen.findByRole('region');
+
+  expect(child).toBeVisible();
+});
+
+test('if defaultExpanded is set to true, accordion panel is expanded', async () => {
+  render(<TestComponentWithDefault />);
+
+  const panelChild = await screen.findByRole('region');
+
+  expect(panelChild).toBeVisible();
+});
+
+test('it renders icon if iconLeft prop is defined', async () => {
+  render(<TestComponentWithDefault />);
+
+  const icons = (await screen.findByRole('button')).querySelectorAll('svg');
+
+  const icon = icons[0];
+
+  expect(icon).toBeVisible();
+});
+
+test('it renders header and children accordion elements without hook', async () => {
+  render(<TestComponentWithoutHook />);
+
+  const header = await screen.findByText('Panel Header');
+  const buttonPanel = await screen.findByRole('button');
+
+  await userEvent.click(buttonPanel);
+
+  const child = await screen.findByRole('region');
+
+  expect(child).toBeVisible();
+  expect(header).toBeVisible();
+});
diff --git a/packages/big-design/src/components/AccordionPanel/styled.tsx b/packages/big-design/src/components/AccordionPanel/styled.tsx
new file mode 100644
index 000000000..cb87399bb
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/styled.tsx
@@ -0,0 +1,20 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import styled from 'styled-components';
+
+import { Flex } from '../Flex';
+
+export const StyledAccordionPanelWrapper = styled(Flex)`
+  flex-direction: column;
+
+  margin-bottom: -${({ theme }) => theme.spacing.medium};
+  margin-left: -${({ theme }) => theme.spacing.medium};
+  margin-right: -${({ theme }) => theme.spacing.medium};
+
+  ${({ theme }) => theme.breakpoints.tablet} {
+    margin-bottom: -${({ theme }) => theme.spacing.xLarge};
+    margin-left: -${({ theme }) => theme.spacing.xLarge};
+    margin-right: -${({ theme }) => theme.spacing.xLarge};
+  }
+`;
+
+StyledAccordionPanelWrapper.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/AccordionPanel/useAccordionPanel.ts b/packages/big-design/src/components/AccordionPanel/useAccordionPanel.ts
new file mode 100644
index 000000000..8b6a64da2
--- /dev/null
+++ b/packages/big-design/src/components/AccordionPanel/useAccordionPanel.ts
@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import { AccordionProps } from './Accordion';
+
+type InitialPanels = Array<Omit<AccordionProps, 'isExpanded' | 'onClick'>>;
+
+export const useAccordionPanel = (initialPanels: InitialPanels) => {
+  const [expandedPanels, setExpandedPanels] = useState(() => {
+    return initialPanels.map(({ defaultExpanded }) => defaultExpanded ?? false);
+  });
+
+  const handleOnClick = (panelIndex: number) => () => {
+    setExpandedPanels(
+      expandedPanels.map((isExpanded, index) => (index === panelIndex ? !isExpanded : isExpanded)),
+    );
+  };
+
+  return {
+    panels: expandedPanels.map<AccordionProps>((isExpanded, index) => ({
+      ...initialPanels[index],
+      isExpanded,
+      onClick: handleOnClick(index),
+    })),
+  };
+};
diff --git a/packages/big-design/src/components/index.ts b/packages/big-design/src/components/index.ts
index 5b484ce21..3ec38e0f9 100644
--- a/packages/big-design/src/components/index.ts
+++ b/packages/big-design/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './AccordionPanel';
 export * from './Alert';
 export * from './Badge';
 export * from './Box';
diff --git a/packages/docs/PropTables/AccordionPanelPropTable.tsx b/packages/docs/PropTables/AccordionPanelPropTable.tsx
new file mode 100644
index 000000000..0444e8499
--- /dev/null
+++ b/packages/docs/PropTables/AccordionPanelPropTable.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+
+import { Code, NextLink, Prop, PropTable, PropTableWrapper } from '../components';
+
+const accordionPanelProps: Prop[] = [
+  {
+    name: 'panels',
+    types: (
+      <NextLink href={{ hash: 'accordion-prop-table', query: { props: 'accordion' } }}>
+        AccordionProps[]
+      </NextLink>
+    ),
+    description: (
+      <>
+        See{' '}
+        <NextLink href={{ hash: 'accordion-prop-table', query: { props: 'accordion' } }}>
+          Accordion
+        </NextLink>{' '}
+        for usage.
+      </>
+    ),
+    required: true,
+  },
+  {
+    name: 'header',
+    types: 'string',
+    description: (
+      <>
+        Defines the <Code primary>Accordion Panel</Code> header text
+      </>
+    ),
+    required: true,
+  },
+];
+
+export const AccordionPanelPropTable: React.FC<PropTableWrapper> = (props) => (
+  <PropTable propList={accordionPanelProps} title="Accordion Panel" {...props} />
+);
+
+const accordionProps: Prop[] = [
+  {
+    name: 'children',
+    types: 'React.ReactNode',
+    description: (
+      <>
+        Render individual components to expandable region of <Code primary>Accordion</Code>.
+      </>
+    ),
+    required: true,
+  },
+  {
+    name: 'defaultExpanded',
+    types: 'boolean',
+    description: (
+      <>
+        Defines if <Code primary>Accordion</Code> is expanded by default.
+      </>
+    ),
+  },
+  {
+    name: 'header',
+    types: 'string',
+    description: (
+      <>
+        Defines the <Code primary>Accordion</Code> header text.
+      </>
+    ),
+    required: true,
+  },
+  {
+    name: 'iconLeft',
+    types: <NextLink href="/icons">Icon</NextLink>,
+    description: (
+      <>
+        Pass in an <NextLink href="/icons">Icon</NextLink> component to display to the left of the{' '}
+        <Code primary>Accordion</Code> header.
+      </>
+    ),
+  },
+  {
+    name: 'isExpanded',
+    types: 'boolean',
+    description: (
+      <>
+        Defines if <Code primary>Accordion</Code> is expanded.
+      </>
+    ),
+    required: true,
+  },
+  {
+    name: 'onClick',
+    types: 'React.MouseEventHandler<HTMLButtonElement>',
+    description: (
+      <>
+        Function that will be called when an <Code primary>Accordion</Code> is clicked.
+      </>
+    ),
+    required: true,
+  },
+];
+
+export const AccordionPropTable: React.FC<PropTableWrapper> = (props) => (
+  <PropTable propList={accordionProps} title="Accordion" {...props} />
+);
diff --git a/packages/docs/PropTables/index.ts b/packages/docs/PropTables/index.ts
index a52e32547..6e35af9d7 100644
--- a/packages/docs/PropTables/index.ts
+++ b/packages/docs/PropTables/index.ts
@@ -1,3 +1,4 @@
+export * from './AccordionPanelPropTable';
 export * from './BadgePropTable';
 export * from './BoxPropTable';
 export * from './ButtonPropTable';
diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx
index b0c28c43e..775b3f7e5 100644
--- a/packages/docs/components/SideNav/SideNav.tsx
+++ b/packages/docs/components/SideNav/SideNav.tsx
@@ -41,6 +41,7 @@ export const SideNav: React.FC = () => {
         </SideNavGroup>
 
         <SideNavGroup title="Layout">
+          <SideNavLink href="/accordion-panel">Accordion Panel</SideNavLink>
           <SideNavLink href="/collapse">Collapse</SideNavLink>
           <SideNavLink href="/modal">Modal</SideNavLink>
           <SideNavLink href="/pagination">Pagination</SideNavLink>
diff --git a/packages/docs/pages/accordion-panel.tsx b/packages/docs/pages/accordion-panel.tsx
new file mode 100644
index 000000000..94629733d
--- /dev/null
+++ b/packages/docs/pages/accordion-panel.tsx
@@ -0,0 +1,105 @@
+import { AccordionPanel, H1, Panel, Text, useAccordionPanel } from '@bigcommerce/big-design';
+import React from 'react';
+
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
+import { AccordionPanelPropTable, AccordionPropTable } from '../PropTables/AccordionPanelPropTable';
+
+const AccordionPanelPage = () => {
+  return (
+    <>
+      <H1>Accordion Panel</H1>
+
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          <Code primary>Accordion panels</Code> are containers for content of relative importance to
+          the user that can be selectively expanded or collapsed. They can be useful for reducing
+          the content on a page &amp; the cognitive load for the user.
+        </Text>
+        <Text>
+          An <Code primary>accordion panel</Code> can display different types of content such as
+          text, images, tables, media, buttons, etc. Components are added into the drop zone and
+          render when the user expands the corresponding panel.
+        </Text>
+
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>On similar or redundant information that must be presented together</List.Item>
+          <List.Item>Step-by-step or sequential processes</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <CodePreview>
+          {/* jsx-to-string:start */}
+          {function Example() {
+            const { panels } = useAccordionPanel([
+              {
+                defaultExpanded: true,
+                header: 'Panel Header',
+                children: (
+                  <Text>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit
+                    libero volutpat. Eu lobortis elementum nibh tellus molestie nunc non.
+                  </Text>
+                ),
+              },
+              {
+                header: 'Panel Header',
+                children: (
+                  <Text>
+                    Nullam eleifend a lectus non consequat. Fusce non mauris at velit sodales
+                    venenatis vitae ut erat. In hac habitasse platea dictumst. Quisque venenatis
+                    turpis at dapibus posuere. Phasellus pulvinar velit id tellus luctus, ac
+                    pharetra libero consequat.
+                  </Text>
+                ),
+              },
+            ]);
+
+            return <AccordionPanel header="Accordion Panel Header" panels={panels} />;
+          }}
+          {/* jsx-to-string:end */}
+        </CodePreview>
+      </Panel>
+
+      <Panel header="Props" headerId="props">
+        <ContentRoutingTabs
+          id="props"
+          routes={[
+            {
+              id: 'accordion-panel',
+              title: 'AccordionPanel',
+              render: () => <AccordionPanelPropTable />,
+            },
+            {
+              id: 'accordion',
+              title: 'Accordion',
+              render: () => <AccordionPropTable id="accordion-prop-table" />,
+            },
+          ]}
+        />
+      </Panel>
+
+      <Panel header="Do's and Don'ts" headerId="guidelines">
+        <GuidelinesTable
+          discouraged={[
+            'Do not use accordions to hide important user tasks.',
+            'Do not use the icon prop unless it provides benefit to the user.',
+            'Do not nest accordions within accordions.',
+            'Do not use an accordion to hide a singular piece of content.',
+          ]}
+          recommended={[
+            'Choose meaningful headers that describe the content revealed on expand.',
+            'Use the icon prop sparingly; an appropriate use would be the status of a task hidden in the accordion.',
+            'Use accordions to present parallel content or like items.',
+            'Limit the number of tasks hidden in each accordion to one.',
+            'Start with all panels collapsed unless the user has been redirected to the content.',
+          ]}
+        />
+      </Panel>
+    </>
+  );
+};
+
+export default AccordionPanelPage;