diff --git a/vanilla/component_tabs.yaml b/vanilla/component_tabs.yaml
index bc8f944..237205c 100644
--- a/vanilla/component_tabs.yaml
+++ b/vanilla/component_tabs.yaml
@@ -1,4 +1,13 @@
-# Settings: accessibility, design_guidelines
+foundations/icon:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+foundations/typography:
+  accessibility: True
+  design_guidelines: True
+  react: False
+  figma: True
 
 components/accordion:
   accessibility: True
@@ -10,12 +19,12 @@ components/badge:
   design_guidelines: True
   react: True
   figma: True
-components/breadcrumbs:
+components/breadcrumb:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
-components/buttons:
+components/button:
   accessibility: True
   design_guidelines: True
   react: True
@@ -25,16 +34,51 @@ components/card:
   design_guidelines: True
   react: True
   figma: True
+components/checkbox:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/chip:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
+components/code:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/contextual-menu:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
+components/datalist:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/divider:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/empty-state:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/equal-height-row:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/fieldset:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/grid:
   accessibility: True
   design_guidelines: True
@@ -45,17 +89,27 @@ components/heading-icon:
   design_guidelines: True
   react: True
   figma: True
-components/icons:
+components/image:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/input:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/link:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
-components/links:
+components/list:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
-components/lists:
+components/list-tree:
   accessibility: True
   design_guidelines: True
   react: True
@@ -70,11 +124,21 @@ components/matrix:
   design_guidelines: True
   react: True
   figma: True
+components/media-object:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/modal:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
+components/muted-heading:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/navigation:
   accessibility: True
   design_guidelines: True
@@ -95,16 +159,51 @@ components/pull-quote:
   design_guidelines: True
   react: True
   figma: True
+components/radio:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/range:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/rule:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/search-and-filter:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/search-box:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
+components/section:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/segmented-control:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
+components/select:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/separator:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
 components/slider:
   accessibility: True
   design_guidelines: True
@@ -125,12 +224,45 @@ components/switch:
   design_guidelines: True
   react: True
   figma: True
-components/tabs:
+components/table-of-contents:
   accessibility: True
   design_guidelines: True
   react: True
   figma: True
-components/tooltips:
+components/tab:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/textarea:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+components/tooltip:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+
+complex-components/form:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+complex-components/table:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+
+patterns/example:
+  accessibility: True
+  design_guidelines: True
+  react: True
+  figma: True
+
+pages/example:
   accessibility: True
   design_guidelines: True
   react: True
diff --git a/vanilla/side-navigation.yaml b/vanilla/side-navigation.yaml
index 2e7545e..614cd07 100644
--- a/vanilla/side-navigation.yaml
+++ b/vanilla/side-navigation.yaml
@@ -1,55 +1,53 @@
-- heading: Base elements
+- heading: Foundations
   subheadings:
-    - title: Code
-      url: /docs/base/code
-    - title: Forms
-      url: /docs/base/forms
-    - title: Reset
-      url: /docs/base/reset
-    - title: Separators
-      url: /docs/base/separators
-    - title: Tables
-      url: /docs/base/tables
+    - title: Icons
+      url: /docs/components/icons
     - title: Typography
       url: /docs/base/typography
-    - title: Paper background
-      url: /docs/base/paper
 - heading: Components
   subheadings:
     - title: Accordion
       url: /docs/components/accordion
-    - title: Equal height row
-      url: /docs/components/equal-height-row
     - title: Badge
       url: /docs/components/badge
-    - title: Breadcrumbs
-      url: /docs/components/breadcrumbs
-    - title: Buttons
-      url: /docs/components/buttons
-    - title: Cards
+    - title: Breadcrumb
+      url: /docs/components/breadcrumb
+    - title: Button
+      url: /docs/components/button
+    - title: Card
       url: /docs/components/card
-    - title: Chips
+    - title: Checkbox
+      url: /docs/components/checkbox
+    - title: Chip
       url: /docs/components/chip
+    - title: Code
+      url: /docs/components/code
     - title: Contextual menu
       url: /docs/components/contextual-menu
+    - title: Datalist
+      url: /docs/components/datalist
     - title: Divider
       url: /docs/components/divider
     - title: Empty state
       url: /docs/components/empty-state
+    - title: Equal height row
+      url: /docs/components/equal-height-row
+    - title: Fieldset
+      url: /docs/components/fieldset
     - title: Grid
       url: /docs/components/grid
     - title: Heading icon
       url: /docs/components/heading-icon
-    - title: Icons
-      url: /docs/components/icons
-    - title: Images
-      url: /docs/components/images
-    - title: Links
-      url: /docs/components/links
+    - title: Image
+      url: /docs/components/image
+    - title: Input
+      url: /docs/components/input
+    - title: Link
+      url: /docs/components/link
     - title: List tree
       url: /docs/components/list-tree
-    - title: Lists
-      url: /docs/components/lists
+    - title: List
+      url: /docs/components/list
     - title: Logo section
       url: /docs/components/logo-section
     - title: Matrix
@@ -62,26 +60,34 @@
       url: /docs/components/muted-heading
     - title: Navigation
       url: /docs/components/navigation
-    - title: Notifications
+    - title: Notification
       url: /docs/components/notification
     - title: Pagination
       url: /docs/components/pagination
-    - title: Quotes
+    - title: Pull quote
       url: /docs/components/pull-quote
+    - title: Radio
+      url: /docs/components/radio
+    - title: Range
+      url: /docs/components/range
     - title: Rule
       url: /docs/components/rule
     - title: Search and filter
       url: /docs/components/search-and-filter
     - title: Search box
       url: /docs/components/search-box
-    - title: Sections
+    - title: Section
       url: /docs/components/section
     - title: Segmented control
       url: /docs/components/segmented-control
+    - title: Select
+      url: /docs/components/select
+    - title: Separator
+      url: /docs/components/separator
     - title: Slider
       url: /docs/components/slider
-    - title: Status labels
-      url: /docs/components/status-labels
+    - title: Status label
+      url: /docs/components/status-label
     - title: Strip
       url: /docs/components/strip
     - title: Suru
@@ -90,10 +96,26 @@
       url: /docs/components/switch
     - title: Table of contents
       url: /docs/components/table-of-contents
-    - title: Tabs
-      url: /docs/components/tabs
-    - title: Tooltips
-      url: /docs/components/tooltips
+    - title: Tab
+      url: /docs/components/tab
+    - title: Textarea
+      url: /docs/components/textarea
+    - title: Tooltip
+      url: /docs/components/tooltip
+- heading: Complex components
+  subheadings:
+    - title: Form
+      url: /docs/complex-components/form
+    - title: Table
+      url: /docs/complex-components/table
+- heading: Patterns
+  subheadings:
+    - title: Example
+      url: /docs/patterns/example
+- heading: Pages
+  subheadings:
+    - title: Example
+      url: /docs/pages/example
 - heading: Layouts
   subheadings:
     - title: Application
