diff --git a/storybook/stories/foundations/layout/headers-code.tsx b/storybook/stories/foundations/layout/headers-code.tsx
index 8cba9a0bb65d6c..46ce0889070f49 100644
--- a/storybook/stories/foundations/layout/headers-code.tsx
+++ b/storybook/stories/foundations/layout/headers-code.tsx
@@ -7,8 +7,149 @@ import React from 'react';
/**
* WordPress dependencies
*/
-import { Button } from '@wordpress/components';
+import {
+ Button,
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+ __experimentalText as Text,
+ __experimentalHeading as Heading,
+ Card,
+ CardHeader,
+ CardBody,
+ CardFooter,
+ DropdownMenu,
+} from '@wordpress/components';
-export const HeaderExample = () => {
- return ;
+import { Icon, moreVertical, page, chevronLeft } from '@wordpress/icons';
+
+export const HeaderExampleLowDensity = () => {
+ return (
+
+
+
+
+
+
+ Section title
+
+
+
+ {},
+ title: 'Action',
+ },
+ {
+ onClick: () => {},
+ title: 'Action',
+ },
+ ] }
+ icon={ moreVertical }
+ label="More actions"
+ onToggle={ () => {} }
+ style={ { flexShrink: '0' } }
+ toggleProps={ { __next40pxDefaultSize: true } }
+ />
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Etiam sollicitudin mauris tellus, vitae tempor urna
+ eleifend vel. Curabitur porttitor vulputate nulla, a
+ mollis enim condimentum convallis.
+
+
+
+ Section body
+ Section Footer
+
+ );
+};
+
+export const HeaderExampleHighDensity = () => {
+ return (
+
+
+
+
+
+
+
+ Section title
+
+
+ {},
+ title: 'Action',
+ },
+ {
+ onClick: () => {},
+ title: 'Action',
+ },
+ {
+ onClick: () => {},
+ title: 'Action',
+ },
+ ] }
+ icon={ moreVertical }
+ label="More actions"
+ onToggle={ () => {} }
+ style={ { flexShrink: '0' } }
+ toggleProps={ { size: 'small' } }
+ />
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Etiam sollicitudin mauris tellus, vitae tempor urna
+ eleifend vel. Curabitur porttitor vulputate nulla, a
+ mollis enim condimentum convallis.
+
+
+
+ Section body
+ Section Footer
+
+ );
};
diff --git a/storybook/stories/foundations/layout/headers.mdx b/storybook/stories/foundations/layout/headers.mdx
index 6449cf9f56743d..be700fcfc5ff72 100644
--- a/storybook/stories/foundations/layout/headers.mdx
+++ b/storybook/stories/foundations/layout/headers.mdx
@@ -4,10 +4,33 @@ import './style.css';
import { Meta } from '@storybook/addon-docs/blocks';
-import { HeaderExample } from './headers-code';
+import { HeaderExampleLowDensity } from './headers-code';
+import { HeaderExampleHighDensity } from './headers-code';
# Headers
+Headers provide a high-level overview, and access to actions relating to a specific UI section. A standardised design gives users a predictable way to complete common tasks.
-
+While the general composition is consistent, there are two different header patterns to use, based on density.
+
+## Low density
+
+
+
+* Use the low density header pattern in the primary section of an admin page.
+* Always include a visible title, typically using the `h2` element.
+* Include no more than one visible action.
+* Secondary actions are accessible via 'More actions' menu.
+* Include a summary/description where appropriate, but keep it short.
+* Use a 'Back' icon-button to provide access to the parent secton
+
+## High density
+
+
+
+* Use the high density header pattern in narrower, secondary sections and editor panels.
+* Contain all actions in a Menu.
+* Always include a visible title, typically using the `h3` element, and use a smaller font size, typically `$font-size-medium`.
+* Optionally include a decorative element like an icon or an image. This element should be `24px` x `24px` and relate directly to the title.
+* Use a 'Back' icon-button to provide access to the parent secton