\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/advanced-components/collapsibles.njk b/web/amplify/eleventy/_includes/advanced-components/collapsibles.njk
new file mode 100644
index 00000000..1e09b54c
--- /dev/null
+++ b/web/amplify/eleventy/_includes/advanced-components/collapsibles.njk
@@ -0,0 +1,10 @@
+
+ {%- for key, panel in params.panels -%}
+
+
{{ panel.title }}
+
+ {{ panel.body | safe }}
+
+
+ {%- endfor -%}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/advanced-components/disclosure.njk b/web/amplify/eleventy/_includes/advanced-components/disclosure.njk
new file mode 100644
index 00000000..c66fb581
--- /dev/null
+++ b/web/amplify/eleventy/_includes/advanced-components/disclosure.njk
@@ -0,0 +1,2 @@
+
+{{ params.hiddenContent | safe }}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/advanced-components/tabs.njk b/web/amplify/eleventy/_includes/advanced-components/tabs.njk
new file mode 100644
index 00000000..971c2810
--- /dev/null
+++ b/web/amplify/eleventy/_includes/advanced-components/tabs.njk
@@ -0,0 +1,13 @@
+
+ {%- if params.image -%}
+ {%- if params.image.inFrame -%}
+
+
+
+ {%- else -%}
+
+
+
+ {%- endif -%}
+ {%- endif -%}
+ {%- endif -%}
+
+{%- endif -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/core-components/image-component.njk b/web/amplify/eleventy/_includes/core-components/image-component.njk
new file mode 100644
index 00000000..322bb5b7
--- /dev/null
+++ b/web/amplify/eleventy/_includes/core-components/image-component.njk
@@ -0,0 +1,17 @@
+{%- if params.aspectRatio === "16:9" -%}
+ {% set aspectRatio = " l-frame--16-9" %}
+{%- elif params.aspectRatio === "3:2" -%}
+ {% set aspectRatio = " l-frame--3-2" %}
+{%- elif params.aspectRatio === "4:3" -%}
+ {% set aspectRatio = " l-frame--4-3" %}
+{%- elif params.aspectRatio === "square" -%}
+ {% set aspectRatio = " l-frame--square" %}
+{%- endif -%}
+
+
+
+
+
+ {{ params.caption | safe }}
+
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/core-components/notes.njk b/web/amplify/eleventy/_includes/core-components/notes.njk
new file mode 100644
index 00000000..cd8351c2
--- /dev/null
+++ b/web/amplify/eleventy/_includes/core-components/notes.njk
@@ -0,0 +1,21 @@
+{% if params.type === "info" %}
+
+
{{ params.title }}
+ {{ params.message | safe }}
+
+{% elif params.type === "success" %}
+
+
{{ params.title }}
+ {{ params.message | safe }}
+
+{% elif params.type === "warning" %}
+
+
{{ params.title }}
+ {{ params.message | safe }}
+
+{% elif params.type === "error" %}
+
+
{{ params.title }}
+ {{ params.message | safe }}
+
+{% endif %}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/core-components/progress-indicator.njk b/web/amplify/eleventy/_includes/core-components/progress-indicator.njk
new file mode 100644
index 00000000..cca3baf9
--- /dev/null
+++ b/web/amplify/eleventy/_includes/core-components/progress-indicator.njk
@@ -0,0 +1,23 @@
+
+
+ {%- endfor -%}
+
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/core-components/quote.njk b/web/amplify/eleventy/_includes/core-components/quote.njk
new file mode 100644
index 00000000..848e7cad
--- /dev/null
+++ b/web/amplify/eleventy/_includes/core-components/quote.njk
@@ -0,0 +1,6 @@
+
+
{{ params.quote }}
+
+
+ {{ params.author }}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/core-components/text-component.njk b/web/amplify/eleventy/_includes/core-components/text-component.njk
new file mode 100644
index 00000000..3ea1ffd4
--- /dev/null
+++ b/web/amplify/eleventy/_includes/core-components/text-component.njk
@@ -0,0 +1,3 @@
+
+ {{ params.body }}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/core-components/video.njk b/web/amplify/eleventy/_includes/core-components/video.njk
new file mode 100644
index 00000000..26bb71c7
--- /dev/null
+++ b/web/amplify/eleventy/_includes/core-components/video.njk
@@ -0,0 +1,6 @@
+
+
+
+
+ {{ params.iframe.caption | safe }}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/fundamentals/button.njk b/web/amplify/eleventy/_includes/fundamentals/button.njk
new file mode 100644
index 00000000..ce98a37e
--- /dev/null
+++ b/web/amplify/eleventy/_includes/fundamentals/button.njk
@@ -0,0 +1,41 @@
+{%- if params.isExample -%}
+
+ {%- if not params.disabled -%}
+
+ {%- else -%}
+
+ {%- endif -%}
+
+{%- else -%}
+{%- if not params.disabled -%}
+
+{%- else -%}
+
+{%- endif -%}
+{%- endif -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/fundamentals/details.njk b/web/amplify/eleventy/_includes/fundamentals/details.njk
new file mode 100644
index 00000000..f48454ac
--- /dev/null
+++ b/web/amplify/eleventy/_includes/fundamentals/details.njk
@@ -0,0 +1,4 @@
+
+ {{ params.summary }}
+ {{ params.details | safe }}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/fundamentals/form.njk b/web/amplify/eleventy/_includes/fundamentals/form.njk
new file mode 100644
index 00000000..f6fdf280
--- /dev/null
+++ b/web/amplify/eleventy/_includes/fundamentals/form.njk
@@ -0,0 +1,9 @@
+{%- from "../system/forms/field.njk" import field -%}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/fundamentals/link.njk b/web/amplify/eleventy/_includes/fundamentals/link.njk
new file mode 100644
index 00000000..70e183a3
--- /dev/null
+++ b/web/amplify/eleventy/_includes/fundamentals/link.njk
@@ -0,0 +1,31 @@
+{%- if not params.isExample -%}
+
+{{ params.text }}
+
+{%- else -%}
+
+{%- endif -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/fundamentals/table.njk b/web/amplify/eleventy/_includes/fundamentals/table.njk
new file mode 100644
index 00000000..df64e416
--- /dev/null
+++ b/web/amplify/eleventy/_includes/fundamentals/table.njk
@@ -0,0 +1,49 @@
+{%- if params.hasWrapper -%}
+
+
+
{{ params.title }}
+
+
+ {%- for key, heading in params.headings -%}
+
{{ heading.text }}
+ {%- endfor -%}
+
+
+
+ {%- for key, row in params.rows -%}
+
+ {%- if row.heading -%}
+
{{ row.heading }}
+ {%- endif -%}
+ {%- for key, column in row.columns -%}
+
{{ column.text }}
+ {%- endfor -%}
+
+ {%- endfor -%}
+
+
+
+{%- else -%}
+
+
+
{{ params.title }}
+
+
+
+ {%- for key, heading in params.headings -%}
+
{{ heading.text }}
+ {%- endfor -%}
+
+
+
+ {%- for key, row in params.rows -%}
+
+
{{ row.heading }}
+ {%- for key, column in row.columns -%}
+
{{ column.text }}
+ {%- endfor -%}
+
+ {%- endfor -%}
+
+
+{%- endif -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/global/footer.njk b/web/amplify/eleventy/_includes/global/footer.njk
new file mode 100644
index 00000000..e88003f0
--- /dev/null
+++ b/web/amplify/eleventy/_includes/global/footer.njk
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/global/global-nav.njk b/web/amplify/eleventy/_includes/global/global-nav.njk
new file mode 100644
index 00000000..374fe7ad
--- /dev/null
+++ b/web/amplify/eleventy/_includes/global/global-nav.njk
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/global/header.njk b/web/amplify/eleventy/_includes/global/header.njk
new file mode 100644
index 00000000..ac430441
--- /dev/null
+++ b/web/amplify/eleventy/_includes/global/header.njk
@@ -0,0 +1,6 @@
+
+
+
+{%- include './global-nav.njk' -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/global/sidebar.njk b/web/amplify/eleventy/_includes/global/sidebar.njk
new file mode 100644
index 00000000..95a78817
--- /dev/null
+++ b/web/amplify/eleventy/_includes/global/sidebar.njk
@@ -0,0 +1,27 @@
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/homepage.njk b/web/amplify/eleventy/_includes/homepage.njk
new file mode 100644
index 00000000..d7d32396
--- /dev/null
+++ b/web/amplify/eleventy/_includes/homepage.njk
@@ -0,0 +1,3 @@
+{%- extends "base.njk" -%}
+{%- from "./system/components.njk" import pageComponents -%}
+{{ content | safe }}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/layout-helpers/box.njk b/web/amplify/eleventy/_includes/layout-helpers/box.njk
new file mode 100644
index 00000000..6ced7151
--- /dev/null
+++ b/web/amplify/eleventy/_includes/layout-helpers/box.njk
@@ -0,0 +1,11 @@
+{%- if params.noPadding -%}
+ {% set noPadding = " l-box--no-padding" %}
+{%- endif -%}
+{%- if params.title -%}
+
{{ params.title }}
+{%- endif -%}
+{%- if params.noBorder -%}
+
{{ params.text | safe }}
+{%- else -%}
+
{{ params.text | safe }}
+{%- endif -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/layout-helpers/center.njk b/web/amplify/eleventy/_includes/layout-helpers/center.njk
new file mode 100644
index 00000000..3e0221ab
--- /dev/null
+++ b/web/amplify/eleventy/_includes/layout-helpers/center.njk
@@ -0,0 +1 @@
+
{{ params.text }}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/layout-helpers/cluster.njk b/web/amplify/eleventy/_includes/layout-helpers/cluster.njk
new file mode 100644
index 00000000..2c264455
--- /dev/null
+++ b/web/amplify/eleventy/_includes/layout-helpers/cluster.njk
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/layout-helpers/cover.njk b/web/amplify/eleventy/_includes/layout-helpers/cover.njk
new file mode 100644
index 00000000..6fb3d767
--- /dev/null
+++ b/web/amplify/eleventy/_includes/layout-helpers/cover.njk
@@ -0,0 +1,23 @@
+{%- if params.example -%}
+
{{ params.title }}
+{%- endif -%}
+
+ {%- if params.lead -%}
+
{{ params.title }}
+
{{ params.body }}
+ {%- elif params.nested -%}
+
+
+ {{ params.body }}
+
+
+ {%- elif params.headerFooter -%}
+
{{ params.headerContent | safe }}
+
{{ params.body }}
+
{{ params.footerContent | safe }}
+ {%- else -%}
+
+ {{ params.body }}
+
+ {%- endif -%}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/layout-helpers/frame.njk b/web/amplify/eleventy/_includes/layout-helpers/frame.njk
new file mode 100644
index 00000000..5978c8ca
--- /dev/null
+++ b/web/amplify/eleventy/_includes/layout-helpers/frame.njk
@@ -0,0 +1,18 @@
+{%- if params.aspectRatio === "16:9" -%}
+ {% set aspectRatio = " l-frame--16-9" %}
+{%- elif params.aspectRatio === "3:2" -%}
+ {% set aspectRatio = " l-frame--3-2" %}
+{%- elif params.aspectRatio === "4:3" -%}
+ {% set aspectRatio = " l-frame--4-3" %}
+{%- elif params.aspectRatio === "square" -%}
+ {% set aspectRatio = " l-frame--square" %}
+{%- endif -%}
+{%- if params.example -%}
+
{{ params.title }}
+{%- endif -%}
+
+
+
+
+ {{ params.image.caption }}
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/layout-helpers/sidebar.njk b/web/amplify/eleventy/_includes/layout-helpers/sidebar.njk
new file mode 100644
index 00000000..4036ffd7
--- /dev/null
+++ b/web/amplify/eleventy/_includes/layout-helpers/sidebar.njk
@@ -0,0 +1,16 @@
+{%- if params.example -%}
+
{{ params.title }}
+{%- endif -%}
+{%- if params.nested -%}
+
+
{{ params.notSidebar }}
+
+
+
{{ params.sidebarContent }}
+
+{%- else -%}
+
+
{{ params.notSidebar }}
+
{{ params.sidebarContent }}
+
+{%- endif -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/layout-helpers/switcher.njk b/web/amplify/eleventy/_includes/layout-helpers/switcher.njk
new file mode 100644
index 00000000..9abf1620
--- /dev/null
+++ b/web/amplify/eleventy/_includes/layout-helpers/switcher.njk
@@ -0,0 +1,9 @@
+
+
+ {%- for key, item in params.items -%}
+
+
{{ item.text }}
+
+ {%- endfor -%}
+
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/page.njk b/web/amplify/eleventy/_includes/page.njk
new file mode 100644
index 00000000..e96acdf1
--- /dev/null
+++ b/web/amplify/eleventy/_includes/page.njk
@@ -0,0 +1,11 @@
+---
+layout: base.njk
+---
+
+ {%- include "global/sidebar.njk" -%}
+
+
+
{{ title }}
+ {{ content | safe }}
+
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/system/component.njk b/web/amplify/eleventy/_includes/system/component.njk
new file mode 100644
index 00000000..6b02340f
--- /dev/null
+++ b/web/amplify/eleventy/_includes/system/component.njk
@@ -0,0 +1,14 @@
+{%- macro component(type, name, params) -%}
+{%- if params.componentType -%}
+ {% set componentClass = params.componentType %}
+{%- endif -%}
+ {%- if name === "quote" or name === "video" -%}
+
+ {%- include '../' + type + '/' + name + '.njk' -%}
+
+ {%- else -%}
+
+ {%- include '../' + type + '/' + name + '.njk' -%}
+
+ {%- endif -%}
+{%- endmacro -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/system/components.njk b/web/amplify/eleventy/_includes/system/components.njk
new file mode 100644
index 00000000..04c7f0f8
--- /dev/null
+++ b/web/amplify/eleventy/_includes/system/components.njk
@@ -0,0 +1,24 @@
+{%- macro pageComponents(target) -%}
+{%- from "./component.njk" import component -%}
+{%- for key, item in target -%}
+
+{%- if item.type and item.name and item.data -%}
+
+ {{ component(item.type, item.name, item.data) }}
+
+ {%- if item | length <= 1 -%}
+ {%- for childKey, child in item -%}
+ {{ component(child.type, child.name, child.data) }}
+ {%- endfor -%}
+ {%- endif -%}
+
+{%- else -%}
+
+ {%- for childKey, child in item -%}
+ {{ component(child.type, child.name, child.data) }}
+ {%- endfor -%}
+
+{%- endif -%}
+
+{%- endfor -%}
+{%- endmacro -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/system/forms/field-types/input.njk b/web/amplify/eleventy/_includes/system/forms/field-types/input.njk
new file mode 100644
index 00000000..8f3eaf35
--- /dev/null
+++ b/web/amplify/eleventy/_includes/system/forms/field-types/input.njk
@@ -0,0 +1,41 @@
+{%- macro input(params) -%}
+
+{%- endmacro -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/system/forms/field-types/select.njk b/web/amplify/eleventy/_includes/system/forms/field-types/select.njk
new file mode 100644
index 00000000..ac41d722
--- /dev/null
+++ b/web/amplify/eleventy/_includes/system/forms/field-types/select.njk
@@ -0,0 +1,13 @@
+{%- macro select(params) -%}
+
+{%- endmacro -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/system/forms/field.njk b/web/amplify/eleventy/_includes/system/forms/field.njk
new file mode 100644
index 00000000..3fdbfcec
--- /dev/null
+++ b/web/amplify/eleventy/_includes/system/forms/field.njk
@@ -0,0 +1,120 @@
+{%- from "./field-types/input.njk" import input -%}
+{%- from "./field-types/select.njk" import select -%}
+{%- macro field(params) -%}
+
+{%- if params.isSegmentedGroup -%}
+ {% set segmentedGroup = " segmented-group-wrapper" %}
+{%- endif -%}
+{%- if params.error -%}
+ {% set errorClass = " field--error" %}
+{%- endif -%}
+
+
+ {%- if params.type !== "fieldset" -%}
+ {%- if params.label -%}
+
+ {%- endif -%}
+ {%- if params.hint -%}
+
+{%- endmacro -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/system/forms/fields.njk b/web/amplify/eleventy/_includes/system/forms/fields.njk
new file mode 100644
index 00000000..14daadf8
--- /dev/null
+++ b/web/amplify/eleventy/_includes/system/forms/fields.njk
@@ -0,0 +1,6 @@
+{%- macro fields(target, params) -%}
+{%- from "./field.njk" import field -%}
+{%- for key, field in target -%}
+ {{ field(field) }}
+{%- endfor -%}
+{%- endmacro -%}
\ No newline at end of file
diff --git a/web/amplify/eleventy/_includes/system/page-component.njk b/web/amplify/eleventy/_includes/system/page-component.njk
new file mode 100644
index 00000000..e69de29b
diff --git a/web/amplify/eleventy/advanced-components.md b/web/amplify/eleventy/advanced-components.md
new file mode 100644
index 00000000..2e7287a7
--- /dev/null
+++ b/web/amplify/eleventy/advanced-components.md
@@ -0,0 +1,9 @@
+---
+title: Advanced components
+navItem: true
+root: true
+navOrder: 5
+---
+Examples of components with JavaScript enhancements, such as collapsible content.
+
+In the [advanced components](https://github.com/studio24/amplify/blob/main/docs/css.md#css-architecture) directory handles the styles for those few components that are enhanced in some way with JavaScript. They are compiled into a separate `advanced.css` file, which is only served to [supported browsers](https://amplify.studio24.net/amplify/get-started/browser-support.html).
\ No newline at end of file
diff --git a/web/amplify/eleventy/advanced-components/accessible-autocomplete.md b/web/amplify/eleventy/advanced-components/accessible-autocomplete.md
new file mode 100644
index 00000000..2697fae7
--- /dev/null
+++ b/web/amplify/eleventy/advanced-components/accessible-autocomplete.md
@@ -0,0 +1,1020 @@
+---
+title: Accessible auto-complete
+components:
+ autocomplete:
+ type: advanced-components
+ name: accessible-autocomplete
+ data:
+ field:
+ name: country
+ label: Country
+ id: country
+ defaultoption: Select a country
+ options:
+ option1:
+ value: 1
+ alt: AF
+ title: Afghanistan
+ option2:
+ value: 2
+ alt: AX Aaland Aland
+ title: Åland Islands
+ option3:
+ value: 3
+ alt: AL
+ title: Albania
+ option4:
+ value: 4
+ alt: DZ
+ title: Algeria
+ option5:
+ value: 5
+ alt: AS
+ title: American Samoa
+ option6:
+ value: 6
+ alt: AD
+ title: Andorra
+ option7:
+ value: 7
+ alt: AO
+ title: Angola
+ option8:
+ value: 8
+ alt: AI
+ title: Anguilla
+ option9:
+ value: 8
+ alt: AQ
+ title: Antarctica
+ option10:
+ value: 10
+ alt: AG
+ title: Antigua And Barbuda
+ option11:
+ value: 11
+ alt: AR
+ title: Argentina
+ option12:
+ value: 12
+ alt: AM
+ title: Armenia
+ option13:
+ value: 13
+ alt: AW
+ title: Aruba
+ option14:
+ value: 14
+ alt: AU
+ title: Australia
+ option15:
+ value: 15
+ alt: AT Österreich Osterreich Oesterreich
+ title: Austria
+ option16:
+ value: 16
+ alt: AZ
+ title: Azerbaijan
+ option17:
+ value: 17
+ alt: BS
+ title: Bahamas
+ option18:
+ value: 18
+ alt: BH
+ title: Bahrain
+ option19:
+ value: 19
+ alt: BD
+ title: Bangladesh
+ option20:
+ value: 20
+ alt: BB
+ title: Barbados
+ option21:
+ value: 21
+ alt: BY
+ title: Belarus
+ option22:
+ value: 22
+ alt: BE België Belgie Belgien Belgique
+ title: Belgium
+ option23:
+ value: 23
+ alt: BZ
+ title: Belize
+ option24:
+ value: 24
+ alt: BJ
+ title: Benin
+ option25:
+ value: 25
+ alt: BM
+ title: Bermuda
+ option26:
+ value: 26
+ alt: BT
+ title: Bhutan
+ option27:
+ value: 27
+ alt: BO
+ title: Bolivia
+ option28:
+ value: 28
+ alt: BQ
+ title: Bonaire, Sint Eustatius and Saba
+ option29:
+ value: 29
+ alt: BA
+ title: Bosnia and Herzegovina
+ option30:
+ value: 30
+ alt: BW
+ title: Botswana
+ option31:
+ value: 31
+ alt: BV
+ title: Bouvet Island
+ option32:
+ value: 32
+ alt: BR Brasil
+ title: Brazil
+ option33:
+ value: 33
+ alt: IO
+ title: British Indian Ocean Territory
+ option34:
+ value: 34
+ alt: BN
+ title: Brunei Darussalam
+ option35:
+ value: 35
+ alt: BG
+ title: Bulgaria
+ option36:
+ value: 36
+ alt: BF
+ title: Burkina Faso
+ option37:
+ value: 37
+ alt: BI
+ title: Burundi
+ option38:
+ value: 38
+ alt: KH
+ title: Cambodia
+ option39:
+ value: 39
+ alt: CM
+ title: Cameroon
+ option40:
+ value: 40
+ alt: CA
+ title: Canada
+ option41:
+ value: 41
+ alt: CV
+ title: Cape Verde
+ option42:
+ value: 42
+ alt: KY
+ title: Cayman Islands
+ option43:
+ value: 43
+ alt: CF
+ title: Central African Republic
+ option44:
+ value: 44
+ alt: TD
+ title: Chad
+ option45:
+ value: 45
+ alt: CL
+ title: Chile
+ option46:
+ value: 46
+ alt: CN Zhongguo Zhonghua Peoples Republic
+ title: China
+ option47:
+ value: 47
+ alt: CX
+ title: Christmas Island
+ option48:
+ value: 48
+ alt: CC
+ title: Cocos (Keeling) Islands
+ option49:
+ value: 49
+ alt: CO
+ title: Colombia
+ option50:
+ value: 50
+ alt: KM
+ title: Comoros
+ option51:
+ value: 51
+ alt: CG
+ title: Congo
+ option52:
+ value: 52
+ alt: CD
+ title: Congo, the Democratic Republic of the
+ option53:
+ value: 53
+ alt: CK
+ title: Cook Islands
+ option54:
+ value: 54
+ alt: CR
+ title: Costa Rica
+ option55:
+ value: 55
+ alt: CI Cote dIvoire
+ title: Côte d'Ivoire
+ option56:
+ value: x1Croatia
+ alt: HR Hrvatska
+ title: Croatia
+ option57:
+ value: x1Cuba
+ alt: CU
+ title: Cuba
+ option58:
+ value: x1Curaçao
+ alt: CW Curacao
+ title: Curaçao
+ option59:
+ value: x1Cyprus
+ alt: CY
+ title: Cyprus
+ option60:
+ value: x1Czech Republic
+ alt: CZ Česká Ceska
+ title: Czech Republic
+ option61:
+ value: x1Denmark
+ alt: DK Danmark
+ title: Denmark
+ option62:
+ value: x1Djibouti
+ alt: DJ
+ title: Djibouti
+ option63:
+ value: x1Dominica
+ alt: DM
+ title: Dominica
+ option64:
+ value: x1Dominican Republic
+ alt: DO
+ title: Dominican Republic
+ option65:
+ value: x1Ecuador
+ alt: EC
+ title: Ecuador
+ option66:
+ value: x1Egypt
+ alt: EG
+ title: Egypt
+ option67:
+ value: x1El Salvador
+ alt: SV
+ title: El Salvador
+ option68:
+ value: x1Equatorial Guinea
+ alt: GQ
+ title: Equatorial Guinea
+ option69:
+ value: x1Eritrea
+ alt: ER
+ title: Eritrea
+ option70:
+ value: x1Estonia
+ alt: EE Eesti
+ title: Estonia
+ option71:
+ value: x1Ethiopia
+ alt: ET
+ title: Ethiopia
+ option72:
+ value: x1Falkland Islands (Malvinas)
+ alt: FK
+ title: Falkland Islands (Malvinas)
+ option73:
+ value: x1Faroe Islands
+ alt: FO Føroyar Færøerne
+ title: Faroe Islands
+ option74:
+ value: x1Fiji
+ alt: FJ
+ title: Fiji
+ option75:
+ value: x1Finland
+ alt: FI Suomi
+ title: Finland
+ option76:
+ value: x1France
+ alt: FR République française
+ title: France
+ option77:
+ value: x1French Guiana
+ alt: GF
+ title: French Guiana
+ option78:
+ value: x1French Polynesia
+ alt: PF
+ title: French Polynesia
+ option79:
+ value: x1French Southern Territories
+ alt: TF
+ title: French Southern Territories
+ option80:
+ value: x1Gabon
+ alt: GA
+ title: Gabon
+ option81:
+ value: x1Gambia
+ alt: GM
+ title: Gambia
+ option82:
+ value: x1Georgia
+ alt: GE
+ title: Georgia
+ option83:
+ value: x1Germany
+ alt: DE Bundesrepublik Deutschland
+ title: Germany
+ option84:
+ value: x1Ghana
+ alt: GH
+ title: Ghana
+ option85:
+ value: x1Gibraltar
+ alt: GI
+ title: Gibraltar
+ option86:
+ value: x1Greece
+ alt: GR
+ title: Greece
+ option87:
+ value: x1Greenland
+ alt: GL grønland
+ title: Greenland
+ option88:
+ value: x1Grenada
+ alt: GD
+ title: Grenada
+ option89:
+ value: x1Guadeloupe
+ alt: GP
+ title: Guadeloupe
+ option90:
+ value: x1Guam
+ alt: GU
+ title: Guam
+ option91:
+ value: x1Guatemala
+ alt: GT
+ title: Guatemala
+ option92:
+ value: x1Guernsey
+ alt: GG
+ title: Guernsey
+ option93:
+ value: x1Guinea
+ alt: GN
+ title: Guinea
+ option94:
+ value: x1Guinea-Bissau
+ alt: GW
+ title: Guinea-Bissau
+ option95:
+ value: x1Guyana
+ alt: GY
+ title: Guyana
+ option96:
+ value: x1Haiti
+ alt: HT
+ title: Haiti
+ option97:
+ value: x1Heard Island and McDonald Islands
+ alt: HM
+ title: Heard Island and McDonald Islands
+ option98:
+ value: x1Holy See (Vatican City State)
+ alt: VA
+ title: Holy See (Vatican City State)
+ option99:
+ value: x1Honduras
+ alt: HN
+ title: Honduras
+ option100:
+ value: x1Hong Kong
+ alt: HK
+ title: Hong Kong
+ option101:
+ value: x1Hungary
+ alt: HU
+ title: Hungary
+ option102:
+ value: x1Iceland
+ alt: IS Island
+ title: Iceland
+ option103:
+ value: x1India
+ alt: IN
+ title: India
+ option104:
+ value: x1Indonesia
+ alt: ID
+ title: Indonesia
+ option105:
+ value: x1Iran, Islamic Republic of
+ alt: IR
+ title: Iran, Islamic Republic of
+ option106:
+ value: x1Iraq
+ alt: IQ
+ title: Iraq
+ option107:
+ value: x1Ireland
+ alt: IE Éire
+ title: Ireland
+ option108:
+ value: x1Isle of Man
+ alt: IM
+ title: Isle of Man
+ option109:
+ value: x1Israel
+ alt: IL
+ title: Israel
+ option110:
+ value: x1Italy
+ alt: IT Italia
+ title: Italy
+ option111:
+ value: x1Jamaica
+ alt: JM
+ title: Jamaica
+ option112:
+ value: x1Japan
+ alt: JP Nippon Nihon
+ title: Japan
+ option113:
+ value: x1Jersey
+ alt: JE
+ title: Jersey
+ option114:
+ value: x1Jordan
+ alt: JO
+ title: Jordan
+ option115:
+ value: x1Kazakhstan
+ alt: KZ
+ title: Kazakhstan
+ option116:
+ value: x1Kenya
+ alt: KE
+ title: Kenya
+ option117:
+ value: x1Kiribati
+ alt: KI
+ title: Kiribati
+ option118:
+ value: x1Korea, Democratic People's Republic of
+ alt: KP North Korea
+ title: Korea, Democratic People's Republic of
+ option119:
+ value: x1Korea, Republic of
+ alt: KR South Korea
+ title: Korea, Republic of
+ option120:
+ value: x1Kuwait
+ alt: KW
+ title: Kuwait
+ option121:
+ value: x1Kyrgyzstan
+ alt: KG
+ title: Kyrgyzstan
+ option122:
+ value: x1Lao People's Democratic Republic
+ alt: LA
+ title: Lao People's Democratic Republic
+ option123:
+ value: x1Latvia
+ alt: LV
+ title: Latvia
+ option124:
+ value: x1Lebanon
+ alt: LB
+ title: Lebanon
+ option125:
+ value: x1Lesotho
+ alt: LS
+ title: Lesotho
+ option126:
+ value: x1Liberia
+ alt: LR
+ title: Liberia
+ option127:
+ value: x1Libyan Arab Jamahiriya
+ alt: LY
+ title: Libyan Arab Jamahiriya
+ option128:
+ value: x1Liechtenstein
+ alt: LI
+ title: Liechtenstein
+ option129:
+ value: x1Lithuania
+ alt: LT
+ title: Lithuania
+ option130:
+ value: x1Luxembourg
+ alt: LU
+ title: Luxembourg
+ option131:
+ value: x1Macao
+ alt: MO
+ title: Macao
+ option132:
+ value: x1Madagascar
+ alt: MG
+ title: Madagascar
+ option133:
+ value: x1Malawi
+ alt: MW
+ title: Malawi
+ option134:
+ value: x1Malaysia
+ alt: MY
+ title: Malaysia
+ option135:
+ value: x1Maldives
+ alt: MV
+ title: Maldives
+ option136:
+ value: x1Mali
+ alt: ML
+ title: Mali
+ option137:
+ value: x1Malta
+ alt: MT
+ title: Malta
+ option138:
+ value: x1Marshall Islands
+ alt: MH
+ title: Marshall Islands
+ option139:
+ value: x1Martinique
+ alt: MQ
+ title: Martinique
+ option140:
+ value: x1Mauritania
+ alt: MR
+ title: Mauritania
+ option141:
+ value: x1Mauritius
+ alt: MU
+ title: Mauritius
+ option142:
+ value: x1Mayotte
+ alt: YT
+ title: Mayotte
+ option143:
+ value: x1Mexico
+ alt: MX Mexicanos
+ title: Mexico
+ option144:
+ value: x1Micronesia, Federated States of
+ alt: FM
+ title: Micronesia, Federated States of
+ option145:
+ value: x1Moldova, Republic of
+ alt: MD
+ title: Moldova, Republic of
+ option146:
+ value: x1Monaco
+ alt: MC
+ title: Monaco
+ option147:
+ value: x1Mongolia
+ alt: MN
+ title: Mongolia
+ option148:
+ value: x1Montenegro
+ alt: ME
+ title: Montenegro
+ option149:
+ value: x1Montserrat
+ alt: MS
+ title: Montserrat
+ option150:
+ value: x1Morocco
+ alt: MA
+ title: Morocco
+ option151:
+ value: x1Mozambique
+ alt: MZ
+ title: Mozambique
+ option152:
+ value: x1Myanmar
+ alt: MM
+ title: Myanmar
+ option153:
+ value: x1Namibia
+ alt: NA
+ title: Namibia
+ option154:
+ value: x1Nauru
+ alt: NR
+ title: Nauru
+ option155:
+ value: x1Nepal
+ alt: NP
+ title: Nepal
+ option156:
+ value: x1Netherlands
+ alt: NL Holland Nederland
+ title: Netherlands
+ option157:
+ value: x1New Caledonia
+ alt: NC
+ title: New Caledonia
+ option158:
+ value: x1New Zealand
+ alt: NZ
+ title: New Zealand
+ option159:
+ value: x1Nicaragua
+ alt: NI
+ title: Nicaragua
+ option160:
+ value: x1Niger
+ alt: NE
+ title: Niger
+ option161:
+ value: x1Nigeria
+ alt: NG
+ title: Nigeria
+ option162:
+ value: x1Niue
+ alt: NU
+ title: Niue
+ option163:
+ value: x1Norfolk Island
+ alt: NF
+ title: Norfolk Island
+ option164:
+ value: x1North Macedonia
+ alt: MK
+ title: North Macedonia
+ option165:
+ value: x1Northern Mariana Islands
+ alt: MP
+ title: Northern Mariana Islands
+ option166:
+ value: x1Norway
+ alt: NO Norge Noreg
+ title: Norway
+ option167:
+ value: x1Oman
+ alt: OM
+ title: Oman
+ option168:
+ value: x1Pakistan
+ alt: PK
+ title: Pakistan
+ option169:
+ value: x1Palau
+ alt: PW
+ title: Palau
+ option170:
+ value: x1Palestinian Territory, Occupied
+ alt: PS
+ title: Palestinian Territory, Occupied
+ option171:
+ value: x1Panama
+ alt: PA
+ title: Panama
+ option172:
+ value: x1Papua New Guinea
+ alt: PG
+ title: Papua New Guinea
+ option173:
+ value: x1Paraguay
+ alt: PY
+ title: Paraguay
+ option174:
+ value: x1Peru
+ alt: PE
+ title: Peru
+ option175:
+ value: x1Philippines
+ alt: PH
+ title: Philippines
+ option176:
+ value: x1Pitcairn
+ alt: PN
+ title: Pitcairn
+ option177:
+ value: x1Poland
+ alt: PL
+ title: Poland
+ option178:
+ value: x1Portugal
+ alt: PT
+ title: Portugal
+ option179:
+ value: x1Puerto Rico
+ alt: PR
+ title: Puerto Rico
+ option180:
+ value: x1Qatar
+ alt: QA
+ title: Qatar
+ option181:
+ value: x1Réunion
+ alt: RE Reunion
+ title: Réunion
+ option182:
+ value: x1Romania
+ alt: RO
+ title: Romania
+ option183:
+ value: x1Russian Federation
+ alt: RU Russia Rossiya
+ title: Russian Federation
+ option184:
+ value: x1Rwanda
+ alt: RW
+ title: Rwanda
+ option185:
+ value: x1Saint Barthélemy
+ alt: BL
+ title: Saint Barthélemy
+ option186:
+ value: x1Saint Helena
+ alt: SH
+ title: Saint Helena
+ option187:
+ value: x1Saint Kitts and Nevis
+ alt: KN
+ title: Saint Kitts and Nevis
+ option188:
+ value: x1Saint Lucia
+ alt: LC
+ title: Saint Lucia
+ option189:
+ value: x1Saint Martin (French Part)
+ alt: MF
+ title: Saint Martin (French Part)
+ option190:
+ value: x1Saint Pierre and Miquelon
+ alt: PM
+ title: Saint Pierre and Miquelon
+ option191:
+ value: x1Saint Vincent and the Grenadines
+ alt: VC
+ title: Saint Vincent and the Grenadines
+ option192:
+ value: x1Samoa
+ alt: WS
+ title: Samoa
+ option193:
+ value: x1San Marino
+ alt: SM
+ title: San Marino
+ option194:
+ value: x1Sao Tome and Principe
+ alt: ST
+ title: Sao Tome and Principe
+ option195:
+ value: x1Saudi Arabia
+ alt: SA
+ title: Saudi Arabia
+ option196:
+ value: x1Senegal
+ alt: SN
+ title: Senegal
+ option197:
+ value: x1Serbia
+ alt: RS
+ title: Serbia
+ option198:
+ value: x1Seychelles
+ alt: SC
+ title: Seychelles
+ option199:
+ value: x1Sierra Leone
+ alt: SL
+ title: Sierra Leone
+ option200:
+ value: x1Singapore
+ alt: SG
+ title: Singapore
+ option201:
+ value: x1Sint Maarten (Dutch Part)
+ alt: SX
+ title: Sint Maarten (Dutch Part)
+ option202:
+ value: x1Slovakia
+ alt: SK
+ title: Slovakia
+ option203:
+ value: x1Slovenia
+ alt: SI
+ title: Slovenia
+ option204:
+ value: x1Solomon Islands
+ alt: SB
+ title: Solomon Islands
+ option205:
+ value: x1Somalia
+ alt: SO
+ title: Somalia
+ option206:
+ value: x1South Africa
+ alt: ZA
+ title: South Africa
+ option207:
+ value: x1South Georgia and the South Sandwich Islands
+ alt: GS
+ title: South Georgia and the South Sandwich Islands
+ option208:
+ value: x1South Sudan
+ alt: SS
+ title: South Sudan
+ option209:
+ value: x1Spain
+ alt: ES España
+ title: Spain
+ option210:
+ value: x1Sri Lanka
+ alt: LK
+ title: Sri Lanka
+ option211:
+ value: x1Sudan
+ alt: SD
+ title: Sudan
+ option212:
+ value: x1Suriname
+ alt: SR
+ title: Suriname
+ option213:
+ value: x1Svalbard and Jan Mayen
+ alt: SJ
+ title: Svalbard and Jan Mayen
+ option214:
+ value: x1Swaziland
+ alt: SZ
+ title: Swaziland
+ option215:
+ value: x1Sweden
+ alt: SE Sverige
+ title: Sweden
+ option216:
+ value: x1Switzerland
+ alt: CH Swiss Confederation Schweiz Suisse Svizzera Svizra
+ title: Switzerland
+ option217:
+ value: x1Syrian Arab Republic
+ alt: SY Syria
+ title: Syrian Arab Republic
+ option218:
+ value: x1Taiwan, Province of China
+ alt: TW
+ title: Taiwan, Province of China
+ option219:
+ value: x1Tajikistan
+ alt: TJ
+ title: Tajikistan
+ option220:
+ value: x1Tanzania, United Republic of
+ alt: TZ
+ title: Tanzania, United Republic of
+ option221:
+ value: x1Thailand
+ alt: TH
+ title: Thailand
+ option222:
+ value: x1Timor-Leste
+ alt: TL
+ title: Timor-Leste
+ option223:
+ value: x1Togo
+ alt: TG
+ title: Togo
+ option224:
+ value: x1Tokelau
+ alt: TK
+ title: Tokelau
+ option225:
+ value: x1Tonga
+ alt: TO
+ title: Tonga
+ option226:
+ value: x1Trinidad and Tobago
+ alt: TT
+ title: Trinidad and Tobago
+ option227:
+ value: x1Tunisia
+ alt: TN
+ title: Tunisia
+ option228:
+ value: x1Turkey
+ alt: TR Türkiye Turkiye
+ title: Turkey
+ option229:
+ value: x1Turkmenistan
+ alt: TM
+ title: Turkmenistan
+ option230:
+ value: x1Turks and Caicos Islands
+ alt: TC
+ title: Turks and Caicos Islands
+ option231:
+ value: x1Tuvalu
+ alt: TV
+ title: Tuvalu
+ option232:
+ value: x1Uganda
+ alt: UG
+ title: Uganda
+ option233:
+ value: x1Ukraine
+ alt: UA Ukrayina
+ title: Ukraine
+ option234:
+ value: x1United Arab Emirates
+ alt: AE UAE Emirates
+ title: United Arab Emirates
+ option235:
+ value: x1United Kingdom
+ alt: GB Great Britain England UK Wales Scotland Northern Ireland
+ title: United Kingdom
+ option236:
+ value: x1United States
+ alt: US USA United States of America
+ title: United States
+ option237:
+ value: x1United States Minor Outlying Islands
+ alt: UM
+ title: United States Minor Outlying Islands
+ option238:
+ value: x1Uruguay
+ alt: UY
+ title: Uruguay
+ option239:
+ value: x1Uzbekistan
+ alt: UZ
+ title: Uzbekistan
+ option240:
+ value: x1Vanuatu
+ alt: VU
+ title: Vanuatu
+ option241:
+ value: x1Venezuela
+ alt: VE
+ title: Venezuela
+ option242:
+ value: x1Vietnam
+ alt: VN
+ title: Vietnam
+ option243:
+ value: x1Virgin Islands, British
+ alt: VG
+ title: Virgin Islands, British
+ option244:
+ value: x1Virgin Islands, U.S.
+ alt: VI
+ title: Virgin Islands, U.S.
+ option245:
+ value: x1Wallis and Futuna
+ alt: WF
+ title: Wallis and Futuna
+ option246:
+ value: x1Western Sahara
+ alt: EH
+ title: Western Sahara
+ option247:
+ value: x1Yemen
+ alt: YE
+ title: Yemen
+ option248:
+ value: x1Zambia
+ alt: ZM
+ title: Zambia
+ option249:
+ value: x1Zimbabwe
+ alt: ZW
+ title: Zimbabwe
+---
+A `select` can be enhanced into an accessible auto-complete via JavaScript. Amplify uses the [Accessible autocomplete](https://github.com/alphagov/accessible-autocomplete) NPM package, and there are a number of [example customisations](https://alphagov.github.io/accessible-autocomplete/examples/) which can be followed.
+
+Follow the default markup for a `select`, making sure to give it a unique ID which can be referenced in the JavaScript.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note the link to a specific JavaScript file for the auto-complete functionality.
\ No newline at end of file
diff --git a/web/amplify/eleventy/advanced-components/advanced-components.json b/web/amplify/eleventy/advanced-components/advanced-components.json
new file mode 100644
index 00000000..402dc996
--- /dev/null
+++ b/web/amplify/eleventy/advanced-components/advanced-components.json
@@ -0,0 +1,6 @@
+{
+ "layout": "page.njk",
+ "tags": "advanced-components",
+ "templateEngineOverride": "njk, md",
+ "subpage": true
+}
\ No newline at end of file
diff --git a/web/amplify/eleventy/advanced-components/cards.md b/web/amplify/eleventy/advanced-components/cards.md
new file mode 100644
index 00000000..11c2cc76
--- /dev/null
+++ b/web/amplify/eleventy/advanced-components/cards.md
@@ -0,0 +1,79 @@
+---
+title: Block link cards
+components:
+ blockLink:
+ type: core-components
+ name: cards
+ data:
+ sectionTitle: A block link card
+ boxType: no-border
+ heading: Cats and the internet
+ body:
Examining the popularity of cat-related media content online
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ blockLinkCTA:
+ type: core-components
+ name: cards
+ data:
+ sectionTitle: Block link card with call-to-action (CTA)
+ boxType: no-border
+ heading: Cats and the internet
+ body:
Examining the popularity of cat-related media content online
+ link:
+ url: javascript:;
+ type: button
+ text: Read more
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ blockLinkTags:
+ type: core-components
+ name: cards
+ data:
+ sectionTitle: A block link card with tag links
+ boxType: no-border
+ heading: Cats and the internet
+ body:
Examining the popularity of cat-related media content online
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ tags:
+ tag1:
+ link: https://www.studio24.net/work-sector/arts-and-culture/
+ title: Arts and culture
+ tag2:
+ link: https://www.studio24.net/work-sector/education/
+ title: Education
+ tag3:
+ link: https://www.studio24.net/work-sector/charity-and-not-for-profit/
+ title: Charity and not-for-profit
+---
+Cards are used in multiple places. Although the visual appearance may vary, they share two general patterns:
+
+1. [Simple cards](https://amplify.studio24.net/amplify/core-components/cards.html) with a distinct link that can be selected
+2. Block link cards (covered here) where JavaScript is used to make the entire surface area act as a link
+
+For both types of card, it is important to check that the heading level used fits in with the card's location in the page content hierarchy.
+
+A simple card is enhanced into a block link card by adding the data attribute `data-component="card"`. When this is present, [JavaScript will make the whole card act as a block link](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/).
+
+Do not wrap the contents of a card inside a singular `a` element. This can result in a very verbose experience for screen reader users where the entire contents of the card are announced.
+
+For arranging groups of cards you can use the [switcher layout helper](https://amplify.studio24.net/amplify/layout-helpers/switcher.html) or [shelves component](https://amplify.studio24.net/amplify/core-components/shelves.html) depending on your requirements.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Block links work because the JavaScript looks for a link with the class `card__link`. We add this link to the `card__heading` text, to make sure that the link text is descriptive. If the design calls for a visually distinctive CTA, use a simple `div` to hold the text content and `aria-hidden` to hide it from assistive technology.
+
+The preceding example shows that it is possible for a block link card to have one link as the main link while also allowing other specific links (in this case a [list of tags](https://amplify.studio24.net/amplify/core-components/tag-list.html)) to different destinations. JavaScript targets the link with the class `card__link` and identifies this as the main link for the card.
+
+### Neat cards
+
+If the design calls for a row of cards of equal height, irrespective of the amount of text content, you can add the `card--neat` modifier class to the cards. This forces the card to take up 100% of the height of the parent container. It will also push the last child element in the text region to the bottom edge. You can see this in action on the [Amplify home page](https://amplify.studio24.net/amplify/index.html).
\ No newline at end of file
diff --git a/web/amplify/eleventy/advanced-components/collapsibles.md b/web/amplify/eleventy/advanced-components/collapsibles.md
new file mode 100644
index 00000000..323208f8
--- /dev/null
+++ b/web/amplify/eleventy/advanced-components/collapsibles.md
@@ -0,0 +1,33 @@
+---
+title: Collapsible containers
+components:
+ collapsibles:
+ type: advanced-components
+ name: collapsibles
+ data:
+ panels:
+ panel1:
+ title: Panel 1 heading
+ body:
This is a paragraph of text.
Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.
Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.
+ panel3:
+ title: Panel 3 heading
+ body:
This is a paragraph of text.
Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.
+ panel4:
+ title: Panel 4 heading
+ body:
This is a paragraph of text.
Here is another paragraph of text that intentionally contains a lot more words inside it in order to fill the width of the page successfully to check layout and so forth.
+---
+This is a series of containers, each holding a heading and some content. JavaScript enhances the markup, collapsing all containers and inserting buttons inside the headings to toggle them open/closed. The JavaScript looks for the presence of the data attribute `data-component="collapsibles"` on the outer container and `data-heading="collapsibles"` on the headings.
+
+The component takes inspiration from the [GOV.UK Design System accordion component](https://design-system.service.gov.uk/components/accordion/).
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+[Buttons shouldn't use the pointer cursor](https://adamsilver.io/articles/buttons-shouldnt-have-a-hand-cursor/), so we need to ensure the buttons have sufficient affordance by other visual means. The icon and show/hide help text help to achieve this, but we can also make use of background-color, border and/or box-shadow styles.
+
+Aligning the button content to the leading edge reduces the risk of it being missed by people using screen magnification software.
\ No newline at end of file
diff --git a/web/amplify/eleventy/advanced-components/disclosure-widget.md b/web/amplify/eleventy/advanced-components/disclosure-widget.md
new file mode 100644
index 00000000..c98a4756
--- /dev/null
+++ b/web/amplify/eleventy/advanced-components/disclosure-widget.md
@@ -0,0 +1,23 @@
+---
+title: Disclosure widget
+components:
+ disclosure:
+ type: advanced-components
+ name: disclosure
+ data:
+ hiddenContent:
This text should be hidden if JavaScript is available and the preceding button has the data-toggle="true" attribute.
+---
+A simple control whose sole purpose is to hide or show content, this component is inspired by Adrian Roselli's post about [disclosure widgets](https://adrianroselli.com/2020/05/disclosure-widgets.html).
+
+The basic principles demonstrated here can be expanded upon and applied to e.g. off-canvas navigation and [dropdown](https://adrianroselli.com/2019/06/link-disclosure-widget-navigation.html) [site navigation](https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/).
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note that the text content of the button - which gives it an accessible name - does not change. Instead, the state of the button is announced via the `aria-expanded` attribute, which is added via JavaScript. The conventional wisdom is to not change the name of a control while the user is interacting with it - and changing both the name and the state could result in confusing announcements for assistive technology users. You can read more about this in Sarah Higley's post: [Playing with state](https://sarahmhigley.com/writing/playing-with-state/).
+
+Note that we are not using `aria-hidden` on the hidden element. We don't need to, because the element to be hidden directly follows the button to toggle its display in the markup, meaning that we can use the [next-sibling combinator](https://www.w3.org/TR/selectors-3/#adjacent-sibling-combinators) in the CSS to determine whether the content is hidden based on the value of the `aria-expanded` property on the preceding element. Remember, the number one rule for using ARIA in HTML, is to [avoid using ARIA in HTML](https://bitsofco.de/rules-for-using-aria-in-html/).
+
+This approach also helps to ensure a logical reading and focus order for users.
\ No newline at end of file
diff --git a/web/amplify/eleventy/advanced-components/tabs.md b/web/amplify/eleventy/advanced-components/tabs.md
new file mode 100644
index 00000000..ace5d1d5
--- /dev/null
+++ b/web/amplify/eleventy/advanced-components/tabs.md
@@ -0,0 +1,33 @@
+---
+title: Tabbed sections
+components:
+ tabbedSections:
+ type: advanced-components
+ name: tabs
+ data:
+ tabs:
+ grumpyCat:
+ id: grumpy-cat
+ default: true
+ title: Grumpy Cat
+ body:
Grumpy Cat was a notable Internet cat, known and nicknamed for her permanently grumpy facial features.
+ lilBub:
+ id: lil-bub
+ title: Lil Bub
+ body:
Lil Bub was an American celebrity cat known for her unique physical appearance. Born the runt of the litter and with several genetic mutations, she had to be bottle-fed.
+ maru:
+ id: maru
+ title: Grumpy Cat
+ body:
Maru is a popular YouTube cat. He previously held the Guiness World Record for the most YouTube video views of an individual animal.
+
+---
+We use the [Tabby](https://github.com/cferdinandi/tabby) NPM package to generate tabbed content sections (not because it sounds like a type of cat). It progressively enhances a linked list of content into tabbed navigation.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+The default implementation uses `overflow-x: auto;` on the list of tabs, so that if the width of the tablist is greater than the container/viewport width they will scroll horizontally. This is the same principle that Brad Taunt suggests in his post about [replacing hamburger menus with sausage links](https://tdarb.org/hamburger-menu-alternative/).
+
+In the absence of a visible scrollbar, you will need to make sure that there are sufficient visual cues to users that content has been cut off and can be scrolled. You could [use linear gradients to help add visual affordance of scrolling](https://bbc.github.io/gel/components/data-tables/#indicating-scroll-functionality-visually), or else you might choose to add further scripting to detect when the element is scrolled all the way to either side, and add start or end classes for styling.
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components.md b/web/amplify/eleventy/core-components.md
new file mode 100644
index 00000000..96485832
--- /dev/null
+++ b/web/amplify/eleventy/core-components.md
@@ -0,0 +1,9 @@
+---
+title: Core components
+navItem: true
+root: true
+navOrder: 4
+---
+Examples of commonly required components, the building blocks of web pages.
+
+The [core components](https://github.com/studio24/amplify/blob/main/docs/css.md#css-architecture) directory handles the minimum required styles for all components, including the initial styles for more advanced components when JavaScript is not available. They are compiled into `core.css`, which is served to all browsers (along with `print.css`).
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/avatars.md b/web/amplify/eleventy/core-components/avatars.md
new file mode 100644
index 00000000..fbb9725b
--- /dev/null
+++ b/web/amplify/eleventy/core-components/avatars.md
@@ -0,0 +1,23 @@
+---
+title: Avatars
+components:
+ avatar:
+ type: core-components
+ name: avatar
+ data:
+ image:
+ url: https://www.w3.org/2006/05/u/1682ihk1hqqo-sm.jpg
+---
+Wrap a square or portrait image inside a `div` or `span` with the class `avatar` to apply a circular mask to the image.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note the empty `alt` attribute in this example. Images must always have an `alt` attribute - leaving it empty shows that it is a decorative image.
+
+The default size of an avatar is equivalent to 100px wide and tall (the CSS converts the pixel value into rem units.) Additional modifier classes can be added for smaller avatars:
+
+- `avatar--med` for an avatar equivalent to 50px wide and tall
+- `avatar--small` for an avatar equivalent to 30px wide and tall
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/breadcrumbs.md b/web/amplify/eleventy/core-components/breadcrumbs.md
new file mode 100644
index 00000000..deb16ec7
--- /dev/null
+++ b/web/amplify/eleventy/core-components/breadcrumbs.md
@@ -0,0 +1,31 @@
+---
+title: Breadcrumbs
+components:
+ breadcrumbs:
+ type: core-components
+ name: breadcrumbs
+ data:
+ items:
+ page1:
+ link: javascript:;
+ text: Home
+ page2:
+ link: javascript:;
+ text: Second Page
+ page3:
+ link: javascript:;
+ text: This Page
+---
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note the use of the [center layout helper](https://amplify.studio24.net/amplify/layout-helpers/center.html) and [cluster layout helper](https://amplify.studio24.net/amplify/layout-helpers/cluster.html).
+
+Note how the breadcrumb links meet the requirements of [WCAG Success Criterion 2.5.5: Target Size (AAA)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html).
+
+The `aria-label` attribute has been added to the `nav` element. This is because the main website navigation also uses the `nav` element. Where there are multiple`nav` elements on a single page, all must be given a unique accessible name via `aria-label`.
+
+The current page is indicated by `aria-current="page"`. Following Scott O'Hara's [accessible breadcrumb pattern](https://scottaohara.github.io/a11y_breadcrumbs/) it is fully linked so that users of Assistive Technology can find which is the currently active link.
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/core-components.json b/web/amplify/eleventy/core-components/core-components.json
new file mode 100644
index 00000000..646f9cff
--- /dev/null
+++ b/web/amplify/eleventy/core-components/core-components.json
@@ -0,0 +1,6 @@
+{
+ "layout": "page.njk",
+ "tags": "core-components",
+ "templateEngineOverride": "njk, md",
+ "subpage": true
+}
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/image-component.md b/web/amplify/eleventy/core-components/image-component.md
new file mode 100644
index 00000000..411cbb1c
--- /dev/null
+++ b/web/amplify/eleventy/core-components/image-component.md
@@ -0,0 +1,23 @@
+---
+title: Image Component
+components:
+ image:
+ type: core-components
+ name: image-component
+ data:
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ aspectRatio: "16:9"
+ caption:
The figcaption is not a replacement for the image's alt attribute. It should be used for providing relevant supporting content.
+---
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note the use of the [frame layout](https://amplify.studio24.net/amplify/layout-helpers/frame.html), to create the desired aspect ratio, and the `loading="lazy"` attribute on `img` for native lazy-loading.
+
+### Alternative text
+
+Every instance of `img` [must include the `alt` attribute](https://amplify.studio24.net/amplify/fundamentals/images.html). This [alt decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) is helpful for determining whether and how to provide alternative text.
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/main.md b/web/amplify/eleventy/core-components/main.md
new file mode 100644
index 00000000..6df5f879
--- /dev/null
+++ b/web/amplify/eleventy/core-components/main.md
@@ -0,0 +1,8 @@
+---
+title: Main
+---
+A few notes on `main`, which contains the main contents of a web page.
+
+- There should only be a single instance of `main` that does not have the `hidden` attribute applied to it.
+- In Amplify, `main` uses the same principles as the [center layout helper](https://amplify.studio24.net/amplify/layout-helpers/center.html) to add some minimum space between its contents and the edges of the parent element or viewport. Inspect this page in your web browser to see it in action.
+- Although it has a set maximum width, the utility class `u-full-width` can be applied to a child item of `main` to make it extend full width beyond the borders of `main`.
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/notes.md b/web/amplify/eleventy/core-components/notes.md
new file mode 100644
index 00000000..bf3af9ca
--- /dev/null
+++ b/web/amplify/eleventy/core-components/notes.md
@@ -0,0 +1,44 @@
+---
+title: Notes
+components:
+ infoNote:
+ type: core-components
+ name: notes
+ data:
+ type: info
+ title: Informative note heading
+ message:
Group calendering is currently in beta-test. We encourage everyone to use it and report feedback and issues to its dedicated GitHub repository
+---
+Notes can be used for simple informational messages, and for success, warning and error alerts. They are an enhancement of the [default box layout](https://amplify.studio24.net/amplify/layout-helpers/box.md#default-box).
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note the use of `role="status"` and `role="alert"`. Both create an ARIA live region.
+
+If the content of the note is advisory information not important enough to justify an alert, use `role="status"`. When added to an element, the browser will send out an accessible status event to assistive technologies, which can then notify the user about it.
+
+For error messages, use `role="alert"`. The alert role should read out content that has changed, or bring the user's attention to it immediately, so it should not be used for static content or used regularly. Alerts, by definition, are disruptive. Lots of alerts at once or unnecessary alerts will create a bad user experience.
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/pagination.md b/web/amplify/eleventy/core-components/pagination.md
new file mode 100644
index 00000000..586cb92b
--- /dev/null
+++ b/web/amplify/eleventy/core-components/pagination.md
@@ -0,0 +1,34 @@
+---
+title: Pagination
+---
+
+
+
+Considerations
+--------------
+
+Note the use of the [cluster layout helper](https://amplify.studio24.net/amplify/layout-helpers/cluster.html).
+
+Note how the pagination links meet the requirements of [WCAG Success Criterion 2.5.5: Target Size (AAA)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html).
+
+The `aria-label` attribute has been added to the `nav` element. This is because the main website navigation also uses the `nav` element. Where there are multiple`nav` elements on a single page, all must be given a unique accessible name via `aria-label`.
+
+For all pagination links excluding the current page, `span class="visuallyhidden">pageExamining the popularity of cat-related media content online
+ link:
+ url: javascript:;
+ type: button
+ text: Read more
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ card2:
+ boxType: no-border
+ heading: Cats and the internet
+ body:
Examining the popularity of cat-related media content online
+ link:
+ url: javascript:;
+ type: button
+ text: Read more
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ card3:
+ boxType: no-border
+ heading: Cats and the internet
+ body:
Examining the popularity of cat-related media content online
+ link:
+ url: javascript:;
+ type: button
+ text: Read more
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ card4:
+ boxType: no-border
+ heading: Cats and the internet
+ body:
Examining the popularity of cat-related media content online
+ link:
+ url: javascript:;
+ type: button
+ text: Read more
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ card5:
+ boxType: no-border
+ heading: Cats and the internet
+ body:
Examining the popularity of cat-related media content online
+ link:
+ url: javascript:;
+ type: button
+ text: Read more
+ image:
+ frameType: 3-2
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+
+---
+Shelves provide a flexbox framework for arranging groups of items such as [cards](https://amplify.studio24.net/amplify/core-components/cards.html). You might choose to use shelves instead of the [switcher layout helper](https://amplify.studio24.net/amplify/layout-helpers/switcher.html) if:
+
+- you want to specify the number of items on each shelf in relation to the viewport width rather than the width of the parent container
+- you want to change how many items can fit on a shelf depending on the total number of items, using [CSS quantity queries](https://alistapart.com/article/quantity-queries-for-css/) - use [Quantity Queries Builder](https://quantityqueries.com/) to roll your own quantity queries
+- items don't have to follow a rigid grid pattern and can grow horizontally to fill up the space on a shelf when there are fewer than the maximum possible (much like a cat taking up all the available space)
+
+Heading for the shelves component
+---------------------------------
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+The example above uses an unordered list to hold the cards. Because the [cards](https://amplify.studio24.net/amplify/core-components/cards.html) pattern uses headings that fit in with the surrounding page hierarchy, `role="presentaton"` is added to the unordered list to reduce the verbosity of announcements for assitive technology users.
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/simple-cards.md b/web/amplify/eleventy/core-components/simple-cards.md
new file mode 100644
index 00000000..850c4705
--- /dev/null
+++ b/web/amplify/eleventy/core-components/simple-cards.md
@@ -0,0 +1,48 @@
+---
+title: Simple cards
+components:
+ card:
+ type: core-components
+ name: cards
+ data:
+ heading: Cats and the internet
+ body: Examining the popularity of cat-related media content online
+ boxType: no-border
+ link:
+ url: https://en.wikipedia.org/wiki/Cats_and_the_Internet
+ text: Read more
+ image:
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ inFrame: true
+ aspectRatio: "3:2"
+
+---
+Cards are used in multiple places. Although the visual appearance may vary, they share two general patterns:
+
+1. Simple cards (covered here) with a distinct link that can be selected
+2. [Block link cards](https://amplify.studio24.net/amplify/advanced-components/cards.html), where JavaScript is used to make the entire surface area act as a link
+
+For both types of card, it is important to check that the heading level used fits in with the card's location in the page content hierarchy.
+
+For arranging groups of cards you can use the [switcher layout helper](https://amplify.studio24.net/amplify/layout-helpers/switcher.html) or [shelves component](https://amplify.studio24.net/amplify/core-components/shelves.html) depending on your requirements.
+
+A simple card
+-------------
+
+### Cats and the Internet
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note the use of the [frame layout helper](https://amplify.studio24.net/amplify/layout-helpers/frame.html) for the card image and the [box layout helper](https://amplify.studio24.net/amplify/layout-helpers/box.html) for the card text.
+
+In the markup, the card text is first in the source order to prioritise it over the image. Flexbox is used to place the image ahead of the card text visually, via the `order` property.
+
+Where generic link text is used visually, this is enhanced for Assistive Technology users with the `span class="visuallyhidden"` providing descriptive link text to meet [WCAG Success Criterion 2.4.9: Link Purpose (Link Only) (AAA)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only.html).
+
+### Neat cards
+
+If the design calls for a row of cards of equal height, irrespective of the amount of text content, you can add the `card--neat` modifier class to the cards. This forces the card to take up 100% of the height of the parent container. It will also push the last child element in the text region to the bottom edge. You can see this in action on the [Amplify home page](https://amplify.studio24.net/amplify/index.html).
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/sticky-footer.md b/web/amplify/eleventy/core-components/sticky-footer.md
new file mode 100644
index 00000000..9ae83c72
--- /dev/null
+++ b/web/amplify/eleventy/core-components/sticky-footer.md
@@ -0,0 +1,6 @@
+---
+title: Sticky footer
+---
+Amplify includes styles for a sticky footer, which you can see in action on this website wherever the page content is not long enough to push the footer beyond the bottom of the browser window.
+
+There are [many ways to achieve a sticky footer](https://css-tricks.com/couple-takes-sticky-footer/), but the approach favoured in Amplify is to [use CSS grid layout](https://css-tricks.com/couple-takes-sticky-footer/#aa-there-is-grid).
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/tag-list.md b/web/amplify/eleventy/core-components/tag-list.md
new file mode 100644
index 00000000..4394f871
--- /dev/null
+++ b/web/amplify/eleventy/core-components/tag-list.md
@@ -0,0 +1,32 @@
+---
+title: Tag list
+components:
+ tagList:
+ type: layout-helpers
+ name: cluster
+ data:
+ extraClasses: tag-list
+ itemClass: tag
+ items:
+ item1:
+ link: javascript:;
+ title: Arts and culture
+ item2:
+ link: javascript:;
+ title: Education
+ item3:
+ link: javascript:;
+ title: Charity and not-for-profit
+
+---
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Note the use of the [cluster layout helper](https://amplify.studio24.net/amplify/layout-helpers/cluster.html).
+
+Note how the linked tags meet the requirements of [WCAG Success Criterion 2.5.5: Target Size (AAA)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html).
+
+Note the inclusion of visually-hidden text in the linked tags, to provide detail for assistive technology users when browsing out of context, thereby meeting [WCAG Success Criterion 2.4.9: Link Purpose (Link Only) (AAA)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only.html).
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/text-component.md b/web/amplify/eleventy/core-components/text-component.md
new file mode 100644
index 00000000..30022e0d
--- /dev/null
+++ b/web/amplify/eleventy/core-components/text-component.md
@@ -0,0 +1,16 @@
+---
+title: Text component
+---
+The most commonly-used component for adding content to a page. Use for prose, [lists](https://amplify.studio24.net/amplify/styles/lists.html) and [tables](https://amplify.studio24.net/amplify/styles/tables.html). For quotations, use the [quote component](https://amplify.studio24.net/amplify/core-components/quote.html).
+
+Example text component
+----------------------
+
+Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
+
+Considerations
+--------------
+
+To help maintain the page heading hierarchy, `h1` is not made available within the text component as this has its own specific location within the page template.
+
+If you have prose split across multiple text components, with other components interspersed (e.g. the [image component](https://amplify.studio24.net/amplify/core-components/image-component.html)), be sure to check that no heading levels are accidentally skipped in the text components.
\ No newline at end of file
diff --git a/web/amplify/eleventy/core-components/video-component.md b/web/amplify/eleventy/core-components/video-component.md
new file mode 100644
index 00000000..6f9bcd71
--- /dev/null
+++ b/web/amplify/eleventy/core-components/video-component.md
@@ -0,0 +1,34 @@
+---
+title: Video component
+components:
+ video:
+ type: core-components
+ name: video
+ data:
+ iframe:
+ title: Why do cats act so weird?
+ width: "560"
+ height: "315"
+ src: https://embed.ted.com/talks/lang/en/tony_buffington_why_do_cats_act_so_weird
+ fullscreen: true
+ caption: "
They're cute, they're lovable, and judging by the 26 billion views on over 2 million YouTube videos of them, one thing is certain: cats are very entertaining. But their strange feline behaviours, both amusing and baffling, leave many of us asking: Why do cats do that? Tony Buffington explains the science behind some of your cat's strangest behaviours.
Video transcript"
+---
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+The `iframe` must always include a unique, descriptive `title` attribute to meet [WCAG Success Criterion 2.4.1: Bypass Blocks (A)](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html) and [WCAG Success Criterion 4.1.2: Name, Role, Value (A)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html).
+
+### Captions
+
+Prerecorded video must include captions to meet [WCAG Success Criterion 1.2.2: Captions (Prerecorded) (A)](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html).
+
+[More advice about audiovisual media captions](https://www.w3.org/WAI/media/av/captions/).
+
+### Transcripts
+
+Transcripts for prerecorded video are required to meet [WCAG Success Criterion 1.2.8: Media Alternative (Prerecorded) (AAA)](https://www.w3.org/WAI/WCAG21/Understanding/media-alternative-prerecorded.html).
+
+[More advice about audiovisual media transcripts.](https://www.w3.org/WAI/media/av/transcripts/)
\ No newline at end of file
diff --git a/web/amplify/eleventy/design.md b/web/amplify/eleventy/design.md
new file mode 100644
index 00000000..84b584f2
--- /dev/null
+++ b/web/amplify/eleventy/design.md
@@ -0,0 +1,91 @@
+---
+title: Design handover & standards
+navItem: true
+root: true
+navOrder: 6
+---
+Designers are responsible for handing their design files to developers for development, explaining the design intentions, and providing design support to the developer as they build the website.
+
+**Designers and developers need time to do this together**.
+
+Designs for web projects are created in Sketch or Figma. The design tool doesn't matter as long as the output is fit for use by the team.
+
+Design files must contain some baseline information to explain the design principles, and for consistency and quality.
+
+Design file requirements
+------------------------
+
+### Fundamentals
+
+**Fundamentals are the underlining design principles and materials. A set of design choices, instructions and calculations to govern the project.**
+
+A build-ready, project design file should include these Fundamentals:
+
+- Colours
+- Typography
+- Links and buttons
+- Lists
+- Icons --- size and alignment
+- Tables
+- `main` container --- breakpoints and width constraints
+
+If your project doesn't need a required Fundamental, like buttons or definition lists, note it in the design file.
+
+You can document additional design Fundamentals such as, shadows, blurs, overlays, avatars, images etc. --- as suits your project approach.
+
+### Components
+
+**Common UI parts and patterns.**
+
+Key project components, illustrated with spacing documentation for build, e.g. Navigation, Cards, Breadcrumbs, Collapsibles, etc.
+
+Depending on approach and budget.
+
+### Assets for export
+
+**All the exportable instances of project assets should be gathered on one page.**
+
+For example, header logo, UI icons, illustrations, social icons, etc.
+
+Assets should be the right size, grouped, exportable **or** the designer should directly export them and put into a folder for the developer and note it's location on the assets page.
+
+Dimensions should be 4px base.
+
+### Templates
+
+**The purposeful use of the design fundamentals and components.**
+
+Key page templates are chosen by the designer to illustrate.
+
+The designs should:
+
+- Use real or realistic content
+- Note accessibility considerations
+- Illustrate interactive states
+
+### Work status
+
+**Illustrate the status of your work, to help other team members understand progress, decisions and work they can undertake.**
+
+Mark templates and components with: in progress, review, develop, complete, etc.
+
+### Prototype the fundamentals
+
+**Use the [typography test page](https://amplify.studio24.net/amplify/design/typography-test.html) to see how things are working.**
+
+Our design fundamentals are validated and adjusted collaboratively through our two mediums: the design tool (Figma or Sketch) and the web browser.
+
+Implementing our project fundamentals immediately in the browser allows us to:
+
+- Check colour contrast on real screens
+- Test site wrappers, gutters and 'standard' grid layouts at different widths
+- Ensure the fluid typography feels harmonious, on various devices
+- Deploy something to staging right away, testing our build system in the process
+- Have productive and meaningful discussions between designer and developer
+
+* * * * *
+
+Resources
+---------
+
+- [Figma starter design file](https://www.figma.com/file/J9ufEdMGbDesKQ15MZWES6/S24-Design-Starter-Template)
\ No newline at end of file
diff --git a/web/amplify/eleventy/design/design.json b/web/amplify/eleventy/design/design.json
new file mode 100644
index 00000000..3c57df2d
--- /dev/null
+++ b/web/amplify/eleventy/design/design.json
@@ -0,0 +1,6 @@
+{
+ "layout": "page.njk",
+ "tags": "design",
+ "templateEngineOverride": "njk, md",
+ "subpage": true
+}
\ No newline at end of file
diff --git a/web/amplify/eleventy/design/typography-test.md b/web/amplify/eleventy/design/typography-test.md
new file mode 100644
index 00000000..ecd6de15
--- /dev/null
+++ b/web/amplify/eleventy/design/typography-test.md
@@ -0,0 +1,104 @@
+---
+title: Typography test
+components:
+ table:
+ type: fundamentals
+ name: table
+ data:
+ title: Example table
+ headings:
+ header1:
+ text: Column header 1
+ header2:
+ text: Column header 2
+ header3:
+ text: Column header 3
+ rows:
+ row1:
+ heading: Row 1 header
+ columns:
+ col1:
+ text: Row 1, Cell 2
+ col2:
+ text: Row 1, Cell 3
+ row2:
+ heading: Row 2 header
+ columns:
+ col1:
+ text: Row 2, Cell 2
+ col2:
+ text: Row 2, Cell 3
+---
+Use this test page to provide visual feedback of the state and flow of typographical styles.
+
+Heading 2
+---------
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+Horizontal rule
+---------------
+
+You can use horizontal rules, like the one below, to add emphasis to section breaks on a page. These lines should be used sparingly as headings should usually provide enough division between sections for the reader.
+
+* * * * *
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+Describing a paragraph H2
+-------------------------
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+### Describing a paragraph H3
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+> A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
+>
+> It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
+>
+> *Said no one, ever.*
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+#### Describing a paragraph H4
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+- First item in an unordered list
+- Second item in an unordered list
+ - First item in second level
+ - Second item in second level
+- Third item in an unordered list
+
+1. First item in an ordered list
+2. Second item in an ordered list
+ 1. First item in second level
+ 2. Second item in second level
+3. Third item in an ordered list
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+##### Describing a paragraph H5
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+###### Describing a paragraph H6
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+Example table
+{{ pageComponents(components) }}
+
+A [paragraph](https://en.wikipedia.org/wiki/Paragraph) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals.md b/web/amplify/eleventy/fundamentals.md
new file mode 100644
index 00000000..29973d36
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals.md
@@ -0,0 +1,29 @@
+---
+title: Fundamentals
+navItem: true
+root: true
+navOrder: 2
+---
+Covering the essential aspects of any website project, such as colours, typography, button and links, lists, spacing and print styles.
+
+Fundamentals are the underlining design principles and materials. A set of design choices, instructions and calculations to govern a project.
+
+Test your fundamentals
+----------------------
+
+A good first milestone is to complete your fundamental settings and review them on the [typography test page](https://amplify.studio24.net/amplify/design/typography-test.html) with the designer.
+
+Designer responsibility
+-----------------------
+
+A build-ready, project design file should include these Fundamentals:
+
+- Colours
+- Typography
+- Buttons and links
+- Lists
+- Icons --- size and alignment
+- Tables
+- `main` container --- breakpoints and width constraints
+
+Read more about [design handover & standards](https://amplify.studio24.net/amplify/design).
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals/breakpoints.md b/web/amplify/eleventy/fundamentals/breakpoints.md
new file mode 100644
index 00000000..ad33b41a
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals/breakpoints.md
@@ -0,0 +1,8 @@
+---
+title: Breakpoints
+---
+Sass variables corresponding to generic device viewport widths, which are used within media query mixins. These values can be updated and new variables added as required for your project's needs.
+
+The `$max-width` variable is used for limiting the maximum width of e.g. `main`.
+
+The `$text-measure` variable is designed to be used to limit the maximum line length of text content for improved readability.
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals/buttons.md b/web/amplify/eleventy/fundamentals/buttons.md
new file mode 100644
index 00000000..099e12b5
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals/buttons.md
@@ -0,0 +1,102 @@
+---
+title: Buttons and links
+components:
+ buttons:
+ button-normal:
+ type: 'fundamentals'
+ name: button
+ data:
+ text: Default button style
+ isExample: true
+ button-alt:
+ type: 'fundamentals'
+ name: button
+ data:
+ type: alt
+ text: Alternate button style
+ isExample: true
+ button-wide:
+ type: 'fundamentals'
+ name: button
+ data:
+ type: wide
+ text: Wide button style
+ isExample: true
+ button-wide-alt:
+ type: 'fundamentals'
+ name: button
+ data:
+ type: wide-alt
+ text: Wide button style
+ isExample: true
+ button-ghost:
+ type: 'fundamentals'
+ name: button
+ data:
+ type: ghost
+ text: Ghost button style
+ isExample: true
+ button-disabled:
+ type: 'fundamentals'
+ name: button
+ data:
+ text: This button is disabled
+ disabled: true
+ isExample: true
+ links:
+ link-normal:
+ type: 'fundamentals'
+ name: link
+ data:
+ type: normal
+ url: /
+ text: Simple text link
+ isExample: true
+ link-button:
+ type: 'fundamentals'
+ name: link
+ data:
+ type: button
+ url: /
+ text: Link styled as a button
+ isExample: true
+ link-button-alt:
+ type: 'fundamentals'
+ name: link
+ data:
+ type: button-alt
+ url: /
+ text: Link with alternate button style
+ isExample: true
+---
+Use a button to help a user carry out an action, such as playing audio/video, toggling a dropdown, opening a modal, etc. If you are navigating a user to a new resource, use a link.
+
+Buttons, and links styled as buttons, need to have sufficient padding to ensure they meet [WCAG Success Criterion 2.5.5: Target Size (AAA)](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html). This does not apply to links within sentences and paragraphs.
+
+Buttons
+-------
+{{ pageComponents(components.buttons) }}
+
+### Considerations
+
+Disabled buttons can confuse some people, so only use them if testing shows that they make the user interface easier to understand.
+
+Links
+-----
+
+Simple text link
+
+Link styled as a button
+
+Link with alternate button style
+
+### Considerations
+
+Simple text links are given an underline, in addition to any colour treatment, to meet [WCAG Success Criterion 1.4.1: Use of Color (A)](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)
+
+Grouping buttons and links
+--------------------------
+
+Buttons (and links styled as buttons) can be arranged in groups using the [cluster layout](https://amplify.studio24.net/amplify/layout-helpers/cluster.html):
+
+Primary action Secondary action
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals/colours.md b/web/amplify/eleventy/fundamentals/colours.md
new file mode 100644
index 00000000..b666a7d7
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals/colours.md
@@ -0,0 +1,30 @@
+---
+title: Colours
+---
+Colour contrast
+---------------
+
+Make sure that the contrast ratio of text and interactive elements on your site meets the requirements of **WCAG 2.1** as paraphrased in the following sections. The ideal contrast range to meet all requirements is 7:1 - 15:1. Higher contrast ratios can be triggering for some people.
+
+### 1.4.3 Contrast (Minimum) (AA)
+
+Text (including images of text) has a contrast ratio of at least **4.5:1 for 'regular' text** and at least **3:1 for large text** (at least `18pt` / `24px`, or bold and at least `14pt` / `18.5px`), unless the text is purely decorative.
+
+### 1.4.6 Contrast (Enhanced) (AAA)
+
+Text (including images of text) has a contrast ratio of at least **7:1 for 'regular' text** and at least **4.5:1 for large text** (at least `18pt` / `24px`, or bold and at least `14pt` / `18.5px`), unless the text is purely decorative.
+
+### 1.4.11 Non-text Contrast (AA)
+
+The visual presentation of UI components (their states - including focus indication - and boundaries) and graphical objects has a contrast ratio of at least 3:1 against adjacent colour(s).
+
+### Tools for checking colour contrast
+
+Choose whichever you prefer from the following list:
+
+- [Accessible Colors](https://accessible-colors.com/)
+- [Color Contrast Analyser Download](https://www.tpgi.com/cca-download/)
+- [Contrast Ratio](https://contrast-ratio.com/)
+- [Link Contrast Checker](https://webaim.org/resources/linkcontrastchecker/)
+- [Who Can Use](https://whocanuse.com/)
+- [Text on background image a11y check](https://www.brandwood.com/a11y/)
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals/details-summary.md b/web/amplify/eleventy/fundamentals/details-summary.md
new file mode 100644
index 00000000..3ad16f18
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals/details-summary.md
@@ -0,0 +1,19 @@
+---
+title: Details and summary
+components:
+ detailSummary:
+ type: fundamentals
+ name: details
+ data:
+ summary: This is the summary content
+ details: |
+
This is the detailed content which is revealed if a user requests to see it
+---
+The `details` element generates a simple no-JavaScript widget to show/hide content, optionally by selecting its child `summary` element. In non-supporting browsers such as IE11 all content is expanded by default.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+There is currently no way for `details` to be made to display all of its content by default when printed.
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals/flow-elements.md b/web/amplify/eleventy/fundamentals/flow-elements.md
new file mode 100644
index 00000000..f4d24987
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals/flow-elements.md
@@ -0,0 +1,37 @@
+---
+title: Flow elements
+---
+These are elements that are used in the body of documents and applications.
+
+This page provides examples of how Amplify does (or doesn't) style some of the more common flow elements that are not covered in more detail elsewhere.
+
+This paragraph contains a selection of HTML5 elements, such as *emphasis*, **strong**, and small. You can also use `keyboard text`, which sometimes is styled similarly to the `code` or `samp` elements. Even more specifically, there is an element just for *variables*. And let's not forget the sub (H~2~O) and sup (E = MC^2^) elements.
+
+`abbr`: Some vehicles meet the SULEV standard.\
+`br` was used to make this sentence start on a new line.
+
+`em` is used for *emphasis* and usually renders as italics, contrast that with `i` which is used for alternate voice or to offset from the normal (such as a phrase from a different language or taxonomic designation): *E. coli* can be bad. `strong` is used for **importance or urgency** and usually renders as bold, contrast that with `b` which is used to **draw attention** without the semantic meaning of importance.
+
+`cite`: In the words of *Charles Bukowski* --- An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.
+
+`q`: The W3C page *About W3C* says the W3C's mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.
+
+`sub` is used for subscripts: H~2~O. `sup` is used for superscripts: E = MC^2^.
+
+`small` is used for side comments: I wrote this whole document. [Editor's note: no they did not]
+
+`dfn`: Foreign phrases add a certain je ne sais quoi to one's prose.
+
+`time`: use for specifying 5 A.M. in a machine-readable format.
+
+`kbd` and `samp`: I did this:
+
+c:\>`format c: /yes`
+
+Is that bad? Press ``Ctrl``+``F5`` for a hard reload.
+
+`var`: To log in, type `ssh *user*@example.com`, where *user* is your user ID.
+
+`mark`: the HTML equivalent of the yellow highlighter.
+
+`meter` and `progress`: Storage space usage: 6 blocks used (out of 8 total) Progress:
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals/form-errors.md b/web/amplify/eleventy/fundamentals/form-errors.md
new file mode 100644
index 00000000..36c5b94f
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals/form-errors.md
@@ -0,0 +1,409 @@
+---
+title: Form error messages
+components:
+ errorNote:
+ note:
+ type: core-components
+ name: notes
+ data:
+ title: There is a problem
+ message: |
+
+ type: error
+ errorForms:
+ textErrors:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ name:
+ label: Name
+ name: name
+ required: true
+ error:
+ message: Enter a name
+ type: text
+ message:
+ label: Your message
+ name: message
+ type: textarea
+ error:
+ message: Enter a message
+ numbersErrors:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ accountNumber:
+ label: Account number
+ hint: Must be between 6 and 8 numbers long
+ name: account-number
+ type: text
+ class: input-width-10
+ maxlength: 8
+ inputmode: numeric
+ error:
+ message: Enter an account number
+ dateErrors:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ arrivalDate:
+ label: Date of arrival
+ hint: For example 30/05/2021
+ name: arrival-date
+ type: text
+ class: input-width-10
+ error:
+ message: Enter an arrival date
+ dateOfBirth:
+ label: Date of birth (an example of a memorable date)
+ hint: For example 20 07 1972
+ hintClass: u-no-margin-top
+ type: fieldset
+ itemWrapClass: memorable-date
+ error:
+ message: Enter a date of birth
+ fields:
+ day:
+ label: Day
+ name: bday-day
+ type: text
+ class: input-width-2
+ autocomplete: true
+ inputmode: numeric
+ minNum: 0
+ maxNum: 31
+ month:
+ label: Month
+ name: bday-month
+ type: text
+ class: input-width-2
+ autocomplete: true
+ inputmode: numeric
+ minNum: 1
+ maxNum: 12
+ year:
+ label: Year
+ name: bday-year
+ type: text
+ class: input-width-4
+ autocomplete: true
+ inputmode: numeric
+ minNum: 1900
+ maxNum: 2050
+ meetingTime:
+ label: Specify a start time for your meeting
+ hint: Use UTC and your local time
+ hintClass: u-no-margin-top
+ type: fieldset
+ itemWrapClass: memorable-date
+ isGroup: true
+ error:
+ message: Enter a start time
+ fields:
+ time:
+ label: Start Time
+ name: meeting-time
+ class: input-width-5
+ type: text
+ timeZone:
+ label: Time zone
+ name: timezone
+ type: select
+ options:
+ option1:
+ value: UTC-12:00
+ title: UTC-12:00
+ option2:
+ value: UTC-11:00
+ title: UTC-11:00
+ option3:
+ value: UTC-10:00
+ title: UTC-10:00
+ option4:
+ value: UTC-09:30
+ title: UTC-09:30
+ option5:
+ value: UTC-09:00
+ title: UTC-09:00
+ option6:
+ value: UTC-08:00
+ title: UTC-08:00
+ option7:
+ value: UTC-07:00
+ title: UTC-07:00
+ option8:
+ value: UTC-06:00
+ title: UTC-06:00
+ option9:
+ value: UTC-05:00
+ title: UTC-05:00
+ option10:
+ value: UTC-04:00
+ title: UTC-04:00
+ option11:
+ value: UTC-03:30
+ title: UTC-03:30
+ option12:
+ value: UTC-03:00
+ title: UTC-03:00
+ option13:
+ value: UTC-02:00
+ title: UTC-02:00
+ option14:
+ value: UTC-01:00
+ title: UTC-01:00
+ option15:
+ value: UTC-00:00
+ title: UTC-00:00
+ selected: true
+ option16:
+ value: UTC+01:00
+ title: UTC+01:00
+ option17:
+ value: UTC+02:00
+ title: UTC+02:00
+ option18:
+ value: UTC+03:00
+ title: UTC+03:00
+ option19:
+ value: UTC+03:30
+ title: UTC+03:30
+ option20:
+ value: UTC+04:00
+ title: UTC+04:00
+ option21:
+ value: UTC+04:30
+ title: UTC+04:30
+ option22:
+ value: UTC+05:00
+ title: UTC+05:00
+ option23:
+ value: UTC+05:30
+ title: UTC+05:30
+ option24:
+ value: UTC+05:45
+ title: UTC+05:45
+ option25:
+ value: UTC+06:00
+ title: UTC+06:00
+ option26:
+ value: UTC+07:00
+ title: UTC+07:00
+ option27:
+ value: UTC+08:00
+ title: UTC+08:00
+ option28:
+ value: UTC+08:45
+ title: UTC+08:45
+ option29:
+ value: UTC+09:30
+ title: UTC+09:30
+ option30:
+ value: UTC+10:00
+ title: UTC+10:00
+ option31:
+ value: UTC+10:30
+ title: UTC+10:30
+ option32:
+ value: UTC+11:00
+ title: UTC+11:00
+ option33:
+ value: UTC+12:00
+ title: UTC+12:00
+ option34:
+ value: UTC+12:45
+ title: UTC+12:45
+ option35:
+ value: UTC+13:00
+ title: UTC+13:00
+ option36:
+ value: UTC+14:00
+ title: UTC+14:00
+ otherErrors:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ file:
+ label: Choose a file
+ name: file
+ type: file
+ error:
+ message: The file must be 2MB or smaller
+ radios:
+ type: fieldset
+ label: Do you own any pets?
+ name: pets
+ error:
+ message: Select yes if you do own pets
+ fields:
+ yes:
+ label: Yes
+ name: pets_yes
+ type: radio
+ initialValue: yes
+ no:
+ label: No
+ name: pets_no
+ type: radio
+ initialValue: no
+ noComment:
+ label: Prefer not to say
+ name: pets_no-comment
+ type: radio
+ initialValue: no-comment
+ segments:
+ type: fieldset
+ label: Segmented options (Radio)
+ name: segmented-options
+ hint: We understand that different people enjoy books in differeny ways, which is why we're giving you lots of options.
+ isSegmentedGroup: true
+ error:
+ message: Choose an option
+ fields:
+ segment1:
+ name: segmented-option-1
+ class: input--radio
+ type: radio
+ segmentTitle: Budget option
+ segmentBody: Copy to explain this option in more detail
+ segment2:
+ name: segmented-option-2
+ class: input--radio
+ type: radio
+ checked: true
+ segmentTitle: Value option
+ segmentBody: Copy to explain this option in more detail
+ segment3:
+ name: segmented-option-3
+ class: input--radio
+ type: radio
+ segmentTitle: Expensive option
+ segmentBody: Copy to explain this option in more detail
+ checkboxes:
+ type: fieldset
+ label: Things you like
+ hint: Select all that apply
+ name: things-you-like
+ error:
+ message: Choose at least one item
+ fields:
+ chocolate:
+ label: Chocolate
+ name: chocolate
+ type: checkbox
+ appearance: base
+ coffee:
+ label: Coffee
+ name: coffee
+ type: checkbox
+ appearance: base
+ cake:
+ label: Cake
+ name: cake
+ type: checkbox
+ appearance: base
+ chips:
+ label: Chips
+ name: chips
+ type: checkbox
+ appearance: base
+ preferredDay:
+ type: select
+ label: Preferred day of appointment
+ name: preferred-day
+ error:
+ message: Choose your preferred day
+ options:
+ option1:
+ value: monday
+ title: Monday
+ option2:
+ value: tuesday
+ title: Tuesday
+ option3:
+ value: wednesday
+ title: Wednesday
+ option4:
+ value: thursday
+ title: Thursday
+ option5:
+ value: friday
+ title: Friday
+ option6:
+ value: saturday
+ title: Saturday
+ option7:
+ value: sunday
+ title: Sunday
+
+
+---
+To notify a user of an error with their form submission:
+
+1. Prefix the word "Error:" to the document's `title`. It's the first thing announced by screen readers when the page loads.
+2. Place an error summary at the top of the page
+3. Add an error message to each problematic input
+
+{{ pageComponents(components.errorNote) }}
+
+Page title
+==========
+
+Example form showcasing error messages
+--------------------------------------
+
+### Dealing with text
+
+{{ pageComponents(components.errorForms.textErrors) }}
+
+### Dealing with numbers
+
+{{ pageComponents(components.errorForms.numbersErrors) }}
+
+### Dealing with dates and times
+
+{{ pageComponents(components.errorForms.dateErrors) }}
+
+### Other input types
+
+{{ pageComponents(components.errorForms.otherErrors) }}
+
+Error summary considerations
+----------------------------
+
+The error summary should be at the top of the `main` element. If the page includes breadcrumbs or a back link, place it after these, but before the `h1`. The error summary must contain the heading 'There is a problem'.
+
+Keyboard focus needs to move to the error summary, hence the addition of `tabindex="-1"`. JavaScript is included to shift focus if an error summary is present.
+
+Each item in the summary list must link to the field with the validation error. Use the same wording for the error in both the error summary and the problematic field.
+
+Error message considerations
+----------------------------
+
+In the event of a validation error, the error message should explain what went wrong and how to fix it. Keep the wording clear and concise.
+
+To help screen reader users, the error message includes a visually hidden 'Error:' before the error message.
\ No newline at end of file
diff --git a/web/amplify/eleventy/fundamentals/forms.md b/web/amplify/eleventy/fundamentals/forms.md
new file mode 100644
index 00000000..9d1858d4
--- /dev/null
+++ b/web/amplify/eleventy/fundamentals/forms.md
@@ -0,0 +1,575 @@
+---
+title: Forms
+components:
+ formBasic:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ fullName:
+ label: Name
+ name: name
+ type: text
+ required: true
+ hint: E.g Robin Smith
+ autocomplete: true
+ emailAddress:
+ label: Email
+ name: email
+ type: email
+ hint: E.g robin.smith@example.co.uk
+ autocomplete: true
+ autocapitalize: off
+ autocorrect: off
+ spellcheck: off
+ inputmode: email
+ websiteAddress:
+ label: Website address
+ name: website
+ type: url
+ autocomplete: true
+ autocapitalize: off
+ autocorrect: off
+ spellcheck: off
+ inputmode: url
+ password:
+ label: Password
+ name: password
+ type: password
+ hint: Must contain 8+ characters with at least 1 number.
+ autocapitalize: off
+ autocorrect: off
+ spellcheck: off
+ message:
+ label: Your message
+ name: message
+ type: textarea
+ formNumbers:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ accountNumber:
+ label: Account number
+ hint: Must be between 6 and 8 numbers long
+ name: account-number
+ type: text
+ class: input-width-10
+ maxlength: 8
+ inputmode: numeric
+ phoneNumber:
+ label: Phone number
+ hint: Please include your country code
+ class: input-width-20
+ type: tel
+ name: telephone-number
+ autocomplete: true
+ inputmode: tel
+ guestNumber:
+ label: Number of guest tickets required
+ name: guests
+ type: number
+ class: input-width-3
+ initialValue: 0
+ formDates:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ arrivalDate:
+ label: Date of arrival
+ hint: For example 30/05/2021
+ name: arrival-date
+ type: text
+ class: input-width-10
+ dateOfBirth:
+ label: Date of birth (an example of a memorable date)
+ hint: For example 20 07 1972
+ hintClass: u-no-margin-top
+ type: fieldset
+ itemWrapClass: memorable-date
+ fields:
+ day:
+ label: Day
+ name: bday-day
+ type: text
+ class: input-width-2
+ autocomplete: true
+ inputmode: numeric
+ minNum: 0
+ maxNum: 31
+ month:
+ label: Month
+ name: bday-month
+ type: text
+ class: input-width-2
+ autocomplete: true
+ inputmode: numeric
+ minNum: 1
+ maxNum: 12
+ year:
+ label: Year
+ name: bday-year
+ type: text
+ class: input-width-4
+ autocomplete: true
+ inputmode: numeric
+ minNum: 1900
+ maxNum: 2050
+ meetingTime:
+ label: Specify a start time for your meeting
+ hint: Use UTC and your local time
+ hintClass: u-no-margin-top
+ type: fieldset
+ itemWrapClass: memorable-date
+ isGroup: true
+ fields:
+ time:
+ label: Start Time
+ name: meeting-time
+ class: input-width-5
+ type: text
+ timeZone:
+ label: Time zone
+ name: timezone
+ type: select
+ options:
+ option1:
+ value: UTC-12:00
+ title: UTC-12:00
+ option2:
+ value: UTC-11:00
+ title: UTC-11:00
+ option3:
+ value: UTC-10:00
+ title: UTC-10:00
+ option4:
+ value: UTC-09:30
+ title: UTC-09:30
+ option5:
+ value: UTC-09:00
+ title: UTC-09:00
+ option6:
+ value: UTC-08:00
+ title: UTC-08:00
+ option7:
+ value: UTC-07:00
+ title: UTC-07:00
+ option8:
+ value: UTC-06:00
+ title: UTC-06:00
+ option9:
+ value: UTC-05:00
+ title: UTC-05:00
+ option10:
+ value: UTC-04:00
+ title: UTC-04:00
+ option11:
+ value: UTC-03:30
+ title: UTC-03:30
+ option12:
+ value: UTC-03:00
+ title: UTC-03:00
+ option13:
+ value: UTC-02:00
+ title: UTC-02:00
+ option14:
+ value: UTC-01:00
+ title: UTC-01:00
+ option15:
+ value: UTC-00:00
+ title: UTC-00:00
+ selected: true
+ option16:
+ value: UTC+01:00
+ title: UTC+01:00
+ option17:
+ value: UTC+02:00
+ title: UTC+02:00
+ option18:
+ value: UTC+03:00
+ title: UTC+03:00
+ option19:
+ value: UTC+03:30
+ title: UTC+03:30
+ option20:
+ value: UTC+04:00
+ title: UTC+04:00
+ option21:
+ value: UTC+04:30
+ title: UTC+04:30
+ option22:
+ value: UTC+05:00
+ title: UTC+05:00
+ option23:
+ value: UTC+05:30
+ title: UTC+05:30
+ option24:
+ value: UTC+05:45
+ title: UTC+05:45
+ option25:
+ value: UTC+06:00
+ title: UTC+06:00
+ option26:
+ value: UTC+07:00
+ title: UTC+07:00
+ option27:
+ value: UTC+08:00
+ title: UTC+08:00
+ option28:
+ value: UTC+08:45
+ title: UTC+08:45
+ option29:
+ value: UTC+09:30
+ title: UTC+09:30
+ option30:
+ value: UTC+10:00
+ title: UTC+10:00
+ option31:
+ value: UTC+10:30
+ title: UTC+10:30
+ option32:
+ value: UTC+11:00
+ title: UTC+11:00
+ option33:
+ value: UTC+12:00
+ title: UTC+12:00
+ option34:
+ value: UTC+12:45
+ title: UTC+12:45
+ option35:
+ value: UTC+13:00
+ title: UTC+13:00
+ option36:
+ value: UTC+14:00
+ title: UTC+14:00
+ formFiles:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ file:
+ label: Choose a file
+ name: file
+ type: file
+ formCheckboxes:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ checkboxes:
+ type: fieldset
+ label: Things you like
+ hint: Select all that apply
+ name: things-you-like
+ fields:
+ chocolate:
+ label: Chocolate
+ name: chocolate
+ type: checkbox
+ appearance: base
+ coffee:
+ label: Coffee
+ name: coffee
+ type: checkbox
+ appearance: base
+ cake:
+ label: Cake
+ name: cake
+ type: checkbox
+ appearance: base
+ chips:
+ label: Chips
+ name: chips
+ type: checkbox
+ appearance: base
+ formRadios:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ radios:
+ type: fieldset
+ label: Have you changed your name?
+ hint: This includes changing your family name or spelling your name differently.
+ name: name-change
+ fields:
+ yes:
+ label: Yes
+ name: name-change_yes
+ type: radio
+ initialValue: yes
+ no:
+ label: No
+ name: name-change_no
+ type: radio
+ initialValue: no
+ formSegments:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ segments:
+ type: fieldset
+ label: Segmented options (Radio)
+ name: segmented-options
+ hint: We understand that different people enjoy books in differeny ways, which is why we're giving you lots of options.
+ isSegmentedGroup: true
+ fields:
+ segment1:
+ name: segmented-option-1
+ class: input--radio
+ type: radio
+ segmentTitle: Budget option
+ segmentBody: Copy to explain this option in more detail
+ segment2:
+ name: segmented-option-2
+ class: input--radio
+ type: radio
+ checked: true
+ segmentTitle: Value option
+ segmentBody: Copy to explain this option in more detail
+ segment3:
+ name: segmented-option-3
+ class: input--radio
+ type: radio
+ segmentTitle: Expensive option
+ segmentBody: Copy to explain this option in more detail
+ formSelect:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ sortBy:
+ type: select
+ label: Sort by
+ name: sort
+ options:
+ option1:
+ value: published
+ title: Recently published
+ option2:
+ value: updated
+ title: Recently updated
+ option3:
+ value: views
+ title: Most views
+ option4:
+ value: comments
+ title: Most comments
+ formFixedWidth:
+ inputs:
+ type: fundamentals
+ name: form
+ data:
+ example: true
+ fields:
+ 30char:
+ label: 30 character width
+ type: text
+ name: width-30
+ class: input-width-30
+ 20char:
+ label: 20 character width
+ type: text
+ name: width-20
+ class: input-width-20
+ 10char:
+ label: 10 character width
+ type: text
+ name: width-10
+ class: input-width-10
+ 5char:
+ label: 5 character width
+ type: text
+ name: width-5
+ class: input-width-5
+ 4char:
+ label: 4 character width
+ type: text
+ name: width-4
+ class: input-width-4
+ 3char:
+ label: 3 character width
+ type: text
+ name: width-3
+ class: input-width-3
+ 2char:
+ label: 2 character width
+ type: text
+ name: width-2
+ class: input-width-2
+
+---
+The examples on this page show how we manage forms and their fields, and their default styles. Recommendations are based on Adam Silver's article [Form design: from zero to hero all in one blog post](https://adamsilver.io/blog/form-design-from-zero-to-hero-all-in-one-blog-post/) and the [GOV.UK design system](https://design-system.service.gov.uk/components/).
+
+An [example search form](https://amplify.studio24.net/amplify/core-components/search.html) is available in [core components](https://amplify.studio24.net/amplify/core-components).
+
+[Form error messages](https://amplify.studio24.net/amplify/fundamentals/form-errors.html) are covered separately.
+
+Top tips
+--------
+
+- Every `input` needs a `label`. Do not wrap inputs in labels, put labels above the input.
+- Do not use the `placeholder` attribute on `input` fields.
+- Use [fixed width inputs](https://amplify.studio24.net/amplify/fundamentals/forms.html#fixed-width-inputs) for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.
+- Make form fields look like form fields: apply a border and make sure they are empty to begin with. A minimum height of 44 pixels makes them easy to tap on touch screen devices.
+- Make sure any `button` looks like a button. Align them to the left edge of the last input (the right edge for right-to-left languages) where users naturally look for them. Use a verb for button text because the user is doing something, and relate it to what they are doing - avoid generic 'Submit' buttons.
+- [The `select` element should be a last resort](https://www.youtube.com/watch?v=CUkMCQR4TpY) as they're really hard to use. Try radio buttons instead. If there's a long list of options, use JavaScript to enhance the `select` into an [accessible auto-complete field](https://amplify.studio24.net/amplify/advanced-components/accessible-autocomplete.html) (not to be confused with the `autocomplete` attribute).
+- If you have to use a `select`, don't submit a form when its value changes. Select boxes that submit the form automatically when the user selects an option cause problems for keyboard and screen reader users.
+
+### Required fields
+
+It is best practice to only ask questions that are strictly necessary.
+
+In the event that a form contains both optional and required fields, to clearly identify the required fields to all users add `span class="required">(Required)This is a living guide, running off your project Sass and JavaScript. It starts as the default, clean starter kit. It is not meant to be styled nicely.
+
As you write your project's Sass and JavaScript, this guide will pick up those changes.
+
You can delete this directory (/amplify) if you don't need to refer to these docs or don't want to include it in your finished project.
+ type: info
+---
+
+{{ pageComponents(components) }}
+
+
+
+1. Grab an up-to-date copy of Amplify from [GitHub](https://github.com/studio24/amplify)
+2. Copy the following items from Amplify into your project (probably into the theme directory, but it will depend on your project setup):
+ - `/assets-src` directory
+ - `.nvmrc` file - update to the current LTS version
+ - `package.json` and `package-lock.json` files
+ - `svgo.config.js` file
+ - `webpack.config.js` file
+3. Check that the config `from` and `to` paths in `package.json` are correct for your project setup
+4. Check the `context` and `output` paths in `webpack.config.js` are correct for your project setup
+5. Optional: copy the `/amplify` directory into the webroot
+6. Follow the command line instructions to [install project dependencies](https://github.com/studio24/amplify) and check there are no errors when building the front-end assets
+7. Make sure the `html` element in your web page template has an appropriate `lang` attribute and the `no-js` class
+8. Make sure your web page template includes the following (which can be copied from any of the example pages in the `/amplify` directory):
+ - link to the core stylesheet
+ - link to the advanced stylesheet, including the media query to determine which browsers it will be served to
+ - link to the print stylesheet
+ - `script` for the Font Face Observer library in the `head`
+ - another `script` in the `head`, which checks when the desired web font is loaded, adds the `fonts-loaded` class to `html`, adds the main JavaScript file to the `head` and switches the `no-js` class to `js`
+
+
\ No newline at end of file
diff --git a/web/amplify/eleventy/get-started/browser-support.md b/web/amplify/eleventy/get-started/browser-support.md
new file mode 100644
index 00000000..c0a1397e
--- /dev/null
+++ b/web/amplify/eleventy/get-started/browser-support.md
@@ -0,0 +1,26 @@
+---
+title: Browser Support
+---
+Amplify supports the range of [browsers recommended by the GOVUK Service Manual](https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices).
+
+Inspired by the [Springer Nature Frontend Playbook](https://github.com/springernature/frontend-playbook/blob/main/practices/graded-browser-support.md), all browsers are served semantic HTML and minimal CSS as defined in `core.css` and `print.css`, but only supported browsers are served the `advanced.css` and any JavaScript files that are needed.
+
+It is inefficient for developers and website performance (and therefore users) to attempt to make advanced CSS and JavaScript work in older browsers. **Essential user journeys must remain accessible to all users**, irrespective of their browser, but users of supported browsers will have a more interactive and visually pleasing experience.
+
+Implementing browser support
+----------------------------
+
+Amplify uses the '[cutting the mustard](http://www.zeldman.com/2015/09/01/youre-welcome-cutting-the-mustard-then-and-now/)' progressive enhancement technique. This involves using feature detection in order to determine which browsers will receive the fully-enhanced experience and which ones will receive only the core experience.
+
+By [cutting the mustard with CSS media queries](https://www.sitepoint.com/cutting-the-mustard-with-css-media-queries/), users of supported browsers will have the best possible experience even if JavaScript is not available.
+
+[Implementation details for developers](https://github.com/studio24/amplify/blob/main/docs/browser-support.md).
+
+### Changing the supported browsers
+
+If your browser support needs differ, you must make the following updates:
+
+- the browserslist in `package.json`
+- the CSS media query in `head` of your web page templates.
+
+[How to update Amplify browser support](https://github.com/studio24/amplify/blob/main/docs/browser-support.md).
\ No newline at end of file
diff --git a/web/amplify/eleventy/get-started/css.md b/web/amplify/eleventy/get-started/css.md
new file mode 100644
index 00000000..9c26f0e6
--- /dev/null
+++ b/web/amplify/eleventy/get-started/css.md
@@ -0,0 +1,21 @@
+---
+title: CSS
+---
+Amplify uses [Sass](http://sass-lang.com/) - specifically the [SCSS syntax](https://sass-lang.com/documentation/syntax) - which is compiled into CSS files. The CSS approach is heavily influenced by Andy Bell's [CUBE CSS](https://cube.fyi/). This has some similarities with the [BEM Methodology](http://getbem.com/) but with a more judicious use of class names.
+
+Architecture
+------------
+
+The architecture is split into a series of numbered levels in `src/styles/sass` with each level representing a directory that contains our Sass split out into different [partial files](https://sass-lang.com/guide#topic-4). More generic and wide-reaching styles sit within the lower numbered levels, with specificity increasing with each subsequent level.
+
+[CSS architecture details for developers](https://github.com/studio24/amplify/blob/main/docs/css.md#css-architecture).
+
+Compiling Sass to CSS
+---------------------
+
+As mentioned in [browser support](https://amplify.studio24.net/amplify/get-started/browser-support.html), the Sass is compiled into the following CSS stylesheets in `web/dist/styles`:
+
+- `core.css` and `print.css`, which are served to all browsers
+- `advanced.css`, which is served to supported browsers.
+
+[Sass compilation details for developers](https://github.com/studio24/amplify/blob/main/docs/css.md#compiling-sass-to-css).
\ No newline at end of file
diff --git a/web/amplify/eleventy/get-started/get-started.json b/web/amplify/eleventy/get-started/get-started.json
new file mode 100644
index 00000000..b023262b
--- /dev/null
+++ b/web/amplify/eleventy/get-started/get-started.json
@@ -0,0 +1,4 @@
+{
+ "layout": "page.njk",
+ "tags": "get-started"
+}
\ No newline at end of file
diff --git a/web/amplify/eleventy/get-started/javascript.md b/web/amplify/eleventy/get-started/javascript.md
new file mode 100644
index 00000000..4f650d61
--- /dev/null
+++ b/web/amplify/eleventy/get-started/javascript.md
@@ -0,0 +1,19 @@
+---
+title: JavaScript
+---
+Architecture
+------------
+
+The architecture takes inspiration from Chris Ferdinandi's [How I structure my vanilla JS projects](https://gomakethings.com/how-i-structure-my-vanilla-js-projects/). Rather than keeping all JavaScript within a single file, code is split across a series of individual files and subdirectories within `src/js` directory. This approach offers two main benefits:
+
+- It makes the code easier to understand for developers
+- We don't have to load all JavaScript on all pages
+
+[JS architecture details for developers](https://github.com/studio24/amplify/blob/main/docs/javascript.md#javascript-architecture).
+
+Compiling and transpiling
+-------------------------
+
+[Webpack](https://webpack.js.org/) concatenates and minifies the JS needed for the project into `web/dist/js`. [Babel](https://babeljs.io/) is used for transpiling the JS into code for our [supported browsers](https://amplify.studio24.net/amplify/get-started/browser-support.html).
+
+[JS build tool details for developers](https://github.com/studio24/amplify/blob/main/docs/javascript.md#javascript-build-tools).
\ No newline at end of file
diff --git a/web/amplify/eleventy/index.md b/web/amplify/eleventy/index.md
new file mode 100644
index 00000000..64338459
--- /dev/null
+++ b/web/amplify/eleventy/index.md
@@ -0,0 +1,46 @@
+---
+title: Home
+layout: homepage.njk
+root: true
+templateEngineOverride: 'njk,md'
+components:
+ cover:
+ type: layout-helpers
+ name: cover
+ data:
+ lead: true
+ title: Amplify
+ body: Welcome to the Studio 24 starter kit for design and front-end development
+ cards:
+ type: core-components
+ name: cards
+ data:
+ type: neat
+ extraClass: teasers
+ cards:
+ card1:
+ heading: Fundamentals
+ body:
Understand how Amplify handles the fundamentals, e.g. colours, typography, buttons/links, lists, tables, forms, spacing and print styles.
Understand how Amplify handles the fundamentals, e.g. colours, typography, buttons/links, lists, tables, forms, spacing and print styles.
+ link:
+ url: /fundamentals
+ text: Browse fundamentals
+---
+{{ pageComponents(components) }}
diff --git a/web/amplify/eleventy/layout-helpers.md b/web/amplify/eleventy/layout-helpers.md
new file mode 100644
index 00000000..6170691a
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers.md
@@ -0,0 +1,10 @@
+---
+title: Layout helpers
+navItem: true
+root: true
+markdown: true
+navOrder: 3
+---
+Influenced by [Every Layout](https://every-layout.dev/), these are basic layout helper styles.
+
+They can be combined and customised to make components and page templates.
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/box.md b/web/amplify/eleventy/layout-helpers/box.md
new file mode 100644
index 00000000..d4a8e1cc
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/box.md
@@ -0,0 +1,44 @@
+---
+title: Box
+components:
+ default:
+ type: layout-helpers
+ name: box
+ data:
+ title: Default box
+ text: Default box, with padding and border
+ noPadding:
+ type: layout-helpers
+ name: box
+ data:
+ title: Box without padding
+ noPadding: true
+ text: Box with no padding
+ noBorder:
+ type: layout-helpers
+ name: box
+ data:
+ title: Box without border
+ noBorder: true
+ text: Box with no border
+ noBorderNoPadding:
+ type: layout-helpers
+ name: box
+ data:
+ title: Box without padding or border
+ noBorder: true
+ noPadding: true
+ text: Box with no padding and no border
+---
+The box layout helper is a simple container for grouping content within a defined region. It uses the class `l-box`.
+
+Box deliberately treats padding and borders *equally on all sides*.
+
+If your container needs asymmetrical styling, then it's a container with a more specific purpose and *not* a box.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+Because high contrast themes can eliminate `background-color`, the `l-box--no-border` modifier class adds a transparent outline so that the shape of the box remains apparent. Negative `outline-offset` moves the outline inside the box perimeter so that it doesn't impact its overall size.
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/center.md b/web/amplify/eleventy/layout-helpers/center.md
new file mode 100644
index 00000000..df0ce888
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/center.md
@@ -0,0 +1,16 @@
+---
+title: Center
+components:
+ center:
+ type: layout-helpers
+ name: center
+ data:
+ text: Center layout in action
+---
+The center layout helper creates a vertical strip of content inside a given container element, with equal spacing on either side. It uses the class `l-center`. This technique is used on the `main` element (albeit without using the `l-center` class).
+
+Padding on the sides of the center layout helper maintains a space between its contents and the edges of the parent container, even when the parent is narrower than the `max-width` of the center layout.
+
+The center layout helper uses an exception to the global `box-sizing: border-box;` declaration. It uses `box-sizing: content-box;` to prevent the padding from making the content narrower than intended.
+
+{{ pageComponents(components) }}
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/cluster.md b/web/amplify/eleventy/layout-helpers/cluster.md
new file mode 100644
index 00000000..20f70f38
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/cluster.md
@@ -0,0 +1,48 @@
+---
+title: Cluster
+components:
+ cluster:
+ type: layout-helpers
+ name: cluster
+ data:
+ items:
+ item1:
+ link: javascript:;
+ title: Item One
+ item2:
+ link: javascript:;
+ title: Item Two
+ item3:
+ link: javascript:;
+ title: Item Three
+ item4:
+ link: javascript:;
+ title: Item Four
+ item5:
+ link: javascript:;
+ title: Item Five
+ item6:
+ link: javascript:;
+ title: Item Six
+ item7:
+ link: javascript:;
+ title: Item Seven
+ item8:
+ link: javascript:;
+ title: Item Eight
+ item9:
+ link: javascript:;
+ title: Item Nine
+ item10:
+ link: javascript:;
+ title: Item Ten
+---
+The cluster layout helper suits any group of elements that differ in length, are liable to wrap and need even spacing between them, e.g. lists of tags or groups of buttons. It uses the class `l-cluster`.
+
+Cluster needs an inner flexbox container - in the following example it's provided by the `ul`. Flexbox gives us control of the alignment of items inside.
+
+The cluster items - `li` in this example - sit within this container. Each item has a margin on all sides.
+
+The flexbox container has a negative margin of the same size as the cluster items, creating even spacing between them. `overflow: hidden;` is used to tidy up the edges.
+
+{{ pageComponents(components) }}
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/cover.md b/web/amplify/eleventy/layout-helpers/cover.md
new file mode 100644
index 00000000..76263f5c
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/cover.md
@@ -0,0 +1,43 @@
+---
+title: Cover
+components:
+ coverPrincipal:
+ type: layout-helpers
+ name: cover
+ data:
+ example: true
+ title: Cover with horizontal centering using a utility class
+ body: Here is the principal content
+ extraClasses: principal text-39 u-center
+ coverNested:
+ type: layout-helpers
+ name: cover
+ data:
+ example: true
+ title: Cover with a nested center layout for horizontal centering
+ body: Here is the principal content
+ nested: true
+ nestClasses: l-center principal
+ extraClasses: text-39
+ coverHeaderFooter:
+ type: layout-helpers
+ name: cover
+ data:
+ example: true
+ title: Cover with optional header and footer content
+ body: The principal content
+ headerFooter: true
+ headerContent: Header content, e.g. a close button
+ extraClasses: principal text-39 u-center
+ footerContent: Footer content
+
+
+
+---
+The cover layout helper creates a container with a minimum height to hold vertically centered content, ideal for "above the fold" hero blocks and sections needing visual prominence. It uses the classes `l-cover` for the container and `principal` for the content to be centered.
+
+{{ pageComponents(components) }}
+
+### Considerations
+
+By adding a class to "Header" and/or "Footer" we could then use `align-self: flex-end;` to shift them to the far edge of cover.
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/frame.md b/web/amplify/eleventy/layout-helpers/frame.md
new file mode 100644
index 00000000..874d73f0
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/frame.md
@@ -0,0 +1,64 @@
+---
+title: Frame
+components:
+ frame16-9:
+ type: layout-helpers
+ name: frame
+ data:
+ example: true
+ title: "16:9 aspect ratio"
+ aspectRatio: "16:9"
+ image:
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ caption: "An example of the 16:9 frame modifier"
+ frame3-2:
+ type: layout-helpers
+ name: frame
+ data:
+ example: true
+ title: "3:2 aspect ratio"
+ aspectRatio: "3:2"
+ image:
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ caption: "An example of the 3:2 frame modifier"
+ frame4-3:
+ type: layout-helpers
+ name: frame
+ data:
+ example: true
+ title: "4:3 aspect ratio"
+ aspectRatio: "4:3"
+ image:
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ caption: "An example of the 4:3 frame modifier"
+ frameSquare:
+ type: layout-helpers
+ name: frame
+ data:
+ example: true
+ title: square aspect ratio
+ aspectRatio: square
+ image:
+ url: https://amplify.studio24.net/dist/images/jpg-cat-1.jpg
+ altText: A cat with green eyes looking directly at the camera
+ caption: An example of the square frame modifier
+---
+The frame layout helper is useful for cropping media (images and video) to a specific aspect ratio. It uses the class `l-frame` and additional modifier classes for pre-defined aspect ratios. These modifier classes determine the amount of vertical padding on the frame, which then acts as a window onto the content inside.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+### Figure/figcaption use
+
+If using `figure` with `figcaption`, make sure to apply the `l-frame` class to an inner `div` or `picture` rather than directly to the `figure` to avoid obscuring the `figcaption`.
+
+### Internet Explorer/non-Chromium Edge
+
+The default frame layout uses `object-fit: cover` for images and videos. This is not supported in Internet Explorer or Edge prior to version 16 and in Edge 16-18 it is only supported on images. However, the Chromium Edge browser, which does support object-fit, is now available to systems as far back as Windows 7.
+
+If you need broader support you may prefer to forgo `object-fit` and adapt your instance of the frame to rely on absolute positioning of the contents and hiding any overflow.
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/layout-helpers.json b/web/amplify/eleventy/layout-helpers/layout-helpers.json
new file mode 100644
index 00000000..33158285
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/layout-helpers.json
@@ -0,0 +1,6 @@
+{
+ "layout": "page.njk",
+ "tags": "layout-helpers",
+ "templateEngineOverride": "njk, md",
+ "subpage": true
+}
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/sidebar.md b/web/amplify/eleventy/layout-helpers/sidebar.md
new file mode 100644
index 00000000..61cec08a
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/sidebar.md
@@ -0,0 +1,45 @@
+---
+title: Sidebar
+components:
+ default:
+ type: layout-helpers
+ name: sidebar
+ data:
+ example: true
+ title: Default sidebar
+ notSidebar: Wide panel
+ sidebarContent: Narrow sidebar panel
+ nested:
+ type: layout-helpers
+ name: sidebar
+ data:
+ example: true
+ nested: true
+ title: Using nested containers for spacing content
+ notSidebar: Wide panel
+ sidebarContent: Narrow sidebar panel
+---
+The sidebar layout helper creates a pair of content panels inside a containing element. These two panels stack vertically, until there is enough horizontal space for them to sit alongside each other. One content panel is typically narrower than the other, acting as a "sidebar".
+
+The sidebar layout helper needs an inner flexbox container to hold the two panels. The same negative margin technique used for the [cluster layout](https://amplify.studio24.net/amplify/layout-helpers/cluster.html) creates gutter spacing between the panels.
+
+The point at which the panels sit side-by-side horizontally is determined by a `flex-basis` property on the narrower panel and a `min-width` on the wider panel. As there are **no viewport media queries**, the sidebar layout will nest nicely inside other containers.
+
+Considerations
+--------------
+
+It is not recommended to use the sidebar layout helper to create an entire page layout, with a main content area and a sidebar. This is because the technique Amplify uses to manage [responsive tables](https://amplify.studio24.net/amplify/fundamentals/tables.html) has been found not to work if the table sits within the sidebar layout helper.
+
+{{ pageComponents(components) }}
+
+Using intrinsic content width for the sidebar
+---------------------------------------------
+
+
+
+
+
+We can choose to not specify a width on the narrow "sidebar" panel (by not declaring a `flex-basis` value) and let the content of the sidebar determine how wide it is. The preceding example shows how to override the default styles by using an additional class and omitting the `sidebar` class.
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/simple-search.md b/web/amplify/eleventy/layout-helpers/simple-search.md
new file mode 100644
index 00000000..cfcf8d9b
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/simple-search.md
@@ -0,0 +1,9 @@
+---
+title: Simple search form
+---
+Considerations
+--------------
+
+Note the use of `input type="search"`. It is recommended to include `role="search"` on the parent `form` element. [More about forms](https://amplify.studio24.net/amplify/fundamentals/forms.html).
+
+Note the use of the [box layout](https://amplify.studio24.net/amplify/layout-helpers/box.html) and [sidebar layout](https://amplify.studio24.net/amplify/layout-helpers/sidebar.html) in this example.
\ No newline at end of file
diff --git a/web/amplify/eleventy/layout-helpers/switcher.md b/web/amplify/eleventy/layout-helpers/switcher.md
new file mode 100644
index 00000000..028f51f1
--- /dev/null
+++ b/web/amplify/eleventy/layout-helpers/switcher.md
@@ -0,0 +1,35 @@
+---
+title: Switcher
+components:
+ switcher:
+ type: layout-helpers
+ name: switcher
+ data:
+ items:
+ item1:
+ text: Item 1
+ item2:
+ text: Item 2
+ item3:
+ text: Item 3
+---
+The switcher layout helper switches the alignment of items from horizontal to vertical at a given, container-based breakpoint. It's a good choice for situations where each child item should be considered of equal importance and has an equal width. You will find an example of the switcher on the [Amplify home page](https://amplify.studio24.net/amplify/index.html).
+
+As with the [cluster](https://amplify.studio24.net/amplify/layout-helpers/cluster.html) and [sidebar](https://amplify.studio24.net/amplify/layout-helpers/sidebar.html) layouts, an inner flexbox container holds the switcher items, and the negative margin technique to create gutter spacing between items.
+
+As there are **no viewport media queries**, the switcher will nest nicely inside other containers.
+
+{{ pageComponents(components) }}
+
+Considerations
+--------------
+
+The default switcher layout behaves as follows:
+
+- When the inner flexbox container is less than 690px wide, the child items sit vertically.
+- Otherwise, the child items sit horizontally.
+- The number of columns in a row is two (determined by the `min-width` percentage used on the child items).
+
+For gutter spacing, apply padding to the flex items and an equal negative margin to the flex container. This will double up, so use half the intended value.
+
+Use an additional class to override the default behaviour.
\ No newline at end of file
diff --git a/web/eleventy-dist/advanced-components/accessible-autocomplete/index.html b/web/eleventy-dist/advanced-components/accessible-autocomplete/index.html
new file mode 100644
index 00000000..cc41700c
--- /dev/null
+++ b/web/eleventy-dist/advanced-components/accessible-autocomplete/index.html
@@ -0,0 +1,166 @@
+
+
+
+
+
+
+
+ Accessible auto-complete - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/advanced-components/cards/index.html b/web/eleventy-dist/advanced-components/cards/index.html
new file mode 100644
index 00000000..2978db4f
--- /dev/null
+++ b/web/eleventy-dist/advanced-components/cards/index.html
@@ -0,0 +1,193 @@
+
+
+
+
+
+
+
+ Block link cards - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/advanced-components/collapsibles/index.html b/web/eleventy-dist/advanced-components/collapsibles/index.html
new file mode 100644
index 00000000..4e003f3d
--- /dev/null
+++ b/web/eleventy-dist/advanced-components/collapsibles/index.html
@@ -0,0 +1,166 @@
+
+
+
+
+
+
+
+ Collapsible containers - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/advanced-components/disclosure-widget/index.html b/web/eleventy-dist/advanced-components/disclosure-widget/index.html
new file mode 100644
index 00000000..63871470
--- /dev/null
+++ b/web/eleventy-dist/advanced-components/disclosure-widget/index.html
@@ -0,0 +1,167 @@
+
+
+
+
+
+
+
+ Disclosure widget - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/advanced-components/index.html b/web/eleventy-dist/advanced-components/index.html
new file mode 100644
index 00000000..22230638
--- /dev/null
+++ b/web/eleventy-dist/advanced-components/index.html
@@ -0,0 +1,165 @@
+
+
+
+
+
+
+
+ Advanced components - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/advanced-components/tabbed-sections/index.html b/web/eleventy-dist/advanced-components/tabbed-sections/index.html
new file mode 100644
index 00000000..8a84d78f
--- /dev/null
+++ b/web/eleventy-dist/advanced-components/tabbed-sections/index.html
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+ - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/advanced-components/tabs/index.html b/web/eleventy-dist/advanced-components/tabs/index.html
new file mode 100644
index 00000000..2d230007
--- /dev/null
+++ b/web/eleventy-dist/advanced-components/tabs/index.html
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+ Tabbed sections - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/avatars/index.html b/web/eleventy-dist/core-components/avatars/index.html
new file mode 100644
index 00000000..1fa5275b
--- /dev/null
+++ b/web/eleventy-dist/core-components/avatars/index.html
@@ -0,0 +1,206 @@
+
+
+
+
+
+
+
+ Avatars - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/breadcrumbs/index.html b/web/eleventy-dist/core-components/breadcrumbs/index.html
new file mode 100644
index 00000000..f615577a
--- /dev/null
+++ b/web/eleventy-dist/core-components/breadcrumbs/index.html
@@ -0,0 +1,202 @@
+
+
+
+
+
+
+
+ Breadcrumbs - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/image-component/index.html b/web/eleventy-dist/core-components/image-component/index.html
new file mode 100644
index 00000000..e4a8c0b3
--- /dev/null
+++ b/web/eleventy-dist/core-components/image-component/index.html
@@ -0,0 +1,203 @@
+
+
+
+
+
+
+
+ Image Component - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/image/index.html b/web/eleventy-dist/core-components/image/index.html
new file mode 100644
index 00000000..13f7c1e1
--- /dev/null
+++ b/web/eleventy-dist/core-components/image/index.html
@@ -0,0 +1,242 @@
+
+
+
+
+
+
+
+ - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/index.html b/web/eleventy-dist/core-components/index.html
new file mode 100644
index 00000000..0c44f34b
--- /dev/null
+++ b/web/eleventy-dist/core-components/index.html
@@ -0,0 +1,201 @@
+
+
+
+
+
+
+
+ Core components - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/main/index.html b/web/eleventy-dist/core-components/main/index.html
new file mode 100644
index 00000000..4379ca03
--- /dev/null
+++ b/web/eleventy-dist/core-components/main/index.html
@@ -0,0 +1,203 @@
+
+
+
+
+
+
+
+ Main - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/notes/index.html b/web/eleventy-dist/core-components/notes/index.html
new file mode 100644
index 00000000..88e74fd7
--- /dev/null
+++ b/web/eleventy-dist/core-components/notes/index.html
@@ -0,0 +1,202 @@
+
+
+
+
+
+
+
+ Notes - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/pagination/index.html b/web/eleventy-dist/core-components/pagination/index.html
new file mode 100644
index 00000000..e4bec0e2
--- /dev/null
+++ b/web/eleventy-dist/core-components/pagination/index.html
@@ -0,0 +1,204 @@
+
+
+
+
+
+
+
+ Pagination - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/progress-indicator/index.html b/web/eleventy-dist/core-components/progress-indicator/index.html
new file mode 100644
index 00000000..c1be6c9d
--- /dev/null
+++ b/web/eleventy-dist/core-components/progress-indicator/index.html
@@ -0,0 +1,198 @@
+
+
+
+
+
+
+
+ Progress indicator - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/quote-component/index.html b/web/eleventy-dist/core-components/quote-component/index.html
new file mode 100644
index 00000000..3a6cef9c
--- /dev/null
+++ b/web/eleventy-dist/core-components/quote-component/index.html
@@ -0,0 +1,200 @@
+
+
+
+
+
+
+
+ Quote component - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/shelves/index.html b/web/eleventy-dist/core-components/shelves/index.html
new file mode 100644
index 00000000..2390550f
--- /dev/null
+++ b/web/eleventy-dist/core-components/shelves/index.html
@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+ Shelves - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/simple-cards/index.html b/web/eleventy-dist/core-components/simple-cards/index.html
new file mode 100644
index 00000000..32d82c1a
--- /dev/null
+++ b/web/eleventy-dist/core-components/simple-cards/index.html
@@ -0,0 +1,215 @@
+
+
+
+
+
+
+
+ Simple cards - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/sticky-footer/index.html b/web/eleventy-dist/core-components/sticky-footer/index.html
new file mode 100644
index 00000000..f8e54299
--- /dev/null
+++ b/web/eleventy-dist/core-components/sticky-footer/index.html
@@ -0,0 +1,199 @@
+
+
+
+
+
+
+
+ Sticky footer - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/tag-list/index.html b/web/eleventy-dist/core-components/tag-list/index.html
new file mode 100644
index 00000000..744b51fc
--- /dev/null
+++ b/web/eleventy-dist/core-components/tag-list/index.html
@@ -0,0 +1,201 @@
+
+
+
+
+
+
+
+ Tag list - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/text-component/index.html b/web/eleventy-dist/core-components/text-component/index.html
new file mode 100644
index 00000000..4e28118b
--- /dev/null
+++ b/web/eleventy-dist/core-components/text-component/index.html
@@ -0,0 +1,203 @@
+
+
+
+
+
+
+
+ Text component - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/video-component/index.html b/web/eleventy-dist/core-components/video-component/index.html
new file mode 100644
index 00000000..9b0020f7
--- /dev/null
+++ b/web/eleventy-dist/core-components/video-component/index.html
@@ -0,0 +1,205 @@
+
+
+
+
+
+
+
+ Video component - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/core-components/video-components/index.html b/web/eleventy-dist/core-components/video-components/index.html
new file mode 100644
index 00000000..0e994f44
--- /dev/null
+++ b/web/eleventy-dist/core-components/video-components/index.html
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+ - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/design-handover/index.html b/web/eleventy-dist/design-handover/index.html
new file mode 100644
index 00000000..24ddfb3b
--- /dev/null
+++ b/web/eleventy-dist/design-handover/index.html
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+ Get started - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/design/index.html b/web/eleventy-dist/design/index.html
new file mode 100644
index 00000000..b561555d
--- /dev/null
+++ b/web/eleventy-dist/design/index.html
@@ -0,0 +1,203 @@
+
+
+
+
+
+
+
+ Design handover & standards - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/design/typography-test/index.html b/web/eleventy-dist/design/typography-test/index.html
new file mode 100644
index 00000000..3410e3dc
--- /dev/null
+++ b/web/eleventy-dist/design/typography-test/index.html
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+
+ Typography test - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-700.woff b/web/eleventy-dist/fonts/nunito-v20-latin-700.woff
new file mode 100644
index 00000000..f4ec4272
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-700.woff differ
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-700.woff2 b/web/eleventy-dist/fonts/nunito-v20-latin-700.woff2
new file mode 100644
index 00000000..61689839
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-700.woff2 differ
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-700italic.woff b/web/eleventy-dist/fonts/nunito-v20-latin-700italic.woff
new file mode 100644
index 00000000..7b5dc726
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-700italic.woff differ
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-700italic.woff2 b/web/eleventy-dist/fonts/nunito-v20-latin-700italic.woff2
new file mode 100644
index 00000000..e23f0aa4
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-700italic.woff2 differ
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-italic.woff b/web/eleventy-dist/fonts/nunito-v20-latin-italic.woff
new file mode 100644
index 00000000..756e209b
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-italic.woff differ
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-italic.woff2 b/web/eleventy-dist/fonts/nunito-v20-latin-italic.woff2
new file mode 100644
index 00000000..21bae9b7
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-italic.woff2 differ
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-regular.woff b/web/eleventy-dist/fonts/nunito-v20-latin-regular.woff
new file mode 100644
index 00000000..964a308e
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-regular.woff differ
diff --git a/web/eleventy-dist/fonts/nunito-v20-latin-regular.woff2 b/web/eleventy-dist/fonts/nunito-v20-latin-regular.woff2
new file mode 100644
index 00000000..b089f278
Binary files /dev/null and b/web/eleventy-dist/fonts/nunito-v20-latin-regular.woff2 differ
diff --git a/web/eleventy-dist/fundamentals/breakpoints/index.html b/web/eleventy-dist/fundamentals/breakpoints/index.html
new file mode 100644
index 00000000..f86762a4
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/breakpoints/index.html
@@ -0,0 +1,212 @@
+
+
+
+
+
+
+
+ Breakpoints - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/buttons/index.html b/web/eleventy-dist/fundamentals/buttons/index.html
new file mode 100644
index 00000000..304edb39
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/buttons/index.html
@@ -0,0 +1,234 @@
+
+
+
+
+
+
+
+ Buttons and links - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/colours/index.html b/web/eleventy-dist/fundamentals/colours/index.html
new file mode 100644
index 00000000..ca01c768
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/colours/index.html
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+ Colours - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/details-summary/index.html b/web/eleventy-dist/fundamentals/details-summary/index.html
new file mode 100644
index 00000000..f9607474
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/details-summary/index.html
@@ -0,0 +1,213 @@
+
+
+
+
+
+
+
+ Details and summary - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/flow-elements/index.html b/web/eleventy-dist/fundamentals/flow-elements/index.html
new file mode 100644
index 00000000..dd42d6c0
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/flow-elements/index.html
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+ Flow elements - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/form-errors/index.html b/web/eleventy-dist/fundamentals/form-errors/index.html
new file mode 100644
index 00000000..a7247e2b
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/form-errors/index.html
@@ -0,0 +1,275 @@
+
+
+
+
+
+
+
+ Form error messages - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/forms/index.html b/web/eleventy-dist/fundamentals/forms/index.html
new file mode 100644
index 00000000..97330b1f
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/forms/index.html
@@ -0,0 +1,330 @@
+
+
+
+
+
+
+
+ Forms - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/hide-and-show/index.html b/web/eleventy-dist/fundamentals/hide-and-show/index.html
new file mode 100644
index 00000000..eb029920
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/hide-and-show/index.html
@@ -0,0 +1,233 @@
+
+
+
+
+
+
+
+ Hide and show items inclusively - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/icons/index.html b/web/eleventy-dist/fundamentals/icons/index.html
new file mode 100644
index 00000000..8af52254
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/icons/index.html
@@ -0,0 +1,228 @@
+
+
+
+
+
+
+
+ Icons - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/images/index.html b/web/eleventy-dist/fundamentals/images/index.html
new file mode 100644
index 00000000..1037970b
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/images/index.html
@@ -0,0 +1,254 @@
+
+
+
+
+
+
+
+ Images - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/index.html b/web/eleventy-dist/fundamentals/index.html
new file mode 100644
index 00000000..c12303c4
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/index.html
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+ Fundamentals - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/lists/index.html b/web/eleventy-dist/fundamentals/lists/index.html
new file mode 100644
index 00000000..ccf23b25
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/lists/index.html
@@ -0,0 +1,270 @@
+
+
+
+
+
+
+
+ Lists - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/print-styles/index.html b/web/eleventy-dist/fundamentals/print-styles/index.html
new file mode 100644
index 00000000..0d69539a
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/print-styles/index.html
@@ -0,0 +1,222 @@
+
+
+
+
+
+
+
+ Print styles - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/skip-link/index.html b/web/eleventy-dist/fundamentals/skip-link/index.html
new file mode 100644
index 00000000..6677f0f2
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/skip-link/index.html
@@ -0,0 +1,211 @@
+
+
+
+
+
+
+
+ Skip link - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/tables/index.html b/web/eleventy-dist/fundamentals/tables/index.html
new file mode 100644
index 00000000..91f2f88e
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/tables/index.html
@@ -0,0 +1,306 @@
+
+
+
+
+
+
+
+ Tables - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/typography/index.html b/web/eleventy-dist/fundamentals/typography/index.html
new file mode 100644
index 00000000..28c6a3e4
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/typography/index.html
@@ -0,0 +1,230 @@
+
+
+
+
+
+
+
+ Typography - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/utility-classes/index.html b/web/eleventy-dist/fundamentals/utility-classes/index.html
new file mode 100644
index 00000000..b859199c
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/utility-classes/index.html
@@ -0,0 +1,234 @@
+
+
+
+
+
+
+
+ Utility Classes - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/fundamentals/vertical-spacing/index.html b/web/eleventy-dist/fundamentals/vertical-spacing/index.html
new file mode 100644
index 00000000..913ea499
--- /dev/null
+++ b/web/eleventy-dist/fundamentals/vertical-spacing/index.html
@@ -0,0 +1,223 @@
+
+
+
+
+
+
+
+ Vertical spacing - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/get-started/browser-support copy/index.html b/web/eleventy-dist/get-started/browser-support copy/index.html
new file mode 100644
index 00000000..99f05694
--- /dev/null
+++ b/web/eleventy-dist/get-started/browser-support copy/index.html
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+ Browser support - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/get-started/browser-support/index.html b/web/eleventy-dist/get-started/browser-support/index.html
new file mode 100644
index 00000000..3b1af5fb
--- /dev/null
+++ b/web/eleventy-dist/get-started/browser-support/index.html
@@ -0,0 +1,167 @@
+
+
+
+
+
+
+
+ Browser Support - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/get-started/css/index.html b/web/eleventy-dist/get-started/css/index.html
new file mode 100644
index 00000000..9fe8cd05
--- /dev/null
+++ b/web/eleventy-dist/get-started/css/index.html
@@ -0,0 +1,164 @@
+
+
+
+
+
+
+
+ CSS - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/get-started/index.html b/web/eleventy-dist/get-started/index.html
new file mode 100644
index 00000000..276807d5
--- /dev/null
+++ b/web/eleventy-dist/get-started/index.html
@@ -0,0 +1,181 @@
+
+
+
+
+
+
+
+ Get Started - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/get-started/javascript/index.html b/web/eleventy-dist/get-started/javascript/index.html
new file mode 100644
index 00000000..8caf1427
--- /dev/null
+++ b/web/eleventy-dist/get-started/javascript/index.html
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+ JavaScript - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/get-started/js/index.html b/web/eleventy-dist/get-started/js/index.html
new file mode 100644
index 00000000..af01ac6d
--- /dev/null
+++ b/web/eleventy-dist/get-started/js/index.html
@@ -0,0 +1,197 @@
+
+
+
+
+
+
+
+ JS - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/images/jpg-cat-1.jpg b/web/eleventy-dist/images/jpg-cat-1.jpg
new file mode 100644
index 00000000..402a1ac0
Binary files /dev/null and b/web/eleventy-dist/images/jpg-cat-1.jpg differ
diff --git a/web/eleventy-dist/index.html b/web/eleventy-dist/index.html
new file mode 100644
index 00000000..6fcd7925
--- /dev/null
+++ b/web/eleventy-dist/index.html
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+
+ Home - Amplify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/eleventy-dist/js/country-autocomplete.min.js b/web/eleventy-dist/js/country-autocomplete.min.js
new file mode 100644
index 00000000..21ef6485
--- /dev/null
+++ b/web/eleventy-dist/js/country-autocomplete.min.js
@@ -0,0 +1 @@
+!function(){var e={10:function(e){var t;window,t=function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=37)}([function(e,t,n){var r=n(1),o=n(6),i=n(7),u=n(16),a=n(18),l="prototype",s=function(e,t,n){var c,p,f,d,h=e&s.F,v=e&s.G,m=e&s.S,y=e&s.P,g=e&s.B,_=v?r:m?r[t]||(r[t]={}):(r[t]||{})[l],b=v?o:o[t]||(o[t]={}),w=b[l]||(b[l]={});for(c in v&&(n=t),n)f=((p=!h&&_&&void 0!==_[c])?_:n)[c],d=g&&p?a(f,r):y&&"function"==typeof f?a(Function.call,f):f,_&&u(_,c,f,e&s.U),b[c]!=f&&i(b,c,d),y&&w[c]!=f&&(w[c]=f)};r.core=o,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,e.exports=s},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,n){e.exports=!n(4)((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){"use strict";n.r(t),n.d(t,"h",(function(){return a})),n.d(t,"createElement",(function(){return a})),n.d(t,"cloneElement",(function(){return c})),n.d(t,"Component",(function(){return L})),n.d(t,"render",(function(){return B})),n.d(t,"rerender",(function(){return h})),n.d(t,"options",(function(){return o}));var r=function(){},o={},i=[],u=[];function a(e,t){var n,a,l,s,c=u;for(s=arguments.length;2l;)r(a,n=t[l++])&&(~i(s,n)||s.push(n));return s}},function(e,t,n){var r=n(25),o=Math.max,i=Math.min;e.exports=function(e,t){return(e=r(e))<0?o(e+t,0):i(e,t)}},function(e,t){e.exports=!1},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){t.f={}.propertyIsEnumerable},function(e,t,n){var r=n(48);e.exports=function(e,t){return new(r(e))(t)}},function(e,t,n){var r=n(2),o=n(33),i=n(34)("species");e.exports=function(e){var t;return o(e)&&("function"!=typeof(t=e.constructor)||t!==Array&&!o(t.prototype)||(t=void 0),r(t)&&null===(t=t[i])&&(t=void 0)),void 0===t?Array:t}},function(e,t,n){"use strict";var r=n(0),o=n(32)(2);r(r.P+r.F*!n(13)([].filter,!0),"Array",{filter:function(e){return o(this,e,arguments[1])}})},function(e,t,n){var r=n(0);r(r.S,"Array",{isArray:n(33)})},function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0,n(14),n(36),n(30),n(31),n(35),n(55),n(58);var r=n(5),o=u(n(60)),i=u(n(61));function u(e){return e&&e.__esModule?e:{default:e}}function a(){return(a=Object.assign||function(e){for(var t=1;t=r;this.setState({query:a,ariaHint:l}),i||!l&&s&&c?o(a,(function(e){var n=0=i&&0=s,T=this.props.showNoOptionsFound&&A&&j&&L&&B,D=i+"__wrapper",F=i+"__input",R=null!==O?" "+F+"--focused":"",V=this.props.showAllValues?" "+F+"--show-all-values":" "+F+"--default",U=i+"__dropdown-arrow-down",q=-1!==O&&null!==O,W=i+"__menu",H=W+"--"+u,K=W+"--"+(S||T?"visible":"hidden"),z=i+"__option",Q=i+"__hint",G=this.templateInputValue(E[N]),$=G&&0===G.toLowerCase().indexOf(M.toLowerCase())&&k?M+G.substr(M.length):"",J=l+"__assistiveHint",X=I?{"aria-describedby":J}:null;return h&&"string"==typeof(e=w({className:U}))&&(e=(0,r.createElement)("div",{className:i+"__dropdown-arrow-down-wrapper",dangerouslySetInnerHTML:{__html:e}})),(0,r.createElement)("div",{className:D,onKeyDown:this.handleKeyDown},(0,r.createElement)(o.default,{id:l,length:E.length,queryLength:M.length,minQueryLength:s,selectedOption:this.templateInputValue(E[N]),selectedOptionIndex:N,validChoiceMade:P,isInFocus:null!==this.state.focused,tQueryTooShort:m,tNoResults:y,tSelectedOption:g,tResults:_}),$&&(0,r.createElement)("span",null,(0,r.createElement)("input",{className:Q,readonly:!0,tabIndex:"-1",value:$})),(0,r.createElement)("input",a({"aria-expanded":S?"true":"false","aria-activedescendant":!!q&&l+"__option--"+O,"aria-owns":l+"__listbox","aria-autocomplete":this.hasAutoselect()?"both":"list"},X,{autoComplete:"off",className:""+F+R+V,id:l,onClick:function(e){return t.handleInputClick(e)},onBlur:this.handleInputBlur},function(e){return{onInput:e}}(this.handleInputChange),{onFocus:this.handleInputFocus,name:p,placeholder:f,ref:function(e){t.elementReferences[-1]=e},type:"text",role:"combobox",required:d,value:M})),e,(0,r.createElement)("ul",{className:W+" "+H+" "+K,onMouseLeave:function(e){return t.handleListMouseLeave(e)},id:l+"__listbox",role:"listbox"},E.map((function(e,n){var o=(-1===O?N===n:O===n)&&null===C?" "+z+"--focused":"",i=n%2?" "+z+"--odd":"",u=c()?" '+(n+1)+" of "+E.length+"":"";return(0,r.createElement)("li",{"aria-selected":O===n?"true":"false",className:""+z+o+i,dangerouslySetInnerHTML:{__html:t.templateSuggestion(e)+u},id:l+"__option--"+n,key:n,onBlur:function(e){return t.handleOptionBlur(e,n)},onClick:function(e){return t.handleOptionClick(e,n)},onMouseDown:t.handleOptionMouseDown,onMouseEnter:function(e){return t.handleOptionMouseEnter(e,n)},ref:function(e){t.elementReferences[n]=e},role:"option",tabIndex:"-1","aria-posinset":n+1,"aria-setsize":E.length})})),T&&(0,r.createElement)("li",{className:z+" "+z+"--no-results"},v())),(0,r.createElement)("span",{id:J,style:{display:"none"}},b()))},t}(r.Component);(t.default=p).defaultProps={autoselect:!1,cssNamespace:"autocomplete",defaultValue:"",displayMenu:"inline",minLength:0,name:"input-autocomplete",placeholder:"",onConfirm:function(){},confirmOnBlur:!0,showNoOptionsFound:!0,showAllValues:!1,required:!1,tNoResults:function(){return"No results found"},tAssistiveHint:function(){return"When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures."},dropdownArrow:i.default}},function(e,t,n){var r=n(9),o=n(53),i=n(28),u=n(26)("IE_PROTO"),a=function(){},l="prototype",s=function(){var e,t=n(15)("iframe"),r=i.length;for(t.style.display="none",n(54).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
