diff --git a/docs/upgrade-to-4.0.md b/docs/upgrade-to-4.0.md
index 0672d9fb..5a36dc21 100644
--- a/docs/upgrade-to-4.0.md
+++ b/docs/upgrade-to-4.0.md
@@ -81,6 +81,42 @@ Should become this:
 It is now required that a `js-enabled` class is added to a parent element if JavaScript is enabled (we suggest using `body`). E.g. `<body class="js-enabled">`.
 This is to facilitate a differentiation in styling to the header depending on whether JavaScript is enabled or disabled.
 
+### CareCard is now a variant of Card
+
+`CareCard` has been removed as a standalone component and the `Card` component has been refactored to provide this functionality. This is achieved via the `cardType` prop.
+
+Notice also that the `immediate` type of card is unsupported - this has been replaced with `emergency`.
+
+Before, using the `CareCard`, you may have markup that looks like this:
+
+```
+<CareCard type='immediate'>
+    <CareCard.Heading>Call 999 if:</CareCard.Heading>
+    <CareCard.Content>
+        <div>Your care card contents</div>
+    </CareCard.Content>
+</CareCard>
+```
+
+Now, it should look like this:
+
+```
+<Card cardType='emergency'>
+    <Card.Heading>Call 999 if:</CareCard.Heading>
+    <Card.Content>
+        <div>Your care card contents</div>
+    </Card.Content>
+</Card>
+```
+
+### NavAZ and ListPanel
+
+Due to these components being [removed from the nhsuk-frontend library](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#600---29-november-2021), refactoring has taken place to ensure they still adhere to the NHS digital service manual.
+
+The `NavAZ` component is still available, however the `ListPanel` component has now been renamed to `Panel`. To combine multiple panels you would simply render them as siblings - there is no need to wrap them in a list.
+
+An additional storybook story has been added to give a full example of an A-Z page, combining both of these components. This helps to bring this library into alignment with the [NHS digital service manual listing](https://service-manual.nhs.uk/design-system/patterns/a-to-z-page) for this pattern.
+
 ## New features
 
 ### Text input prefixes + suffixes
@@ -162,7 +198,7 @@ More information can be found in the [NHS digital service manual](https://servic
 Usage:
 
 ```
-<Card clickable primary>
+<Card clickable cardType='primary'>
     <Card.Content>
         <Card.Heading>
             <Card.Link href="#">Primary card heading</Card.Link>
@@ -180,7 +216,7 @@ More information can be found in the [NHS digital service manual](https://servic
 Usage:
 
 ```
-<Card clickable secondary>
+<Card clickable cardType='secondary'>
     <Card.Content>
         <Card.Heading>
             <Card.Link href="#">Secondary card heading</Card.Link>
diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
index 07571000..76f62a08 100644
--- a/src/__tests__/index.test.ts
+++ b/src/__tests__/index.test.ts
@@ -43,10 +43,10 @@ describe('Index', () => {
       'InsetText',
       'Label',
       'LedeText',
-      'ListPanel',
       'MinusIcon',
       'NavAZ',
       'Pagination',
+      'Panel',
       'PlusIcon',
       'Radios',
       'ReadingWidth',
diff --git a/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx b/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx
index e29653a4..a6773583 100644
--- a/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx
+++ b/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import CharacterCount, { CharacterCountType } from '../CharacterCount';
-import { Label, HintText, Textarea } from '../../../..';
+import Label from '@components/form-elements/label/Label';
+import HintText from '@components/form-elements/hint-text/HintText';
+import Textarea from '@components/form-elements/textarea/Textarea';
 
 describe('Character Count', () => {
   it('Matches snapshot', () => {
diff --git a/src/components/list-panel/ListPanel.tsx b/src/components/list-panel/ListPanel.tsx
deleted file mode 100644
index 58f8de35..00000000
--- a/src/components/list-panel/ListPanel.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { HTMLProps } from 'react';
-import classNames from 'classnames';
-import type { AsElementLink } from '@util/types/LinkTypes';
-import { ArrowRight } from '@components/icons';
-
-interface PanelProps extends HTMLProps<HTMLDivElement> {
-  labelProps?: HTMLProps<HTMLHeadingElement>;
-  backToTop?: boolean;
-  backToTopButtonText?: string;
-  backToTopLink?: string;
-  noResults?: boolean;
-}
-
-const Panel: React.FC<PanelProps> = ({
-  className,
-  children,
-  noResults,
-  label,
-  labelProps,
-  backToTop,
-  backToTopLink,
-  backToTopButtonText,
-  ...rest
-}) => (
-  <li>
-    <div className={classNames('nhsuk-list-panel', className)} {...rest}>
-      {label ? (
-        <h2 className="nhsuk-list-panel__label" {...labelProps}>
-          {label}
-        </h2>
-      ) : null}
-      {noResults ? (
-        <div
-          className={classNames('nhsuk-list-panel__box', {
-            'nhsuk-list-panel__box--with-label': label,
-          })}
-        >
-          <p className="nhsuk-list-panel--results-items__no-results">{children}</p>
-        </div>
-      ) : (
-        <ul
-          className={classNames('nhsuk-list-panel__list', {
-            'nhsuk-list-panel__list--with-label': label,
-          })}
-        >
-          {children}
-        </ul>
-      )}
-      {backToTop ? (
-        <div className="nhsuk-back-to-top">
-          <a className="nhsuk-back-to-top__link" href={backToTopLink}>
-            <ArrowRight width={19} height={19} />
-            {backToTopButtonText || 'Back to top'}
-          </a>
-        </div>
-      ) : null}
-    </div>
-  </li>
-);
-
-const PanelItem: React.FC<HTMLProps<HTMLLIElement>> = ({ className, ...rest }) => (
-  <li className={classNames('nhsuk-list-panel__item', className)} {...rest} />
-);
-
-const PanelLinkItem: React.FC<AsElementLink<HTMLAnchorElement>> = ({
-  className,
-  asElement: Component = 'a',
-  ...rest
-}) => (
-  <PanelItem>
-    <Component className={classNames('nhsuk-list-panel__link', className)} {...rest} />
-  </PanelItem>
-);
-
-interface ListPanelProps extends HTMLProps<HTMLOListElement> {
-  type?: 'a' | 'i' | '1' | 'A' | 'I' | undefined;
-}
-
-interface ListPanel extends React.FC<ListPanelProps> {
-  LinkItem: React.FC<HTMLProps<HTMLAnchorElement>>;
-  Item: React.FC<HTMLProps<HTMLLIElement>>;
-  Panel: React.FC<PanelProps>;
-}
-
-const ListPanel: ListPanel = ({ className, children, ...rest }) => (
-  <ol className={classNames('nhsuk-list', className)} {...rest}>
-    {children}
-  </ol>
-);
-
-ListPanel.LinkItem = PanelLinkItem;
-ListPanel.Item = PanelItem;
-ListPanel.Panel = Panel;
-
-export default ListPanel;
diff --git a/src/components/list-panel/__tests__/ListPanel.test.tsx b/src/components/list-panel/__tests__/ListPanel.test.tsx
deleted file mode 100644
index dc984c71..00000000
--- a/src/components/list-panel/__tests__/ListPanel.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ListPanel from '../';
-
-describe('ListPanel', () => {
-  it('matches snapshot', () => {
-    const { container } = render(<ListPanel />);
-
-    expect(container).toMatchSnapshot('ListPanel');
-  });
-
-  it('renders a list', () => {
-    const { container } = render(<ListPanel />);
-
-    expect(container.querySelector('.nhsuk-list')).toBeTruthy();
-  });
-
-  describe('ListPanel.Panel', () => {
-    it('matches snapshot', () => {
-      const { container } = render(<ListPanel.Panel />);
-
-      expect(container).toMatchSnapshot('ListPanel.Panel');
-    });
-
-    it('renders label', () => {
-      const { container } = render(<ListPanel.Panel label="Label" />);
-      const label = container.querySelector('.nhsuk-list-panel__label');
-
-      expect(label).toBeTruthy();
-      expect(label?.textContent).toBe('Label');
-      expect(
-        container.querySelector('.nhsuk-list-panel__list.nhsuk-list-panel__list--with-label'),
-      ).toBeTruthy();
-    });
-
-    it('renders back to top button', () => {
-      const { container } = render(<ListPanel.Panel backToTop />);
-
-      expect(container.querySelector('.nhsuk-back-to-top')).toBeTruthy();
-    });
-
-    it('renders back to top button with custom text', () => {
-      const { container } = render(<ListPanel.Panel backToTop backToTopButtonText="Custom" />);
-
-      expect(container.querySelector('.nhsuk-back-to-top__link')?.textContent).toBe('Custom');
-    });
-  });
-
-  describe('ListPanel.Item', () => {
-    it('matches snapshot', () => {
-      const { container } = render(<ListPanel.Item />);
-
-      expect(container).toMatchSnapshot('ListPanel.Item');
-    });
-  });
-
-  describe('ListPanel.LinkItem', () => {
-    it('matches snapshot', () => {
-      const { container } = render(<ListPanel.LinkItem />);
-
-      expect(container).toMatchSnapshot('ListPanel.LinkItem');
-    });
-  });
-});
diff --git a/src/components/list-panel/__tests__/__snapshots__/ListPanel.test.tsx.snap b/src/components/list-panel/__tests__/__snapshots__/ListPanel.test.tsx.snap
deleted file mode 100644
index edebb7d1..00000000
--- a/src/components/list-panel/__tests__/__snapshots__/ListPanel.test.tsx.snap
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListPanel ListPanel.Item matches snapshot: ListPanel.Item 1`] = `
-<div>
-  <li
-    class="nhsuk-list-panel__item"
-  />
-</div>
-`;
-
-exports[`ListPanel ListPanel.LinkItem matches snapshot: ListPanel.LinkItem 1`] = `
-<div>
-  <li
-    class="nhsuk-list-panel__item"
-  >
-    <a
-      class="nhsuk-list-panel__link"
-    />
-  </li>
-</div>
-`;
-
-exports[`ListPanel ListPanel.Panel matches snapshot: ListPanel.Panel 1`] = `
-<div>
-  <li>
-    <div
-      class="nhsuk-list-panel"
-    >
-      <ul
-        class="nhsuk-list-panel__list"
-      />
-    </div>
-  </li>
-</div>
-`;
-
-exports[`ListPanel matches snapshot: ListPanel 1`] = `
-<div>
-  <ol
-    class="nhsuk-list"
-  />
-</div>
-`;
diff --git a/src/components/list-panel/index.ts b/src/components/list-panel/index.ts
deleted file mode 100644
index 34adaa08..00000000
--- a/src/components/list-panel/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ListPanel from './ListPanel';
-
-export default ListPanel;
diff --git a/src/components/navigation/card/Card.tsx b/src/components/navigation/card/Card.tsx
index 309b9463..b9a9b31d 100644
--- a/src/components/navigation/card/Card.tsx
+++ b/src/components/navigation/card/Card.tsx
@@ -9,6 +9,7 @@ import CardHeading from './components/CardHeading';
 import CardGroup from './components/CardGroup';
 import CardGroupItem from './components/CardGroupItem';
 import { CardType } from '@util/types/NHSUKTypes';
+import { cardTypeIsCareCard } from '@util/types/TypeGuards';
 
 interface CardProps extends HTMLProps<HTMLDivElement> {
   clickable?: boolean;
@@ -25,26 +26,35 @@ interface ICard extends React.FC<CardProps> {
   GroupItem: typeof CardGroupItem;
 }
 
-const Card: ICard = ({ className, clickable, children, cardType, ...rest }) => (
-  <div
-    className={classNames(
-      'nhsuk-card',
-      { 'nhsuk-card--clickable': clickable },
-      { 'nhsuk-card--feature': cardType === 'feature' },
-      { 'nhsuk-card--secondary': cardType === 'secondary' },
-      className,
-    )}
-    {...rest}
-  >
-    <CardContext.Provider
-      value={{
-        cardType,
-      }}
-    >
-      {children}
-    </CardContext.Provider>
-  </div>
-);
+const Card: ICard = ({ className, clickable, children, cardType, ...rest }) => {
+  let cardClassNames = classNames(
+    'nhsuk-card',
+    { 'nhsuk-card--clickable': clickable },
+    { 'nhsuk-card--feature': cardType === 'feature' },
+    { 'nhsuk-card--secondary': cardType === 'secondary' },
+    className,
+  );
+
+  if (cardTypeIsCareCard(cardType)) {
+    cardClassNames = classNames(
+      cardClassNames,
+      'nhsuk-card--care',
+      `nhsuk-card--care--${cardType}`,
+    );
+  }
+
+  return (
+    <div className={cardClassNames} {...rest}>
+      <CardContext.Provider
+        value={{
+          cardType,
+        }}
+      >
+        {children}
+      </CardContext.Provider>
+    </div>
+  );
+};
 
 Card.Heading = CardHeading;
 Card.Description = CardDescription;
diff --git a/src/components/navigation/card/__tests__/Card.test.tsx b/src/components/navigation/card/__tests__/Card.test.tsx
index 05b8851d..2758b384 100644
--- a/src/components/navigation/card/__tests__/Card.test.tsx
+++ b/src/components/navigation/card/__tests__/Card.test.tsx
@@ -111,6 +111,144 @@ describe('Card', () => {
     ).toBeTruthy();
   });
 
+  describe('Care card variant', () => {
+    describe('non-urgent', () => {
+      it('matches the snapshot', () => {
+        const { container } = render(
+          <Card cardType="non-urgent">
+            <Card.Heading>Non urgent heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container).toMatchSnapshot();
+      });
+      it('adds classes to card', () => {
+        const { container } = render(
+          <Card cardType="non-urgent">
+            <Card.Heading>Non urgent heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care')).toBeTruthy();
+        expect(
+          container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care--non-urgent'),
+        ).toBeTruthy();
+      });
+
+      it('renders the heading with the expected hidden text', () => {
+        const { container } = render(
+          <Card cardType="non-urgent">
+            <Card.Heading>Non urgent heading</Card.Heading>
+          </Card>,
+        );
+
+        const headingContainer = container.querySelector('.nhsuk-card--care__heading-container');
+
+        expect(headingContainer?.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
+          'Non-urgent advice: ',
+        );
+      });
+    });
+
+    describe('urgent', () => {
+      it('matches the snapshot', () => {
+        const { container } = render(
+          <Card cardType="urgent">
+            <Card.Heading>Urgent heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container).toMatchSnapshot();
+      });
+      it('adds classes to card', () => {
+        const { container } = render(
+          <Card cardType="urgent">
+            <Card.Heading>Urgent heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care')).toBeTruthy();
+        expect(
+          container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care--urgent'),
+        ).toBeTruthy();
+      });
+
+      it('renders the heading with the expected hidden text', () => {
+        const { container } = render(
+          <Card cardType="urgent">
+            <Card.Heading>Urgent heading</Card.Heading>
+          </Card>,
+        );
+
+        const headingContainer = container.querySelector('.nhsuk-card--care__heading-container');
+
+        expect(headingContainer?.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
+          'Urgent advice: ',
+        );
+      });
+    });
+
+    describe('emergency', () => {
+      it('matches the snapshot', () => {
+        const { container } = render(
+          <Card cardType="emergency">
+            <Card.Heading>Emergency heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container).toMatchSnapshot();
+      });
+      it('adds classes to card', () => {
+        const { container } = render(
+          <Card cardType="emergency">
+            <Card.Heading>Emergency heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care')).toBeTruthy();
+        expect(
+          container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care--emergency'),
+        ).toBeTruthy();
+      });
+
+      it('renders the heading with the expected hidden text', () => {
+        const { container } = render(
+          <Card cardType="emergency">
+            <Card.Heading>Emergency heading</Card.Heading>
+          </Card>,
+        );
+
+        const headingContainer = container.querySelector('.nhsuk-card--care__heading-container');
+
+        expect(headingContainer?.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
+          'Immediate action required: ',
+        );
+      });
+    });
+
+    describe('hidden text', () => {
+      it('renders without hidden text', () => {
+        const { container } = render(
+          <Card cardType="urgent">
+            <Card.Heading visuallyHiddenText={false}>Heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container.querySelector('.nhsuk-u-visually-hidden')).toBeFalsy();
+      });
+
+      it('renders with hidden text', () => {
+        const { container } = render(
+          <Card cardType="urgent">
+            <Card.Heading visuallyHiddenText="Custom">Heading</Card.Heading>
+          </Card>,
+        );
+
+        expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual('Custom');
+      });
+    });
+  });
+
   describe('Card.Group', () => {
     it('matches snapshot', () => {
       const { container } = render(
diff --git a/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap b/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap
index 8b78a8a1..e45e8b15 100644
--- a/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap
+++ b/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap
@@ -53,6 +53,99 @@ exports[`Card Card.Group matches snapshot 1`] = `
 </div>
 `;
 
+exports[`Card Care card variant emergency matches the snapshot 1`] = `
+<div>
+  <div
+    class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency"
+  >
+    <div
+      class="nhsuk-card--care__heading-container"
+    >
+      <h2
+        class="nhsuk-card--care__heading"
+      >
+        <span
+          role="text"
+        >
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+            Immediate action required: 
+          </span>
+          Emergency heading
+        </span>
+      </h2>
+      <span
+        aria-hidden="true"
+        class="nhsuk-card--care__arrow"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Care card variant non-urgent matches the snapshot 1`] = `
+<div>
+  <div
+    class="nhsuk-card nhsuk-card--care nhsuk-card--care--non-urgent"
+  >
+    <div
+      class="nhsuk-card--care__heading-container"
+    >
+      <h2
+        class="nhsuk-card--care__heading"
+      >
+        <span
+          role="text"
+        >
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+            Non-urgent advice: 
+          </span>
+          Non urgent heading
+        </span>
+      </h2>
+      <span
+        aria-hidden="true"
+        class="nhsuk-card--care__arrow"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Care card variant urgent matches the snapshot 1`] = `
+<div>
+  <div
+    class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent"
+  >
+    <div
+      class="nhsuk-card--care__heading-container"
+    >
+      <h2
+        class="nhsuk-card--care__heading"
+      >
+        <span
+          role="text"
+        >
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+            Urgent advice: 
+          </span>
+          Urgent heading
+        </span>
+      </h2>
+      <span
+        aria-hidden="true"
+        class="nhsuk-card--care__arrow"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Card matches snapshot 1`] = `
 <div>
   <div
diff --git a/src/components/navigation/card/components/CardHeading.tsx b/src/components/navigation/card/components/CardHeading.tsx
index 397f2232..c46b5127 100644
--- a/src/components/navigation/card/components/CardHeading.tsx
+++ b/src/components/navigation/card/components/CardHeading.tsx
@@ -3,13 +3,66 @@ import React, { HTMLProps, useContext } from 'react';
 import classNames from 'classnames';
 import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel';
 import CardContext from '../CardContext';
+import { CareCardType } from '../../../../util/types/NHSUKTypes';
+import { cardTypeIsCareCard } from '@util/types/TypeGuards';
 
 interface CardHeadingProps extends HTMLProps<HTMLHeadingElement> {
   headingLevel?: HeadingLevelType;
+  visuallyHiddenText?: false | string;
 }
 
-const CardHeading: React.FC<CardHeadingProps> = ({ className, headingLevel = 'h2', ...rest }) => {
+const genHiddenText = (cardType: CareCardType): string => {
+  switch (cardType) {
+    case 'non-urgent':
+      return 'Non-urgent advice: ';
+    case 'urgent':
+      return 'Urgent advice: ';
+    case 'emergency':
+      return 'Immediate action required: ';
+    default:
+      return '';
+  }
+};
+
+const CareHeading: React.FC<CardHeadingProps & { careType: CareCardType }> = ({
+  className,
+  children,
+  visuallyHiddenText,
+  careType,
+  headingLevel = 'h2',
+  role = 'text',
+  ...rest
+}) => {
+  return (
+    <div className="nhsuk-card--care__heading-container">
+      <HeadingLevel
+        className={classNames('nhsuk-card--care__heading', className)}
+        headingLevel={headingLevel}
+        {...rest}
+      >
+        <span role={role}>
+          {visuallyHiddenText !== false ? (
+            <span className="nhsuk-u-visually-hidden">
+              {visuallyHiddenText || genHiddenText(careType)}
+            </span>
+          ) : null}
+          {children}
+        </span>
+      </HeadingLevel>
+      <span className="nhsuk-card--care__arrow" aria-hidden="true"></span>
+    </div>
+  );
+};
+
+const CardHeading: React.FC<CardHeadingProps> = (props) => {
   const { cardType } = useContext(CardContext);
+
+  if (cardTypeIsCareCard(cardType)) {
+    return <CareHeading {...props} careType={cardType} />;
+  }
+
+  const { className, headingLevel = 'h2', ...rest } = props;
+
   return (
     <HeadingLevel
       className={classNames(
diff --git a/src/index.ts b/src/index.ts
index 4615494b..3e195da8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,7 +44,7 @@ export { default as TextInput } from './components/form-elements/text-input';
 export { default as InsetText } from './components/content-presentation/inset-text';
 export { default as Label } from './components/form-elements/label';
 export { Container, Col, Row } from './components/layout';
-export { default as ListPanel } from './components/list-panel';
+export { default as Panel } from './patterns/panel';
 export { default as NavAZ } from './patterns/nav-a-z';
 export { default as Pagination } from './components/navigation/pagination';
 export { default as Radios } from './components/form-elements/radios';
diff --git a/src/patterns/care-card/CareCard.tsx b/src/patterns/care-card/CareCard.tsx
deleted file mode 100644
index 6d38ff33..00000000
--- a/src/patterns/care-card/CareCard.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client';
-import React, { HTMLProps, createContext, useContext } from 'react';
-import classNames from 'classnames';
-import { CareCardType } from '@util/types/NHSUKTypes';
-import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel';
-
-interface CareCardProps extends HTMLProps<HTMLDivElement> {
-  type: CareCardType;
-}
-
-const CareCardContext = createContext<CareCardType>('non-urgent');
-
-const genHiddenText = (cardType: CareCardType): string => {
-  switch (cardType) {
-    case 'non-urgent':
-      return 'Non-urgent advice: ';
-    case 'urgent':
-      return 'Urgent advice: ';
-    case 'immediate':
-      return 'Immediate action required: ';
-    default:
-      return '';
-  }
-};
-
-const CareCardContent: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
-  <div className={classNames('nhsuk-care-card__content', className)} {...rest} />
-);
-
-interface CareCardHeadingProps extends HTMLProps<HTMLHeadingElement> {
-  visuallyHiddenText?: false | string;
-  headingLevel?: HeadingLevelType;
-}
-
-const CareCardHeading: React.FC<CareCardHeadingProps> = ({
-  className,
-  children,
-  visuallyHiddenText,
-  headingLevel,
-  role = 'text',
-  ...rest
-}) => {
-  const cardType = useContext(CareCardContext);
-  return (
-    <div className="nhsuk-care-card__heading-container">
-      <HeadingLevel
-        className={classNames('nhsuk-care-card__heading', className)}
-        headingLevel={headingLevel}
-        {...rest}
-      >
-        <span role={role}>
-          {visuallyHiddenText !== false ? (
-            <span className="nhsuk-u-visually-hidden">
-              {visuallyHiddenText || genHiddenText(cardType)}
-            </span>
-          ) : null}
-          {children}
-        </span>
-      </HeadingLevel>
-      <span className="nhsuk-care-card__arrow" aria-hidden="true" />
-    </div>
-  );
-};
-
-interface CareCard extends React.FC<CareCardProps> {
-  Content: React.FC<HTMLProps<HTMLDivElement>>;
-  Heading: React.FC<CareCardHeadingProps>;
-}
-
-const CareCard: CareCard = ({ className, type, children, ...rest }) => (
-  <div className={classNames('nhsuk-care-card', `nhsuk-care-card--${type}`, className)} {...rest}>
-    <CareCardContext.Provider value={type}>{children}</CareCardContext.Provider>
-  </div>
-);
-
-CareCard.Content = CareCardContent;
-CareCard.Heading = CareCardHeading;
-
-export default CareCard;
diff --git a/src/patterns/care-card/__tests__/CareCard.tests.tsx b/src/patterns/care-card/__tests__/CareCard.tests.tsx
deleted file mode 100644
index 6a33dcb1..00000000
--- a/src/patterns/care-card/__tests__/CareCard.tests.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import CareCard from '../';
-
-describe('CareCard', () => {
-  it('renders content', () => {
-    const { container } = render(
-      <CareCard type="non-urgent">
-        <CareCard.Content>Test Content</CareCard.Content>
-      </CareCard>,
-    );
-
-    expect(container.querySelector('.nhsuk-care-card__content')?.textContent).toEqual(
-      'Test Content',
-    );
-  });
-
-  describe('urgent', () => {
-    it('matches snapshot', () => {
-      const { container } = render(<CareCard type="urgent" />);
-
-      expect(container).toMatchSnapshot('BaseCareCardUrgent');
-    });
-
-    it('renders with correct classNames', () => {
-      const { container } = render(<CareCard type="urgent" />);
-
-      expect(container.querySelector('.nhsuk-care-card--urgent')).toBeTruthy();
-    });
-
-    it('generates the correct hidden text', () => {
-      const { container } = render(
-        <CareCard type="urgent">
-          <CareCard.Heading>Heading</CareCard.Heading>
-        </CareCard>,
-      );
-
-      expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
-        'Urgent advice: ',
-      );
-    });
-  });
-
-  describe('immediate', () => {
-    it('matches snapshot', () => {
-      const { container } = render(<CareCard type="immediate" />);
-
-      expect(container).toMatchSnapshot('BaseCareCardImmediate');
-    });
-
-    it('renders with correct classNames', () => {
-      const { container } = render(<CareCard type="immediate" />);
-
-      expect(container.querySelector('.nhsuk-care-card--immediate')).toBeTruthy();
-    });
-
-    it('generates the correct hidden text', () => {
-      const { container } = render(
-        <CareCard type="immediate">
-          <CareCard.Heading>Heading</CareCard.Heading>
-        </CareCard>,
-      );
-
-      expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
-        'Immediate action required: ',
-      );
-    });
-  });
-
-  describe('non-urgent', () => {
-    it('matches snapshot', () => {
-      const { container } = render(<CareCard type="non-urgent" />);
-
-      expect(container).toMatchSnapshot('BaseCareCardNonUrgent');
-    });
-
-    it('renders with correct classNames', () => {
-      const { container } = render(<CareCard type="non-urgent" />);
-
-      expect(container.querySelector('.nhsuk-care-card--non-urgent')).toBeTruthy();
-    });
-
-    it('generates the correct hidden text', () => {
-      const { container } = render(
-        <CareCard type="non-urgent">
-          <CareCard.Heading>Heading</CareCard.Heading>
-        </CareCard>,
-      );
-
-      expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
-        'Non-urgent advice: ',
-      );
-    });
-  });
-
-  describe('hidden text', () => {
-    it('renders without hidden text', () => {
-      const { container } = render(
-        <CareCard type="immediate">
-          <CareCard.Heading visuallyHiddenText={false}>Heading</CareCard.Heading>
-        </CareCard>,
-      );
-
-      expect(container.querySelector('.nhsuk-u-visually-hidden')).toBeFalsy();
-    });
-
-    it('renders with hidden text', () => {
-      const { container } = render(
-        <CareCard type="immediate">
-          <CareCard.Heading visuallyHiddenText="Custom">Heading</CareCard.Heading>
-        </CareCard>,
-      );
-
-      expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual('Custom');
-    });
-  });
-});
diff --git a/src/patterns/care-card/__tests__/__snapshots__/CareCard.tests.tsx.snap b/src/patterns/care-card/__tests__/__snapshots__/CareCard.tests.tsx.snap
deleted file mode 100644
index c83ff56c..00000000
--- a/src/patterns/care-card/__tests__/__snapshots__/CareCard.tests.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CareCard immediate matches snapshot: BaseCareCardImmediate 1`] = `
-<div>
-  <div
-    class="nhsuk-care-card nhsuk-care-card--immediate"
-  />
-</div>
-`;
-
-exports[`CareCard non-urgent matches snapshot: BaseCareCardNonUrgent 1`] = `
-<div>
-  <div
-    class="nhsuk-care-card nhsuk-care-card--non-urgent"
-  />
-</div>
-`;
-
-exports[`CareCard urgent matches snapshot: BaseCareCardUrgent 1`] = `
-<div>
-  <div
-    class="nhsuk-care-card nhsuk-care-card--urgent"
-  />
-</div>
-`;
diff --git a/src/patterns/care-card/index.ts b/src/patterns/care-card/index.ts
deleted file mode 100644
index 2e950031..00000000
--- a/src/patterns/care-card/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CareCard from './CareCard';
-
-export default CareCard;
diff --git a/src/patterns/nav-a-z/NavAZ.tsx b/src/patterns/nav-a-z/NavAZ.tsx
index 9f2efe6c..125a99bf 100644
--- a/src/patterns/nav-a-z/NavAZ.tsx
+++ b/src/patterns/nav-a-z/NavAZ.tsx
@@ -88,14 +88,14 @@ const LinkItem: React.FC<AsElementLink<HTMLAnchorElement>> = ({
   </li>
 );
 
-// TODO - check disabled here - it probably doesn't work
 const DisabledItem: React.FC<HTMLProps<HTMLSpanElement>> = ({ className, ...rest }) => (
   <li className="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
     <span
       className={classNames(
         'nhsuk-u-font-size-22',
         'nhsuk-u-padding-2',
-        'nhsuk-u-display-block--disabled',
+        'nhsuk-u-display-block',
+        'nhsuk-u-secondary-text-color',
         className,
       )}
       {...rest}
diff --git a/src/patterns/nav-a-z/__tests__/NavAZ.test.tsx b/src/patterns/nav-a-z/__tests__/NavAZ.test.tsx
index 9dbb5173..595d8d8e 100644
--- a/src/patterns/nav-a-z/__tests__/NavAZ.test.tsx
+++ b/src/patterns/nav-a-z/__tests__/NavAZ.test.tsx
@@ -32,14 +32,12 @@ describe('NavAZ', () => {
     render(<NavAZ fullAlphabet disabledLetters={['A', 'B']} />);
 
     expect(
-      screen.queryByText('A')?.classList.contains('nhsuk-u-display-block--disabled'),
+      screen.queryByText('A')?.classList.contains('nhsuk-u-secondary-text-color'),
     ).toBeTruthy();
     expect(
-      screen.queryByText('B')?.classList.contains('nhsuk-u-display-block--disabled'),
+      screen.queryByText('B')?.classList.contains('nhsuk-u-secondary-text-color'),
     ).toBeTruthy();
-    expect(
-      screen.queryByText('C')?.classList.contains('nhsuk-u-display-block--disabled'),
-    ).toBeFalsy();
+    expect(screen.queryByText('C')?.classList.contains('nhsuk-u-secondary-text-color')).toBeFalsy();
   });
 
   it('passes through children', () => {
diff --git a/src/patterns/panel/Panel.tsx b/src/patterns/panel/Panel.tsx
new file mode 100644
index 00000000..91739cfb
--- /dev/null
+++ b/src/patterns/panel/Panel.tsx
@@ -0,0 +1,68 @@
+import React, { HTMLProps } from 'react';
+import classNames from 'classnames';
+import type { AsElementLink } from '@util/types/LinkTypes';
+import Card from '@components/navigation/card';
+
+interface PanelProps extends HTMLProps<HTMLDivElement> {
+  labelProps?: HTMLProps<HTMLHeadingElement>;
+  backToTop?: boolean;
+  backToTopButtonText?: string;
+  backToTopLink?: string;
+}
+
+interface Panel extends React.FC<PanelProps> {
+  LinkItem: React.FC<HTMLProps<HTMLAnchorElement>>;
+  Item: React.FC<HTMLProps<HTMLLIElement>>;
+}
+
+const Panel: Panel = ({
+  children,
+  label,
+  labelProps,
+  backToTop,
+  backToTopLink,
+  backToTopButtonText,
+}) => (
+  <>
+    <Card cardType="feature">
+      <Card.Content>
+        {label ? (
+          <Card.Heading
+            className={classNames('nhsuk-u-font-size-24', labelProps?.className)}
+            {...labelProps}
+          >
+            {label}
+          </Card.Heading>
+        ) : null}
+        <ul className="nhsuk-list nhsuk-list--border">{children}</ul>
+      </Card.Content>
+    </Card>
+
+    {backToTop ? (
+      <div className="nhsuk-back-to-top">
+        <a className="nhsuk-back-to-top__link" href={backToTopLink}>
+          {backToTopButtonText || 'Back to top'}
+        </a>
+      </div>
+    ) : null}
+  </>
+);
+
+const PanelItem: React.FC<HTMLProps<HTMLLIElement>> = ({ className, ...rest }) => (
+  <li className={classNames('nhsuk-list-panel__item', className)} {...rest} />
+);
+
+const PanelLinkItem: React.FC<AsElementLink<HTMLAnchorElement>> = ({
+  className,
+  asElement: Component = 'a',
+  ...rest
+}) => (
+  <PanelItem>
+    <Component className={classNames('nhsuk-list-panel__link', className)} {...rest} />
+  </PanelItem>
+);
+
+Panel.LinkItem = PanelLinkItem;
+Panel.Item = PanelItem;
+
+export default Panel;
diff --git a/src/patterns/panel/__tests__/Panel.test.tsx b/src/patterns/panel/__tests__/Panel.test.tsx
new file mode 100644
index 00000000..de87e855
--- /dev/null
+++ b/src/patterns/panel/__tests__/Panel.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Panel from '..';
+
+describe('Panel', () => {
+  it('matches snapshot', () => {
+    const { container } = render(<Panel />);
+
+    expect(container).toMatchSnapshot('ListPanel');
+  });
+
+  it('renders label', () => {
+    const { container } = render(<Panel label="Label" labelProps={{ className: 'test-label' }} />);
+    const label = container.querySelector('.test-label');
+
+    expect(label).toBeTruthy();
+    expect(label?.textContent).toBe('Label');
+  });
+
+  it('renders back to top button', () => {
+    const { container } = render(<Panel backToTop />);
+
+    expect(container.querySelector('.nhsuk-back-to-top')).toBeTruthy();
+  });
+
+  it('does not render back to top button', () => {
+    const { container } = render(<Panel />);
+
+    expect(container.querySelector('.nhsuk-back-to-top')).toBeNull();
+  });
+
+  it('renders back to top button with custom text', () => {
+    const { container } = render(<Panel backToTop backToTopButtonText="Custom" />);
+
+    expect(container.querySelector('.nhsuk-back-to-top__link')?.textContent).toBe('Custom');
+  });
+
+  describe('ListPanel.Item', () => {
+    it('matches snapshot', () => {
+      const { container } = render(<Panel.Item />);
+
+      expect(container).toMatchSnapshot('ListPanel.Item');
+    });
+  });
+
+  describe('ListPanel.LinkItem', () => {
+    it('matches snapshot', () => {
+      const { container } = render(<Panel.LinkItem />);
+
+      expect(container).toMatchSnapshot('ListPanel.LinkItem');
+    });
+  });
+});
diff --git a/src/patterns/panel/__tests__/__snapshots__/Panel.test.tsx.snap b/src/patterns/panel/__tests__/__snapshots__/Panel.test.tsx.snap
new file mode 100644
index 00000000..e9446df6
--- /dev/null
+++ b/src/patterns/panel/__tests__/__snapshots__/Panel.test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panel ListPanel.Item matches snapshot: ListPanel.Item 1`] = `
+<div>
+  <li
+    class="nhsuk-list-panel__item"
+  />
+</div>
+`;
+
+exports[`Panel ListPanel.LinkItem matches snapshot: ListPanel.LinkItem 1`] = `
+<div>
+  <li
+    class="nhsuk-list-panel__item"
+  >
+    <a
+      class="nhsuk-list-panel__link"
+    />
+  </li>
+</div>
+`;
+
+exports[`Panel matches snapshot: ListPanel 1`] = `
+<div>
+  <div
+    class="nhsuk-card nhsuk-card--feature"
+  >
+    <div
+      class="nhsuk-card__content nhsuk-card__content--feature"
+    >
+      <ul
+        class="nhsuk-list nhsuk-list--border"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/patterns/panel/index.ts b/src/patterns/panel/index.ts
new file mode 100644
index 00000000..ac8432fe
--- /dev/null
+++ b/src/patterns/panel/index.ts
@@ -0,0 +1,3 @@
+import ListPanel from './Panel';
+
+export default ListPanel;
diff --git a/src/util/types/NHSUKTypes.ts b/src/util/types/NHSUKTypes.ts
index e2a8a394..fe75353e 100644
--- a/src/util/types/NHSUKTypes.ts
+++ b/src/util/types/NHSUKTypes.ts
@@ -2,9 +2,9 @@ export type NHSUKSize = 's' | 'm' | 'l' | 'xl';
 
 export type InputWidth = '2' | '3' | '4' | '5' | '10' | '20' | '30' | 2 | 3 | 4 | 5 | 10 | 20 | 30;
 
-export type CareCardType = 'non-urgent' | 'urgent' | 'immediate';
+export type CareCardType = 'non-urgent' | 'urgent' | 'emergency';
 
-export type CardType = 'feature' | 'primary' | 'secondary';
+export type CardType = 'feature' | 'primary' | 'secondary' | CareCardType;
 
 export type ColWidth =
   | 'full'
diff --git a/src/util/types/TypeGuards.ts b/src/util/types/TypeGuards.ts
index df1f658a..f1566034 100644
--- a/src/util/types/TypeGuards.ts
+++ b/src/util/types/TypeGuards.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal } from 'react';
+import { CardType, CareCardType } from './NHSUKTypes';
 
 /**
  * Assert that a child item is of the given component type.
@@ -23,3 +24,9 @@ export const childIsOfComponentType = (
   typeof child === 'object' &&
   'type' in child &&
   child.type === component;
+
+/**
+ * Check whether the given card type is that of a care card.
+ */
+export const cardTypeIsCareCard = (cardType: CardType | undefined): cardType is CareCardType =>
+  cardType === 'non-urgent' || cardType === 'urgent' || cardType === 'emergency';
diff --git a/stories/Components/ListPanel.stories.tsx b/stories/Components/ListPanel.stories.tsx
deleted file mode 100644
index a3a11eb4..00000000
--- a/stories/Components/ListPanel.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { ListPanel } from '../../src';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof ListPanel> = {
-  title: 'Components/ListPanel',
-  component: ListPanel,
-};
-export default meta;
-type Story = StoryObj<typeof ListPanel>;
-
-ListPanel.Panel.displayName = 'ListPanel.Panel';
-ListPanel.LinkItem.displayName = 'ListPanel.LinkItem';
-
-export const Standard: Story = {
-  argTypes: {
-    type: { table: { disable: true } },
-  },
-  render: (args) => (
-    <ListPanel>
-      <ListPanel.Panel label="A" labelProps={{ id: 'A' }} backToTop backToTopLink="#">
-        <ListPanel.LinkItem href="/conditions/abdominal-aortic-aneurysm/">AAA</ListPanel.LinkItem>
-        <ListPanel.LinkItem href="/conditions/abdominal-aortic-aneurysm/">
-          Abdominal aortic aneurysm
-        </ListPanel.LinkItem>
-        <ListPanel.LinkItem href="/conditions/abscess/">Abscess</ListPanel.LinkItem>
-      </ListPanel.Panel>
-      <ListPanel.Panel label="B" labelProps={{ id: 'A' }} backToTop noResults backToTopLink="#">
-        There are currently no conditions listed
-      </ListPanel.Panel>
-      <ListPanel.Panel label="C" labelProps={{ id: 'C' }} backToTop backToTopLink="#">
-        <ListPanel.LinkItem href="/conditions/chest-pain/">Chest pain</ListPanel.LinkItem>
-        <ListPanel.LinkItem href="/conditions/cold-sores/">Cold sore</ListPanel.LinkItem>
-      </ListPanel.Panel>
-      <ListPanel.Panel label="D" labelProps={{ id: 'D' }} backToTop backToTopLink="#">
-        <ListPanel.LinkItem href="/conditions/dandruff/">Dandruff</ListPanel.LinkItem>
-        <ListPanel.LinkItem href="/conditions/dementia/">Dementia</ListPanel.LinkItem>
-        <ListPanel.LinkItem href="/conditions/toothache/">Dental pain</ListPanel.LinkItem>
-      </ListPanel.Panel>
-    </ListPanel>
-  ),
-};
diff --git a/stories/Navigation/Card.stories.tsx b/stories/Navigation/Card.stories.tsx
index 9ee3b3af..3c23d2ef 100644
--- a/stories/Navigation/Card.stories.tsx
+++ b/stories/Navigation/Card.stories.tsx
@@ -168,3 +168,107 @@ export const CardGroup: Story = {
     </Card.Group>
   ),
 };
+
+export const NonUrgentCareCard: Story = {
+  args: { cardType: 'non-urgent' },
+  render: (args) => (
+    <Card cardType={args.cardType}>
+      <Card.Heading>Speak to a GP if:</Card.Heading>
+      <Card.Content>
+        <ul>
+          <li>you&apos;re not sure it&apos;s chickenpox</li>
+          <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
+          <li>
+            your child is <a href="">dehydrated</a>
+          </li>
+          <li>you&apos;re concerned about your child or they get worse</li>
+        </ul>
+        <p>
+          Tell the receptionist you think it&apos;s chickenpox before going in. They may recommend a
+          special appointment time if other patients are at risk.
+        </p>
+      </Card.Content>
+    </Card>
+  ),
+};
+
+export const UrgentCareCard: Story = {
+  args: { cardType: 'urgent' },
+  render: (args) => (
+    <Card cardType={args.cardType}>
+      <Card.Heading>Ask for an urgent GP appointment if:</Card.Heading>
+      <Card.Content>
+        <ul>
+          <li>you&apos;re an adult and have chickenpox</li>
+          <li>
+            you&apos;re pregnant and haven&apos;t had chickenpox before and you&apos;ve been near
+            someone with it
+          </li>
+          <li>
+            you have a weakened immune system and you&apos;ve been near someone with chickenpox
+          </li>
+          <li>you think your newborn baby has chickenpox</li>
+        </ul>
+        <p>
+          In these situations, your GP can prescribe medicine to prevent complications. You need to
+          take it within 24 hours of the spots coming out.
+        </p>
+      </Card.Content>
+    </Card>
+  ),
+};
+
+export const EmergencyCareCard: Story = {
+  args: { cardType: 'emergency' },
+  render: (args) => (
+    <Card cardType={args.cardType}>
+      <Card.Heading>Call 999 or go to A&E now if:</Card.Heading>
+      <Card.Content>
+        <ul>
+          <li>you or someone you know needs immediate help</li>
+          <li>you have seriously harmed yourself - for example, by taking a drug overdose</li>
+        </ul>
+        <p>A mental health emergency should be taken as seriously as a medical emergency.</p>
+        <p>
+          <a href="">Find your nearest A&E</a>
+        </p>
+      </Card.Content>
+    </Card>
+  ),
+};
+
+/**
+ * By default, CareCard components prepend hidden text before the title. These are:
+ *
+ * - ("non-urgent") Non-urgent advice:
+ * - ("urgent") Urgent advice:
+ * - ("immediate") Immediate action required:
+ *
+ * If you wish to disable this behaviour, pass the prop `visuallyHiddenText={false}` to the `CareCard.Heading` component or specify your own visually hidden text by using `visuallyHiddenText="Custom"`.
+ *
+ * You can change the heading type (i.e. `h1`, `h2` and so on) of the title by passing the prop `headingLevel="<headingLevel>"` to the `CareCard.Heading`.
+ */
+export const WithCustomVisuallyHiddenText: Story = {
+  args: { cardType: 'non-urgent' },
+  render: (args) => (
+    <Card cardType={args.cardType}>
+      <Card.Heading visuallyHiddenText="Custom visually hidden text">
+        Speak to a GP if:
+      </Card.Heading>
+      <Card.Content>
+        <ul>
+          <li>you&apos;re not sure it&apos;s chickenpox</li>
+          <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
+          <li>
+            your child is <a href="">dehydrated</a>
+          </li>
+          <li>you&apos;re concerned about your child or they get worse</li>
+        </ul>
+        <p>
+          Tell the receptionist you think it&apos;s chickenpox before going in. They may recommend a
+          special appointment time if other patients are at risk.
+        </p>
+      </Card.Content>
+    </Card>
+  ),
+};
diff --git a/stories/Patterns/CareCard.stories.tsx b/stories/Patterns/CareCard.stories.tsx
deleted file mode 100644
index cb0e39a7..00000000
--- a/stories/Patterns/CareCard.stories.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import React from 'react';
-import CareCard from '../../src/patterns/care-card/CareCard';
-import type { Meta, StoryObj } from '@storybook/react';
-
-/**
- * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/care-card" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * ## Implementation Notes
- *
- * By default, CareCard components prepend hidden text before the title. These are:
- *
- * - ("non-urgent") Non-urgent advice:
- * - ("urgent") Urgent advice:
- * - ("immediate") Immediate action required:
- *
- * If you wish to disable this behaviour, pass the prop `visuallyHiddenText={false}` to the `CareCard.Heading` component or specify your own visually hidden text by using `visuallyHiddenText="Custom"`.
- *
- * You can change the heading type (i.e. `h1`, `h2` and so on) of the title by passing the prop `headingLevel="<headingLevel>"` to the `CareCard.Heading`.
- *
- * ## Usage
- *
- *
- * ### Standard
- *
- * ```jsx
- * import { CareCard } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <CareCard type="non-urgent">
- *             <CareCard.Heading>Speak to a GP if:</CareCard.Heading>
- *             <CareCard.Content>
- *                 <ul>
- *                     <li>you're not sure it's chickenpox</li>
- *                     <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
- *                     <li>your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a></li>
- *                     <li>you're concerned about your child or they get worse</li>
- *                 </ul>
- *                 <p>Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.</p>
- *             </CareCard.Content>
- *         </CareCard>
- *     );
- * }
- * ```
- */
-const meta: Meta<typeof CareCard> = {
-  title: 'Components/CareCard',
-  component: CareCard,
-};
-export default meta;
-
-CareCard.Heading.displayName = 'CareCard.Heading';
-CareCard.Content.displayName = 'CareCard.Content';
-
-type Story = StoryObj<typeof CareCard>;
-export const NonUrgent: Story = {
-  args: { type: 'non-urgent' },
-  render: (args): JSX.Element => (
-    <CareCard type={args.type}>
-      <CareCard.Heading>Speak to a GP if:</CareCard.Heading>
-      <CareCard.Content>
-        <ul>
-          <li>you&apos;re not sure it&apos;s chickenpox</li>
-          <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
-          <li>
-            your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
-          </li>
-          <li>you&apos;re concerned about your child or they get worse</li>
-        </ul>
-      </CareCard.Content>
-    </CareCard>
-  ),
-  name: 'Non-Urgent',
-};
-
-export const Urgent: Story = {
-  args: { type: 'urgent' },
-  render: (args) => (
-    <CareCard type={args.type}>
-      <CareCard.Heading>Ask for an urgent GP appointment if:</CareCard.Heading>
-      <CareCard.Content>
-        <ul>
-          <li>you&apos;re an adult and have chickenpox</li>
-          <li>
-            you&apos;re pregnant and haven&apos;t had chickenpox before and you&apos;ve been near
-            someone with it
-          </li>
-          <li>
-            you have a weakened immune system and you&apos;ve been near someone with chickenpox
-          </li>
-          <li>you think your newborn baby has chickenpox</li>
-        </ul>
-        <p>
-          In these situations, your GP can prescribe medicine to prevent complications. You need to
-          take it within 24 hours of the spots coming out.
-        </p>
-      </CareCard.Content>
-    </CareCard>
-  ),
-};
-
-export const Immediate: Story = {
-  args: { type: 'immediate' },
-  render: (args) => (
-    <CareCard type={args.type}>
-      <CareCard.Heading>Call 999 if you have sudden chest pain that:</CareCard.Heading>
-      <CareCard.Content>
-        <ul>
-          <li>spreads to your arms, back, neck or jaw</li>
-          <li>makes your chest feel tight or heavy</li>
-          <li>also started with shortness of breath, sweating and feeling or being sick</li>
-        </ul>
-        <p>
-          You could be having a heart attack. Call 999 immediately as you need immediate treatment
-          in hospital.
-        </p>
-      </CareCard.Content>
-    </CareCard>
-  ),
-};
-
-export const WithoutVisuallyHiddenText: Story = {
-  args: {
-    type: 'non-urgent',
-  },
-  render: (args) => (
-    <CareCard type={args.type}>
-      <CareCard.Heading visuallyHiddenText={false}>Speak to a GP if:</CareCard.Heading>
-      <CareCard.Content>
-        <ul>
-          <li>you&apos;re not sure it&apos;s chickenpox</li>
-          <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
-          <li>
-            your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
-          </li>
-          <li>you&apos;re concerned about your child or they get worse</li>
-        </ul>
-        <p>
-          Tell the receptionist you think it&apos;s chickenpox before going in. They may recommend a
-          special appointment time if other patients are at risk.
-        </p>
-      </CareCard.Content>
-    </CareCard>
-  ),
-};
-
-export const WithCustomVisuallyHiddenText: Story = {
-  args: {
-    type: 'non-urgent',
-  },
-  render: (args) => (
-    <CareCard type={args.type}>
-      <CareCard.Heading visuallyHiddenText="Custom Hidden Text">Speak to a GP if:</CareCard.Heading>
-      <CareCard.Content>
-        <ul>
-          <li>you&apos;re not sure it&apos;s chickenpox</li>
-          <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
-          <li>
-            your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
-          </li>
-          <li>you&apos;re concerned about your child or they get worse</li>
-        </ul>
-        <p>
-          Tell the receptionist you think it&apos;s chickenpox before going in. They may recommend a
-          special appointment time if other patients are at risk.
-        </p>
-      </CareCard.Content>
-    </CareCard>
-  ),
-};
diff --git a/stories/Patterns/NavAZ.stories.tsx b/stories/Patterns/NavAZ.stories.tsx
index 40e5d084..baf9934f 100644
--- a/stories/Patterns/NavAZ.stories.tsx
+++ b/stories/Patterns/NavAZ.stories.tsx
@@ -2,8 +2,12 @@ import React from 'react';
 import { NavAZ } from '../../src';
 import { Meta, StoryObj } from '@storybook/react';
 
+/**
+ * This component is generally used as part of the 'A to Z page' pattern.
+ */
+
 const meta: Meta<typeof NavAZ> = {
-  title: 'Components/NavAZ',
+  title: 'Patterns/NavAZ',
   component: NavAZ,
   args: {
     fullAlphabet: false,
diff --git a/stories/Patterns/PageAZ.stories.tsx b/stories/Patterns/PageAZ.stories.tsx
new file mode 100644
index 00000000..6e6230ca
--- /dev/null
+++ b/stories/Patterns/PageAZ.stories.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import NavAZ from '@patterns/nav-a-z';
+import HeadingLevel from '@util/HeadingLevel';
+import Panel from '@patterns/panel/Panel';
+import Container from '@components/layout/Container';
+import Row from '@components/layout/Row';
+import Col from '@components/layout/Col';
+
+/**
+ * A to Z is a way of presenting a number of pages alphabetically.
+ *
+ * See the NHS digital service manual: https://service-manual.nhs.uk/design-system/patterns/a-to-z-page
+ */
+
+const meta: Meta = {
+  title: 'Patterns/PageAZ',
+  args: {
+    fullAlphabet: false,
+    removedLetters: [],
+    disabledLetters: [],
+    letters: [],
+  },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Standard: Story = {
+  render: () => (
+    <Container>
+      <main className="nhsuk-main-wrapper" id="maincontent" role="main">
+        <Row>
+          <Col width="full">
+            <HeadingLevel headingLevel="h1">Health A to Z</HeadingLevel>
+
+            <NavAZ id="nhsuk-nav-a-z">
+              <NavAZ.LinkItem href="#A">A</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#B">B</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#C">C</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#D">D</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#E">E</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#F">F</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#G">G</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#H">H</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#I">I</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#J">J</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#K">K</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#L">L</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#M">M</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#N">N</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#O">O</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#P">P</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#Q">Q</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#R">R</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#S">S</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#T">T</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#U">U</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#V">V</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#W">W</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#X">X</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#Y">Y</NavAZ.LinkItem>
+              <NavAZ.LinkItem href="#Z">Z</NavAZ.LinkItem>
+            </NavAZ>
+
+            <Panel label="A" labelProps={{ id: 'A' }} backToTop backToTopLink="#nhsuk-nav-a-z">
+              <Panel.LinkItem href="/conditions/abdominal-aortic-aneurysm/">AAA</Panel.LinkItem>
+              <Panel.LinkItem href="/conditions/abdominal-aortic-aneurysm/">
+                Abdominal aortic aneurysm
+              </Panel.LinkItem>
+              <Panel.LinkItem href="/conditions/abscess/">Abscess</Panel.LinkItem>
+            </Panel>
+
+            <Panel label="B" labelProps={{ id: 'B' }} backToTop backToTopLink="#nhsuk-nav-a-z">
+              <Panel.Item>There are currently no conditions listed</Panel.Item>
+            </Panel>
+
+            <Panel label="C" labelProps={{ id: 'C' }} backToTop backToTopLink="#nhsuk-nav-a-z">
+              <Panel.LinkItem href="/conditions/chest-pain/">Chest pain</Panel.LinkItem>
+              <Panel.LinkItem href="/conditions/cold-sores/">Cold sore</Panel.LinkItem>
+            </Panel>
+
+            <Panel label="D" labelProps={{ id: 'D' }} backToTop backToTopLink="#nhsuk-nav-a-z">
+              <Panel.LinkItem href="/conditions/dandruff/">Dandruff</Panel.LinkItem>
+              <Panel.LinkItem href="/conditions/dementia/">Dementia</Panel.LinkItem>
+              <Panel.LinkItem href="/conditions/toothache/">Toothache</Panel.LinkItem>
+            </Panel>
+          </Col>
+        </Row>
+      </main>
+    </Container>
+  ),
+};
+
+NavAZ.LinkItem.displayName = 'NavAZ.LinkItem';
diff --git a/stories/Patterns/Panel.stories.tsx b/stories/Patterns/Panel.stories.tsx
new file mode 100644
index 00000000..4462efee
--- /dev/null
+++ b/stories/Patterns/Panel.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Panel from '@patterns/panel/Panel';
+
+const meta: Meta<typeof Panel> = {
+  title: 'Components/Panel',
+  component: Panel,
+};
+export default meta;
+type Story = StoryObj<typeof Panel>;
+
+Panel.LinkItem.displayName = 'Panel.LinkItem';
+
+export const Standard: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+  },
+  render: () => (
+    <Panel label="A" labelProps={{ id: 'A' }} backToTop backToTopLink="#">
+      <Panel.LinkItem href="/conditions/abdominal-aortic-aneurysm/">AAA</Panel.LinkItem>
+      <Panel.LinkItem href="/conditions/abdominal-aortic-aneurysm/">
+        Abdominal aortic aneurysm
+      </Panel.LinkItem>
+      <Panel.LinkItem href="/conditions/abscess/">Abscess</Panel.LinkItem>
+    </Panel>
+  ),
+};