@@ -108,3 +130,7 @@
       url: /docs/layouts/full-width
     - title: Sticky footer
       url: /docs/layouts/sticky-footer
+- heading: Guidelines
+  subheadings:
+    - title: Example
+      url: /docs/guidelines/example
diff --git a/vanilla/templates/docs/base/forms/index.md b/vanilla/templates/docs/base/forms/index.md
deleted file mode 100644
index a2e5265..0000000
--- a/vanilla/templates/docs/base/forms/index.md
+++ /dev/null
@@ -1,259 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
-  title: Forms | Base elements
----
-
-Form controls have global styling defined at the HTML element level.
-
-Most labels and controls are 100% the width of the `<form>` parent element, unless you [specify inline layout](#inline).
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/form/" class="js-example">
-View example of a base form
-</a></div>
-
-## Single-line text field
-
-`<input type="text">` is a single-line text field.
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/input/" class="js-example">
-View example of a single-line text field
-</a></div>
-
-Vanilla also styles HTML’s other single-line field types: `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search` and `tel`. For the `search` type, see <a href="../patterns/search-box">Search box</a>.
-
-## Multi-line text field
-
-`<textarea>` is a multi-line text field.
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/textarea/" class="js-example">
-View example of a textarea
-</a></div>
-
-Note: The attribute `readonly` disables the input but it still retains a default cursor.
-
-## Checkbox
-
-Use the checkbox component to select one or more options. To provide fully featured Vanilla style and behaviour of the checkbox a specific markup structure is needed around the checkbox input (see example below).
-
-To disable the checkbox component, add the `disabled` attribute to the respective `<input type='checkbox'>` element.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox/" class="js-example">
-View example of the checkbox components
-</a></div>
-
-### Inline checkbox
-
-When placing the checkbox component in padded containers (table cells, some list items), use the `.p-checkbox--inline` variant. It ensures the checkbox and the label text are properly aligned with other inline text.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox-inline/" class="js-example">
-View example of the inline checkbox components
-</a></div>
-
-### Heading checkbox
-
-To use checkbox component in headings use the `.p-checkbox--heading` variant of the component to make sure the checkbox and the label text are properly aligned.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox-heading/" class="js-example">
-View example of the heading checkbox components
-</a></div>
-
-### Indeterminate state checkbox
-
-When a checkbox requires a state between checked and unchecked, `checkbox.indeterminate = true;` can be set via JavaScript, which will cause the checkbox appear in an "indeterminate" state.
-
-In cases when JavaScript can't be used for that, set `aria-checked="mixed"` on checkbox to show "indeterminate" state. Please note that it will only change the visual look of the checkbox, it will not affect its state available to the browser via JavaScript.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox-indeterminate/" class="js-example">
-View example of the indeterminate checkbox component
-</a></div>
-
-## Radio button
-
-Use radio buttons to select one of the given set of options. To provide fully featured Vanilla style and behaviour of the radio button a specific markup structure is needed around the radio button input (see example below).
-
-To disable the radio component, add the `disabled` attribute to the respective `<input type='radio'>` element.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/radio/" class="js-example">
-View example of the radio components
-</a></div>
-
-### Inline radio button
-
-When placing the radio component in padded containers (table cells, some list items), use the `.p-radio--inline` variant of the component to make sure the radio button and the label text are properly aligned with other inline text.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/radio-inline/" class="js-example">
-View example of the inline radio components
-</a></div>
-
-### Heading radio button
-
-To use radio component in headings use the `.p-checkbox--heading` variant of the component to make sure the radio button and the label text are properly aligned.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/radio-heading/" class="js-example">
-View example of the heading radio components
-</a></div>
-
-## Select
-
-Use the `<select>` element to create a drop-down list.
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/selects/" class="js-example">
-View example of the base selects
-</a></div>
-
-Use the `multiple` attribute to create a multiple select control.
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/select-multiple/" class="js-example">
-View example of the base multiple selects
-</a></div>
-
-## Datalist
-
-Use the `<datalist>` element to create drop-down list with text input.
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/datalist/" class="js-example">
-View example of the base datalist
-</a></div>
-
-## Range
-
-The `<input type="range">` allows a user to select from a specified range of values, where the precise value is not considered important.
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/range/" class="js-example">
-View example of the slider pattern
-</a></div>
-
-## Fieldset
-
-You can use the `<fieldset>` element to divide the form into different logical sections.
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/fieldset/" class="js-example">
-View example of the base form fieldset
-</a></div>
-
-## Inline
-
-By applying the class `.p-form--inline` and wrapping any form control in `.p-form__group` you can change the layout style of any form to be inline.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-inline/" class="js-example">
-View examples of form inline patterns
-</a></div>
-
-## Stacked
-
-By applying the class `.p-form--stacked` and wrapping any form control in `.p-form__group` you can change the layout style of any form to be stacked.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-stacked/" class="js-example">
-View examples of form stacked patterns
-</a></div>
-
-## Disabled
-
-Adding the `disabled` attribute to an input will prevent user interaction.
-
-<div class="p-notification--information">
-  <p class="p-notification__content">
-    <span class="p-notification__title">Note:</span>
-    <span class="p-notification__message">All disabled inputs have an opacity of <code>0.5</code> and <code>not-allowed</code> cursor on hover.</span>
-  </p>
-</div>
-
-<div class="embedded-example"><a href="/docs/examples/base/forms/disabled-input/" class="js-example">
-View example of a disabled input
-</a></div>
-
-## Help text
-
-Supplementary help text can be provided for the form fields by adding an element with `.p-form-help-text` class name. If the help text follows a checkbox or radio button use an additional `is-tick-element` class name to align help text with the label.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-help-text/" class="js-example">
-View example of a form fields with help text
-</a></div>
-
-## Validation
-
-To use form validation feedback - which includes feedback messages, icons and border colours - wrap individual input elements in a `p-form-validation` and additionally apply the `.is-error`, `.is-caution` or `.is-success` to the wrapper as appropriate.
-
-If your form uses select elements then you will additionally need to wrap only the `<select>` element in a wrapper with the class `p-form-validation__select-wrapper` to mitigate some of the quirks of this specific HTML element across browsers.
-
-Descriptive text relating to the element's validation status should use the class `p-form-validation__message`.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-validation/" class="js-example">
-View example of form validation patterns
-</a></div>
-
-## Required
-
-Apply the class `.is-required` to mandatory input fields. You should also add a legend to the form to be explicit about the meaning of the asterisk.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/forms-required/" class="js-example">
-View example of an input required element
-</a></div>
-
-## Dense form elements
-
-In contexts where vertical space is limited, e.g. inside a table row, you might prefer form elements with reduced vertical padding. Add class `.is-dense` to achieve that:
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/dense/" class="js-example">
-View example of the dense form elements
-</a></div>
-
-## Password toggle
-
-When using a password field, use this pattern to allow the user to toggle the password visibility.
-
-<div class="p-notification--information is-inline">
-  <div class="p-notification__content">
-    <h5 class="p-notification__title">Note:</h5>
-    <p class="p-notification__message">Do not use this pattern in inline forms</p>
-  </div>
-</div>
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/password-toggle/" class="js-example">
-View example of the password toggle
-</a></div>
-
-## Dark theme
-
-By default the form elements are displayed in the light theme. To display them in the dark theme, add the class `.is-dark` to the input elements.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/forms-dark/" class="js-example">
-View example of the dark form elements
-</a></div>
-
-<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-validation-dark/" class="js-example">
-View example of the dark form elements
-</a></div>
-
-## Accessibility
-
-Validated form input elements should indicate errors with `aria-invalid` attribute.
-
-See [WCAG Success Criterion 3.3.1 - Using Aria-Invalid to Indicate An Error Field](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21) for further information.
-
-## Import
-
-To import just this base element into your project, copy the snippet below and include it in your main Sass file.
-
-<pre><code>@import 'patterns_forms';</code></pre>
-
-To add form help text or validation into your project, copy either or both snippets below and include it in your main Sass file.
-
-```scss
-@import 'patterns_form-help-text';
-```
-
-```scss
-@import 'patterns_form-validation';
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
-
-## React
-
-You can use forms in React by installing our react-component library and importing `Form` and `Input` component.
-
-[See the documentation for our React `Form` component](https://canonical.github.io/react-components/?path=/docs/form--default-story#form)
-
-[See the documentation for our React `Input` component](https://canonical.github.io/react-components/?path=/docs/input--text-input#input)
diff --git a/vanilla/templates/docs/base/paper/index.md b/vanilla/templates/docs/base/paper/index.md
deleted file mode 100644
index e5b28b9..0000000
--- a/vanilla/templates/docs/base/paper/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
-  title: Paper background | Base elements
----
-
-In Vanilla 4.0 we are introducing a new option for the background colour of brochure site pages that we call a paper background.
-
-It replaces the default white page background with a light grey `#f3f3f3` colour.
-
-Add the `is-paper` class name to the `body` element to use it on the page.
-
-```html
-<body class="is-paper">
-  ...
-</body>
-```
-
-[See an example page with paper background](/docs/examples/brochure/index).
diff --git a/vanilla/templates/docs/base/reset/index.md b/vanilla/templates/docs/base/reset/index.md
deleted file mode 100644
index 4ee36ed..0000000
--- a/vanilla/templates/docs/base/reset/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
-  title: Reset | Base elements
----
-
-Vanilla uses [Normalize](https://necolas.github.io/normalize.css/) to reset default browser styling on page elements. This helps remove any quirks or nuances specific to certain browsers before further styling is layered on top.
diff --git a/vanilla/templates/docs/complex-components/form/accessibility/index.md b/vanilla/templates/docs/complex-components/form/accessibility/index.md
new file mode 100644
index 0000000..7107674
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/form/accessibility/index.md
@@ -0,0 +1,9 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Form | Accessibility
+---
+
+Validated form input elements should indicate errors with `aria-invalid` attribute.
+
+See [WCAG Success Criterion 3.3.1 - Using Aria-Invalid to Indicate An Error Field](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21) for further information.
diff --git a/vanilla/templates/docs/complex-components/form/design-guidelines/index.md b/vanilla/templates/docs/complex-components/form/design-guidelines/index.md
new file mode 100644
index 0000000..023c94a
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/form/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Form | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/icons/react/index.md b/vanilla/templates/docs/complex-components/form/figma/index.md
similarity index 76%
rename from vanilla/templates/docs/components/icons/react/index.md
rename to vanilla/templates/docs/complex-components/form/figma/index.md
index ef2e958..f0302d7 100644
--- a/vanilla/templates/docs/components/icons/react/index.md
+++ b/vanilla/templates/docs/complex-components/form/figma/index.md
@@ -1,7 +1,7 @@
 ---
 wrapper_template: '_layouts/docs.html'
 context:
-  title: Icons | Figma
+  title: Form | Figma
 ---
 
 # 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/complex-components/form/index.md b/vanilla/templates/docs/complex-components/form/index.md
new file mode 100644
index 0000000..64ee8d6
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/form/index.md
@@ -0,0 +1,125 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Form | Implementation
+---
+
+## Inline
+
+By applying the class `.p-form--inline` and wrapping any form control in `.p-form__group` you can change the layout style of any form to be inline.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-inline/" class="js-example">
+View examples of form inline patterns
+</a></div>
+
+## Stacked
+
+By applying the class `.p-form--stacked` and wrapping any form control in `.p-form__group` you can change the layout style of any form to be stacked.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-stacked/" class="js-example">
+View examples of form stacked patterns
+</a></div>
+
+## Disabled
+
+Adding the `disabled` attribute to an input will prevent user interaction.
+
+<div class="p-notification--information">
+  <p class="p-notification__content">
+    <span class="p-notification__title">Note:</span>
+    <span class="p-notification__message">All disabled inputs have an opacity of <code>0.5</code> and <code>not-allowed</code> cursor on hover.</span>
+  </p>
+</div>
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/disabled-input/" class="js-example">
+View example of a disabled input
+</a></div>
+
+## Help text
+
+Supplementary help text can be provided for the form fields by adding an element with `.p-form-help-text` class name. If the help text follows a checkbox or radio button use an additional `is-tick-element` class name to align help text with the label.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-help-text/" class="js-example">
+View example of a form fields with help text
+</a></div>
+
+## Validation
+
+To use form validation feedback - which includes feedback messages, icons and border colours - wrap individual input elements in a `p-form-validation` and additionally apply the `.is-error`, `.is-caution` or `.is-success` to the wrapper as appropriate.
+
+If your form uses select elements then you will additionally need to wrap only the `<select>` element in a wrapper with the class `p-form-validation__select-wrapper` to mitigate some of the quirks of this specific HTML element across browsers.
+
+Descriptive text relating to the element's validation status should use the class `p-form-validation__message`.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-validation/" class="js-example">
+View example of form validation patterns
+</a></div>
+
+## Required
+
+Apply the class `.is-required` to mandatory input fields. You should also add a legend to the form to be explicit about the meaning of the asterisk.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/forms-required/" class="js-example">
+View example of an input required element
+</a></div>
+
+## Dense form elements
+
+In contexts where vertical space is limited, e.g. inside a table row, you might prefer form elements with reduced vertical padding. Add class `.is-dense` to achieve that:
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/dense/" class="js-example">
+View example of the dense form elements
+</a></div>
+
+## Password toggle
+
+When using a password field, use this pattern to allow the user to toggle the password visibility.
+
+<div class="p-notification--information is-inline">
+  <div class="p-notification__content">
+    <h5 class="p-notification__title">Note:</h5>
+    <p class="p-notification__message">Do not use this pattern in inline forms</p>
+  </div>
+</div>
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/password-toggle/" class="js-example">
+View example of the password toggle
+</a></div>
+
+## Dark theme
+
+By default the form elements are displayed in the light theme. To display them in the dark theme, add the class `.is-dark` to the input elements.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/forms-dark/" class="js-example">
+View example of the dark form elements
+</a></div>
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/form-validation-dark/" class="js-example">
+View example of the dark form elements
+</a></div>
+
+## Import
+
+To import just this base element into your project, copy the snippet below and include it in your main Sass file.
+
+<pre><code>@import 'patterns_forms';</code></pre>
+
+To add form help text or validation into your project, copy either or both snippets below and include it in your main Sass file.
+
+```scss
+@import 'patterns_form-help-text';
+```
+
+```scss
+@import 'patterns_form-validation';
+```
+
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+
+## React
+
+You can use forms in React by installing our react-component library and importing `Form` and `Input` component.
+
+[See the documentation for our React `Form` component](https://canonical.github.io/react-components/?path=/docs/form--default-story#form)
+
+[See the documentation for our React `Input` component](https://canonical.github.io/react-components/?path=/docs/input--text-input#input)
diff --git a/vanilla/templates/docs/complex-components/form/react/index.md b/vanilla/templates/docs/complex-components/form/react/index.md
new file mode 100644
index 0000000..f793b40
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/form/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Form | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/complex-components/table/accessibility/index.md b/vanilla/templates/docs/complex-components/table/accessibility/index.md
new file mode 100644
index 0000000..14df4dc
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/table/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Table | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/complex-components/table/design-guidelines/index.md b/vanilla/templates/docs/complex-components/table/design-guidelines/index.md
new file mode 100644
index 0000000..0536357
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/table/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Table | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/complex-components/table/figma/index.md b/vanilla/templates/docs/complex-components/table/figma/index.md
new file mode 100644
index 0000000..ee9ee8e
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/table/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Table | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/base/tables/index.md b/vanilla/templates/docs/complex-components/table/index.md
similarity index 99%
rename from vanilla/templates/docs/base/tables/index.md
rename to vanilla/templates/docs/complex-components/table/index.md
index de116c8..c7ad0aa 100644
--- a/vanilla/templates/docs/base/tables/index.md
+++ b/vanilla/templates/docs/complex-components/table/index.md
@@ -1,7 +1,7 @@
 ---
 wrapper_template: '_layouts/docs.html'
 context:
-  title: Tables | Base elements
+  title: Tables | Implementation
 ---
 
 Data tables are used to organize and display all information from a data set.
diff --git a/vanilla/templates/docs/complex-components/table/react/index.md b/vanilla/templates/docs/complex-components/table/react/index.md
new file mode 100644
index 0000000..bfcd6e5
--- /dev/null
+++ b/vanilla/templates/docs/complex-components/table/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Table | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/breadcrumbs/accessibility/index.md b/vanilla/templates/docs/components/breadcrumb/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/breadcrumbs/accessibility/index.md
rename to vanilla/templates/docs/components/breadcrumb/accessibility/index.md
diff --git a/vanilla/templates/docs/components/breadcrumbs/design-guidelines/index.md b/vanilla/templates/docs/components/breadcrumb/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/breadcrumbs/design-guidelines/index.md
rename to vanilla/templates/docs/components/breadcrumb/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/breadcrumbs/figma/index.md b/vanilla/templates/docs/components/breadcrumb/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/breadcrumbs/figma/index.md
rename to vanilla/templates/docs/components/breadcrumb/figma/index.md
diff --git a/vanilla/templates/docs/components/breadcrumbs/index.md b/vanilla/templates/docs/components/breadcrumb/index.md
similarity index 100%
rename from vanilla/templates/docs/components/breadcrumbs/index.md
rename to vanilla/templates/docs/components/breadcrumb/index.md
diff --git a/vanilla/templates/docs/components/breadcrumbs/react/index.md b/vanilla/templates/docs/components/breadcrumb/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/breadcrumbs/react/index.md
rename to vanilla/templates/docs/components/breadcrumb/react/index.md
diff --git a/vanilla/templates/docs/components/buttons/accessibility/index.md b/vanilla/templates/docs/components/button/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/buttons/accessibility/index.md
rename to vanilla/templates/docs/components/button/accessibility/index.md
diff --git a/vanilla/templates/docs/components/buttons/design-guidelines/index.md b/vanilla/templates/docs/components/button/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/buttons/design-guidelines/index.md
rename to vanilla/templates/docs/components/button/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/buttons/figma/index.md b/vanilla/templates/docs/components/button/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/buttons/figma/index.md
rename to vanilla/templates/docs/components/button/figma/index.md
diff --git a/vanilla/templates/docs/components/buttons/index.md b/vanilla/templates/docs/components/button/index.md
similarity index 100%
rename from vanilla/templates/docs/components/buttons/index.md
rename to vanilla/templates/docs/components/button/index.md
diff --git a/vanilla/templates/docs/components/buttons/react/index.md b/vanilla/templates/docs/components/button/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/buttons/react/index.md
rename to vanilla/templates/docs/components/button/react/index.md
diff --git a/vanilla/templates/docs/components/checkbox/accessibility/index.md b/vanilla/templates/docs/components/checkbox/accessibility/index.md
new file mode 100644
index 0000000..ba88ee1
--- /dev/null
+++ b/vanilla/templates/docs/components/checkbox/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Checkbox | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/checkbox/design-guidelines/index.md b/vanilla/templates/docs/components/checkbox/design-guidelines/index.md
new file mode 100644
index 0000000..3dfab44
--- /dev/null
+++ b/vanilla/templates/docs/components/checkbox/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Checkbox | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/checkbox/figma/index.md b/vanilla/templates/docs/components/checkbox/figma/index.md
new file mode 100644
index 0000000..5007215
--- /dev/null
+++ b/vanilla/templates/docs/components/checkbox/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Checkbox | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/checkbox/index.md b/vanilla/templates/docs/components/checkbox/index.md
new file mode 100644
index 0000000..a2136d7
--- /dev/null
+++ b/vanilla/templates/docs/components/checkbox/index.md
@@ -0,0 +1,41 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Checkbox | Implementation
+---
+
+## Checkbox
+
+Use the checkbox component to select one or more options. To provide fully featured Vanilla style and behaviour of the checkbox a specific markup structure is needed around the checkbox input (see example below).
+
+To disable the checkbox component, add the `disabled` attribute to the respective `<input type='checkbox'>` element.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox/" class="js-example">
+View example of the checkbox components
+</a></div>
+
+### Inline checkbox
+
+When placing the checkbox component in padded containers (table cells, some list items), use the `.p-checkbox--inline` variant. It ensures the checkbox and the label text are properly aligned with other inline text.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox-inline/" class="js-example">
+View example of the inline checkbox components
+</a></div>
+
+### Heading checkbox
+
+To use checkbox component in headings use the `.p-checkbox--heading` variant of the component to make sure the checkbox and the label text are properly aligned.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox-heading/" class="js-example">
+View example of the heading checkbox components
+</a></div>
+
+### Indeterminate state checkbox
+
+When a checkbox requires a state between checked and unchecked, `checkbox.indeterminate = true;` can be set via JavaScript, which will cause the checkbox appear in an "indeterminate" state.
+
+In cases when JavaScript can't be used for that, set `aria-checked="mixed"` on checkbox to show "indeterminate" state. Please note that it will only change the visual look of the checkbox, it will not affect its state available to the browser via JavaScript.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/checkbox-indeterminate/" class="js-example">
+View example of the indeterminate checkbox component
+</a></div>
diff --git a/vanilla/templates/docs/components/checkbox/react/index.md b/vanilla/templates/docs/components/checkbox/react/index.md
new file mode 100644
index 0000000..34f2d80
--- /dev/null
+++ b/vanilla/templates/docs/components/checkbox/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Checkbox | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/code/accessibility/index.md b/vanilla/templates/docs/components/code/accessibility/index.md
new file mode 100644
index 0000000..dd5a828
--- /dev/null
+++ b/vanilla/templates/docs/components/code/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Code | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/code/design-guidelines/index.md b/vanilla/templates/docs/components/code/design-guidelines/index.md
new file mode 100644
index 0000000..9533f5a
--- /dev/null
+++ b/vanilla/templates/docs/components/code/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Code | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/code/figma/index.md b/vanilla/templates/docs/components/code/figma/index.md
new file mode 100644
index 0000000..1f5af78
--- /dev/null
+++ b/vanilla/templates/docs/components/code/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Code | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/base/code/index.md b/vanilla/templates/docs/components/code/index.md
similarity index 99%
rename from vanilla/templates/docs/base/code/index.md
rename to vanilla/templates/docs/components/code/index.md
index 37d6f72..e55f17b 100644
--- a/vanilla/templates/docs/base/code/index.md
+++ b/vanilla/templates/docs/components/code/index.md
@@ -1,7 +1,7 @@
 ---
 wrapper_template: '_layouts/docs.html'
 context:
-  title: Code | Base elements
+  title: Code | Implementation
 ---
 
 Vanilla gives you multiple ways to display code using the standard HTML elements.
diff --git a/vanilla/templates/docs/components/code/react/index.md b/vanilla/templates/docs/components/code/react/index.md
new file mode 100644
index 0000000..fb65af7
--- /dev/null
+++ b/vanilla/templates/docs/components/code/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Code | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/datalist/accessibility/index.md b/vanilla/templates/docs/components/datalist/accessibility/index.md
new file mode 100644
index 0000000..2cc5bae
--- /dev/null
+++ b/vanilla/templates/docs/components/datalist/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Datalist | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/datalist/design-guidelines/index.md b/vanilla/templates/docs/components/datalist/design-guidelines/index.md
new file mode 100644
index 0000000..e058cf1
--- /dev/null
+++ b/vanilla/templates/docs/components/datalist/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Datalist | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/datalist/figma/index.md b/vanilla/templates/docs/components/datalist/figma/index.md
new file mode 100644
index 0000000..3a7f21a
--- /dev/null
+++ b/vanilla/templates/docs/components/datalist/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Datalist | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/datalist/index.md b/vanilla/templates/docs/components/datalist/index.md
new file mode 100644
index 0000000..cd7a349
--- /dev/null
+++ b/vanilla/templates/docs/components/datalist/index.md
@@ -0,0 +1,13 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Datalist | Implementation
+---
+
+## Datalist
+
+Use the `<datalist>` element to create drop-down list with text input.
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/datalist/" class="js-example">
+View example of the base datalist
+</a></div>
diff --git a/vanilla/templates/docs/components/datalist/react/index.md b/vanilla/templates/docs/components/datalist/react/index.md
new file mode 100644
index 0000000..b549eda
--- /dev/null
+++ b/vanilla/templates/docs/components/datalist/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Datalist | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/fieldset/accessibility/index.md b/vanilla/templates/docs/components/fieldset/accessibility/index.md
new file mode 100644
index 0000000..314c0e2
--- /dev/null
+++ b/vanilla/templates/docs/components/fieldset/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Fieldset | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/fieldset/design-guidelines/index.md b/vanilla/templates/docs/components/fieldset/design-guidelines/index.md
new file mode 100644
index 0000000..43bba3a
--- /dev/null
+++ b/vanilla/templates/docs/components/fieldset/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Fieldset | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/fieldset/figma/index.md b/vanilla/templates/docs/components/fieldset/figma/index.md
new file mode 100644
index 0000000..995d62f
--- /dev/null
+++ b/vanilla/templates/docs/components/fieldset/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Fieldset | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/fieldset/index.md b/vanilla/templates/docs/components/fieldset/index.md
new file mode 100644
index 0000000..6e70121
--- /dev/null
+++ b/vanilla/templates/docs/components/fieldset/index.md
@@ -0,0 +1,13 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Fieldset | Implementation
+---
+
+## Fieldset
+
+You can use the `<fieldset>` element to divide the form into different logical sections.
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/fieldset/" class="js-example">
+View example of the base form fieldset
+</a></div>
diff --git a/vanilla/templates/docs/components/fieldset/react/index.md b/vanilla/templates/docs/components/fieldset/react/index.md
new file mode 100644
index 0000000..9212bf9
--- /dev/null
+++ b/vanilla/templates/docs/components/fieldset/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Fieldset | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/images/design-guidelines/index.md b/vanilla/templates/docs/components/image/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/images/design-guidelines/index.md
rename to vanilla/templates/docs/components/image/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/images/figma/index.md b/vanilla/templates/docs/components/image/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/images/figma/index.md
rename to vanilla/templates/docs/components/image/figma/index.md
diff --git a/vanilla/templates/docs/components/images/index.md b/vanilla/templates/docs/components/image/index.md
similarity index 100%
rename from vanilla/templates/docs/components/images/index.md
rename to vanilla/templates/docs/components/image/index.md
diff --git a/vanilla/templates/docs/components/images/react/index.md b/vanilla/templates/docs/components/image/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/images/react/index.md
rename to vanilla/templates/docs/components/image/react/index.md
diff --git a/vanilla/templates/docs/components/input/accessibility/index.md b/vanilla/templates/docs/components/input/accessibility/index.md
new file mode 100644
index 0000000..64f0e98
--- /dev/null
+++ b/vanilla/templates/docs/components/input/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Input | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/input/design-guidelines/index.md b/vanilla/templates/docs/components/input/design-guidelines/index.md
new file mode 100644
index 0000000..4fd3d06
--- /dev/null
+++ b/vanilla/templates/docs/components/input/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Input | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/input/figma/index.md b/vanilla/templates/docs/components/input/figma/index.md
new file mode 100644
index 0000000..2829645
--- /dev/null
+++ b/vanilla/templates/docs/components/input/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Input | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/input/index.md b/vanilla/templates/docs/components/input/index.md
new file mode 100644
index 0000000..31b2bd2
--- /dev/null
+++ b/vanilla/templates/docs/components/input/index.md
@@ -0,0 +1,15 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Input | Implementation
+---
+
+## Single-line text field
+
+`<input type="text">` is a single-line text field.
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/input/" class="js-example">
+View example of a single-line text field
+</a></div>
+
+Vanilla also styles HTML’s other single-line field types: `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search` and `tel`. For the `search` type, see <a href="../patterns/search-box">Search box</a>.
diff --git a/vanilla/templates/docs/components/input/react/index.md b/vanilla/templates/docs/components/input/react/index.md
new file mode 100644
index 0000000..0b95a87
--- /dev/null
+++ b/vanilla/templates/docs/components/input/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Input | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/links/accessibility/index.md b/vanilla/templates/docs/components/link/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/links/accessibility/index.md
rename to vanilla/templates/docs/components/link/accessibility/index.md
diff --git a/vanilla/templates/docs/components/links/design-guidelines/index.md b/vanilla/templates/docs/components/link/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/links/design-guidelines/index.md
rename to vanilla/templates/docs/components/link/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/links/figma/index.md b/vanilla/templates/docs/components/link/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/links/figma/index.md
rename to vanilla/templates/docs/components/link/figma/index.md
diff --git a/vanilla/templates/docs/components/links/index.md b/vanilla/templates/docs/components/link/index.md
similarity index 100%
rename from vanilla/templates/docs/components/links/index.md
rename to vanilla/templates/docs/components/link/index.md
diff --git a/vanilla/templates/docs/components/links/react/index.md b/vanilla/templates/docs/components/link/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/links/react/index.md
rename to vanilla/templates/docs/components/link/react/index.md
diff --git a/vanilla/templates/docs/components/lists/accessibility/index.md b/vanilla/templates/docs/components/list/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/lists/accessibility/index.md
rename to vanilla/templates/docs/components/list/accessibility/index.md
diff --git a/vanilla/templates/docs/components/lists/design-guidelines/index.md b/vanilla/templates/docs/components/list/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/lists/design-guidelines/index.md
rename to vanilla/templates/docs/components/list/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/lists/figma/index.md b/vanilla/templates/docs/components/list/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/lists/figma/index.md
rename to vanilla/templates/docs/components/list/figma/index.md
diff --git a/vanilla/templates/docs/components/lists/index.md b/vanilla/templates/docs/components/list/index.md
similarity index 100%
rename from vanilla/templates/docs/components/lists/index.md
rename to vanilla/templates/docs/components/list/index.md
diff --git a/vanilla/templates/docs/components/lists/react/index.md b/vanilla/templates/docs/components/list/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/lists/react/index.md
rename to vanilla/templates/docs/components/list/react/index.md
diff --git a/vanilla/templates/docs/components/radio/accessibility/index.md b/vanilla/templates/docs/components/radio/accessibility/index.md
new file mode 100644
index 0000000..e6f7b45
--- /dev/null
+++ b/vanilla/templates/docs/components/radio/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Radio | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/radio/design-guidelines/index.md b/vanilla/templates/docs/components/radio/design-guidelines/index.md
new file mode 100644
index 0000000..bdf8a6f
--- /dev/null
+++ b/vanilla/templates/docs/components/radio/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Radio | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/radio/figma/index.md b/vanilla/templates/docs/components/radio/figma/index.md
new file mode 100644
index 0000000..c2537fb
--- /dev/null
+++ b/vanilla/templates/docs/components/radio/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Radio | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/radio/index.md b/vanilla/templates/docs/components/radio/index.md
new file mode 100644
index 0000000..d0d3676
--- /dev/null
+++ b/vanilla/templates/docs/components/radio/index.md
@@ -0,0 +1,31 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Radio | Implementation
+---
+
+## Radio button
+
+Use radio buttons to select one of the given set of options. To provide fully featured Vanilla style and behaviour of the radio button a specific markup structure is needed around the radio button input (see example below).
+
+To disable the radio component, add the `disabled` attribute to the respective `<input type='radio'>` element.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/radio/" class="js-example">
+View example of the radio components
+</a></div>
+
+### Inline radio button
+
+When placing the radio component in padded containers (table cells, some list items), use the `.p-radio--inline` variant of the component to make sure the radio button and the label text are properly aligned with other inline text.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/radio-inline/" class="js-example">
+View example of the inline radio components
+</a></div>
+
+### Heading radio button
+
+To use radio component in headings use the `.p-checkbox--heading` variant of the component to make sure the radio button and the label text are properly aligned.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/radio-heading/" class="js-example">
+View example of the heading radio components
+</a></div>
diff --git a/vanilla/templates/docs/components/radio/react/index.md b/vanilla/templates/docs/components/radio/react/index.md
new file mode 100644
index 0000000..a89b962
--- /dev/null
+++ b/vanilla/templates/docs/components/radio/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Radio | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/range/accessibility/index.md b/vanilla/templates/docs/components/range/accessibility/index.md
new file mode 100644
index 0000000..5b89049
--- /dev/null
+++ b/vanilla/templates/docs/components/range/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Range | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/range/design-guidelines/index.md b/vanilla/templates/docs/components/range/design-guidelines/index.md
new file mode 100644
index 0000000..9477f53
--- /dev/null
+++ b/vanilla/templates/docs/components/range/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Range | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/range/figma/index.md b/vanilla/templates/docs/components/range/figma/index.md
new file mode 100644
index 0000000..a6f0041
--- /dev/null
+++ b/vanilla/templates/docs/components/range/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Range | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/range/index.md b/vanilla/templates/docs/components/range/index.md
new file mode 100644
index 0000000..60258cc
--- /dev/null
+++ b/vanilla/templates/docs/components/range/index.md
@@ -0,0 +1,13 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Range | Implementation
+---
+
+## Range
+
+The `<input type="range">` allows a user to select from a specified range of values, where the precise value is not considered important.
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/range/" class="js-example">
+View example of the slider pattern
+</a></div>
diff --git a/vanilla/templates/docs/components/range/react/index.md b/vanilla/templates/docs/components/range/react/index.md
new file mode 100644
index 0000000..468d519
--- /dev/null
+++ b/vanilla/templates/docs/components/range/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Range | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/select/accessibility/index.md b/vanilla/templates/docs/components/select/accessibility/index.md
new file mode 100644
index 0000000..5211f21
--- /dev/null
+++ b/vanilla/templates/docs/components/select/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Select | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/select/design-guidelines/index.md b/vanilla/templates/docs/components/select/design-guidelines/index.md
new file mode 100644
index 0000000..7a77339
--- /dev/null
+++ b/vanilla/templates/docs/components/select/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Select | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/select/figma/index.md b/vanilla/templates/docs/components/select/figma/index.md
new file mode 100644
index 0000000..2195af5
--- /dev/null
+++ b/vanilla/templates/docs/components/select/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Select | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/select/index.md b/vanilla/templates/docs/components/select/index.md
new file mode 100644
index 0000000..92e03ab
--- /dev/null
+++ b/vanilla/templates/docs/components/select/index.md
@@ -0,0 +1,19 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Select | Implementation
+---
+
+## Select
+
+Use the `<select>` element to create a drop-down list.
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/selects/" class="js-example">
+View example of the base selects
+</a></div>
+
+Use the `multiple` attribute to create a multiple select control.
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/select-multiple/" class="js-example">
+View example of the base multiple selects
+</a></div>
diff --git a/vanilla/templates/docs/components/select/react/index.md b/vanilla/templates/docs/components/select/react/index.md
new file mode 100644
index 0000000..18706f3
--- /dev/null
+++ b/vanilla/templates/docs/components/select/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Select | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/separator/accessibility/index.md b/vanilla/templates/docs/components/separator/accessibility/index.md
new file mode 100644
index 0000000..8569baf
--- /dev/null
+++ b/vanilla/templates/docs/components/separator/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Separator | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/separator/design-guidelines/index.md b/vanilla/templates/docs/components/separator/design-guidelines/index.md
new file mode 100644
index 0000000..af66c9e
--- /dev/null
+++ b/vanilla/templates/docs/components/separator/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Separator | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/separator/figma/index.md b/vanilla/templates/docs/components/separator/figma/index.md
new file mode 100644
index 0000000..74ea1a1
--- /dev/null
+++ b/vanilla/templates/docs/components/separator/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Separator | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/base/separators/index.md b/vanilla/templates/docs/components/separator/index.md
similarity index 98%
rename from vanilla/templates/docs/base/separators/index.md
rename to vanilla/templates/docs/components/separator/index.md
index 5456c5a..ae5ab6b 100644
--- a/vanilla/templates/docs/base/separators/index.md
+++ b/vanilla/templates/docs/components/separator/index.md
@@ -1,7 +1,7 @@
 ---
 wrapper_template: '_layouts/docs.html'
 context:
-  title: Separators | Base elements
+  title: Separator | Implementation
 ---
 
 Vanilla gives you multiple ways to separate parts of the content with a horizontal line.
diff --git a/vanilla/templates/docs/components/separator/react/index.md b/vanilla/templates/docs/components/separator/react/index.md
new file mode 100644
index 0000000..7ddafe4
--- /dev/null
+++ b/vanilla/templates/docs/components/separator/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Separator | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/tabs/accessibility/index.md b/vanilla/templates/docs/components/tab/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tabs/accessibility/index.md
rename to vanilla/templates/docs/components/tab/accessibility/index.md
diff --git a/vanilla/templates/docs/components/tabs/design-guidelines/index.md b/vanilla/templates/docs/components/tab/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tabs/design-guidelines/index.md
rename to vanilla/templates/docs/components/tab/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/tabs/figma/index.md b/vanilla/templates/docs/components/tab/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tabs/figma/index.md
rename to vanilla/templates/docs/components/tab/figma/index.md
diff --git a/vanilla/templates/docs/components/tabs/index.md b/vanilla/templates/docs/components/tab/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tabs/index.md
rename to vanilla/templates/docs/components/tab/index.md
diff --git a/vanilla/templates/docs/components/tabs/react/index.md b/vanilla/templates/docs/components/tab/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tabs/react/index.md
rename to vanilla/templates/docs/components/tab/react/index.md
diff --git a/vanilla/templates/docs/components/textarea/accessibility/index.md b/vanilla/templates/docs/components/textarea/accessibility/index.md
new file mode 100644
index 0000000..f9d336b
--- /dev/null
+++ b/vanilla/templates/docs/components/textarea/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Textarea | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/textarea/design-guidelines/index.md b/vanilla/templates/docs/components/textarea/design-guidelines/index.md
new file mode 100644
index 0000000..3516991
--- /dev/null
+++ b/vanilla/templates/docs/components/textarea/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Textarea | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/textarea/figma/index.md b/vanilla/templates/docs/components/textarea/figma/index.md
new file mode 100644
index 0000000..f21a216
--- /dev/null
+++ b/vanilla/templates/docs/components/textarea/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Textarea | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/textarea/index.md b/vanilla/templates/docs/components/textarea/index.md
new file mode 100644
index 0000000..80938ca
--- /dev/null
+++ b/vanilla/templates/docs/components/textarea/index.md
@@ -0,0 +1,15 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Textarea | Implementation
+---
+
+## Multi-line text field
+
+`<textarea>` is a multi-line text field.
+
+<div class="embedded-example"><a href="/docs/examples/base/forms/textarea/" class="js-example">
+View example of a textarea
+</a></div>
+
+Note: The attribute `readonly` disables the input but it still retains a default cursor.
diff --git a/vanilla/templates/docs/components/textarea/react/index.md b/vanilla/templates/docs/components/textarea/react/index.md
new file mode 100644
index 0000000..10e4665
--- /dev/null
+++ b/vanilla/templates/docs/components/textarea/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Textarea | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/tooltips/accessibility/index.md b/vanilla/templates/docs/components/tooltip/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tooltips/accessibility/index.md
rename to vanilla/templates/docs/components/tooltip/accessibility/index.md
diff --git a/vanilla/templates/docs/components/tooltips/design-guidelines/index.md b/vanilla/templates/docs/components/tooltip/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tooltips/design-guidelines/index.md
rename to vanilla/templates/docs/components/tooltip/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/tooltips/figma/index.md b/vanilla/templates/docs/components/tooltip/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tooltips/figma/index.md
rename to vanilla/templates/docs/components/tooltip/figma/index.md
diff --git a/vanilla/templates/docs/components/tooltips/index.md b/vanilla/templates/docs/components/tooltip/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tooltips/index.md
rename to vanilla/templates/docs/components/tooltip/index.md
diff --git a/vanilla/templates/docs/components/tooltips/react/index.md b/vanilla/templates/docs/components/tooltip/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/tooltips/react/index.md
rename to vanilla/templates/docs/components/tooltip/react/index.md
diff --git a/vanilla/templates/docs/components/icons/accessibility/index.md b/vanilla/templates/docs/foundations/icon/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/icons/accessibility/index.md
rename to vanilla/templates/docs/foundations/icon/accessibility/index.md
diff --git a/vanilla/templates/docs/components/icons/design-guidelines/index.md b/vanilla/templates/docs/foundations/icon/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/icons/design-guidelines/index.md
rename to vanilla/templates/docs/foundations/icon/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/icons/figma/index.md b/vanilla/templates/docs/foundations/icon/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/icons/figma/index.md
rename to vanilla/templates/docs/foundations/icon/figma/index.md
diff --git a/vanilla/templates/docs/components/icons/index.md b/vanilla/templates/docs/foundations/icon/index.md
similarity index 99%
rename from vanilla/templates/docs/components/icons/index.md
rename to vanilla/templates/docs/foundations/icon/index.md
index 3982bf8..be81033 100644
--- a/vanilla/templates/docs/components/icons/index.md
+++ b/vanilla/templates/docs/foundations/icon/index.md
@@ -1,7 +1,7 @@
 ---
 wrapper_template: '_layouts/docs.html'
 context:
-  title: Icons | Implementation
+  title: Icons | Foundations
   extra_stylesheet: build/css/standalone/patterns_icons-additional.css
 ---
 
diff --git a/vanilla/templates/docs/foundations/icon/react/index.md b/vanilla/templates/docs/foundations/icon/react/index.md
new file mode 100644
index 0000000..f78a926
--- /dev/null
+++ b/vanilla/templates/docs/foundations/icon/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Icons | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/foundations/typography/accessibility/index.md b/vanilla/templates/docs/foundations/typography/accessibility/index.md
new file mode 100644
index 0000000..08c5b2b
--- /dev/null
+++ b/vanilla/templates/docs/foundations/typography/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Typography | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/foundations/typography/design-guidelines/index.md b/vanilla/templates/docs/foundations/typography/design-guidelines/index.md
new file mode 100644
index 0000000..de62fe4
--- /dev/null
+++ b/vanilla/templates/docs/foundations/typography/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Typography | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/foundations/typography/figma/index.md b/vanilla/templates/docs/foundations/typography/figma/index.md
new file mode 100644
index 0000000..5de92cd
--- /dev/null
+++ b/vanilla/templates/docs/foundations/typography/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Typography | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/base/typography/index.md b/vanilla/templates/docs/foundations/typography/index.md
similarity index 99%
rename from vanilla/templates/docs/base/typography/index.md
rename to vanilla/templates/docs/foundations/typography/index.md
index d579b0d..e82cd34 100644
--- a/vanilla/templates/docs/base/typography/index.md
+++ b/vanilla/templates/docs/foundations/typography/index.md
@@ -1,7 +1,7 @@
 ---
 wrapper_template: '_layouts/docs.html'
 context:
-  title: Typography | Base elements
+  title: Typography | Foundations
 ---
 
 ## The Ubuntu typeface
diff --git a/vanilla/templates/docs/guidelines/example/index.md b/vanilla/templates/docs/guidelines/example/index.md
new file mode 100644
index 0000000..a99b436
--- /dev/null
+++ b/vanilla/templates/docs/guidelines/example/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Layouts
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/pages/example/accessibility/index.md b/vanilla/templates/docs/pages/example/accessibility/index.md
new file mode 100644
index 0000000..ecdc931
--- /dev/null
+++ b/vanilla/templates/docs/pages/example/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/pages/example/design-guidelines/index.md b/vanilla/templates/docs/pages/example/design-guidelines/index.md
new file mode 100644
index 0000000..691f43f
--- /dev/null
+++ b/vanilla/templates/docs/pages/example/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/pages/example/figma/index.md b/vanilla/templates/docs/pages/example/figma/index.md
new file mode 100644
index 0000000..22bd497
--- /dev/null
+++ b/vanilla/templates/docs/pages/example/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/pages/example/index.md b/vanilla/templates/docs/pages/example/index.md
new file mode 100644
index 0000000..c9c2cf8
--- /dev/null
+++ b/vanilla/templates/docs/pages/example/index.md
@@ -0,0 +1,5 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Implementation
+---
diff --git a/vanilla/templates/docs/pages/example/react/index.md b/vanilla/templates/docs/pages/example/react/index.md
new file mode 100644
index 0000000..0cd00f2
--- /dev/null
+++ b/vanilla/templates/docs/pages/example/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | React
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/patterns/example/accessibility/index.md b/vanilla/templates/docs/patterns/example/accessibility/index.md
new file mode 100644
index 0000000..ecdc931
--- /dev/null
+++ b/vanilla/templates/docs/patterns/example/accessibility/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Accessibility
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/patterns/example/design-guidelines/index.md b/vanilla/templates/docs/patterns/example/design-guidelines/index.md
new file mode 100644
index 0000000..691f43f
--- /dev/null
+++ b/vanilla/templates/docs/patterns/example/design-guidelines/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Design Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/patterns/example/figma/index.md b/vanilla/templates/docs/patterns/example/figma/index.md
new file mode 100644
index 0000000..22bd497
--- /dev/null
+++ b/vanilla/templates/docs/patterns/example/figma/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Figma
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/patterns/example/index.md b/vanilla/templates/docs/patterns/example/index.md
new file mode 100644
index 0000000..c9c2cf8
--- /dev/null
+++ b/vanilla/templates/docs/patterns/example/index.md
@@ -0,0 +1,5 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | Implementation
+---
diff --git a/vanilla/templates/docs/patterns/example/react/index.md b/vanilla/templates/docs/patterns/example/react/index.md
new file mode 100644
index 0000000..0cd00f2
--- /dev/null
+++ b/vanilla/templates/docs/patterns/example/react/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Example | React
+---
+
+# 🚧 WIP 🚧