router.push('/credit-cards')}>Back to Quick contact
-
+
Income & savings
{validationErrors.length >= 1 && }
@@ -62,7 +62,7 @@ export default function IncomeAndSavings() {
router.push('/credit-cards/income-and-savings')}>
Back to Income and savings
-
+
Loans & cards
{validationErrors.length >= 1 && }
diff --git a/apps/protoform/src/app/credit-cards/page.tsx b/apps/protoform/src/app/credit-cards/page.tsx
index 2f067c104..e5d7ce9e7 100644
--- a/apps/protoform/src/app/credit-cards/page.tsx
+++ b/apps/protoform/src/app/credit-cards/page.tsx
@@ -1,6 +1,7 @@
'use client';
import { Alert, Form, FormGroup, FormSection, Input, InputGroup } from '@westpac/ui';
+import { BookIcon } from '@westpac/ui/icon';
import { useRouter } from 'next/navigation';
import { FormEvent, useEffect, useState } from 'react';
@@ -47,10 +48,10 @@ export default function CreditCards() {
return (
router.push('/')}>Back to dashboard
-
- Quick Contact
+
+ Quick contact
-
+ We will save your application for 14 days in case you want to retrieve and complete it later.
{validationErrors.length >= 1 && }
@@ -61,7 +62,7 @@ export default function CreditCards() {
size="large"
instanceId="name"
label="Given name"
- hint="As shown on your ID"
+ hint="To help us verify your identity online, please enter your name exactly as it appears on your ID."
errorMessage={nameError}
>
diff --git a/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx b/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx
index 10459736c..8152cc65f 100644
--- a/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx
+++ b/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx
@@ -82,7 +82,9 @@ export default function Address() {
return (
router.push('/credit-cards/address')}>Back to Address
- Review and submit
+
+ Review and submit
+
@@ -12,7 +12,9 @@
Status
-
+
+ Other name
+
@@ -23,7 +25,9 @@
Available
+
+
@@ -32,7 +36,9 @@
Older version available - Upgrade in backlog
-
+
+
Typeahead
+
@@ -41,7 +47,9 @@
Older version available
-
+
+
Typeahead
+
diff --git a/apps/site/src/content/design-system/components/button-group/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/components/button-group/design/dos-and-donts/content.mdoc
index 83f222b42..15b8a6463 100644
--- a/apps/site/src/content/design-system/components/button-group/design/dos-and-donts/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-group/design/dos-and-donts/content.mdoc
@@ -1,3 +1,3 @@
- Only use up to 3 items in a group
- Do keep the labels short to aid scanability and avoid text wrapping
-- If you have long labels, or more than 3 options, use [radio buttons](/components/radios).
+- If you have long labels, or more than 3 options, use [radio buttons](/components/radio-group).
diff --git a/apps/site/src/content/design-system/components/input/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/input/code/development-examples/content.mdoc
index 20ccc73b8..51bf85e6c 100644
--- a/apps/site/src/content/design-system/components/input/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/input/code/development-examples/content.mdoc
@@ -3,106 +3,61 @@
```tsx
-
+
Default
-
-
-
+
```
----
-
-### Input sizes
+### Text area sizes
```tsx
() => {
const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
return (
-
-
- {SIZES.map(size => (
-
-
-
- ))}
-
-
- {SIZES.map(size => (
-
-
-
- ))}
-
+
+
+
{SIZES.map(size => (
-
+
))}
-
+
);
};
```
----
-
### Different status
```jsx
-
-
Invalid
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
+
+ Invalid
+
+
-
+
+
+
+ Disabled
+
+
-
+
-
-
-
Read only
+
+ Read-only
+
+
-
-
-
-
-
+
```
diff --git a/apps/site/src/content/design-system/components/link/design/standalone/content.mdoc b/apps/site/src/content/design-system/components/link/design/standalone/content.mdoc
index dbfa46260..052122e05 100644
--- a/apps/site/src/content/design-system/components/link/design/standalone/content.mdoc
+++ b/apps/site/src/content/design-system/components/link/design/standalone/content.mdoc
@@ -1,4 +1,4 @@
-The standalone option is to be used by itself, on its own line, and never within a sentence or paragraph. It must always be used with an [icon](/foundation/icons) before or after. The styling for a standalone link is "Text" colour text and "Link" colour icon. The underline appears on hover.
+The standalone option is to be used by itself, on its own line, and never within a sentence or paragraph. It must always be used with an [icon](/foundation/icon) before or after. The styling for a standalone link is "Text" colour text and "Link" colour icon. The underline appears on hover.
```jsx
diff --git a/apps/site/src/content/design-system/components/link/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/link/design/user-experience/content.mdoc
index 313015017..c953f5ee2 100644
--- a/apps/site/src/content/design-system/components/link/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/link/design/user-experience/content.mdoc
@@ -6,4 +6,4 @@ Standalone links produce an underline for the text on hover while inline links r
### Link lists
-The most accessible way to present a list of links is to use the [List component](/components/lists). It can be configured as a list of links which is better for screen reader users to navigate.
+The most accessible way to present a list of links is to use the [List component](/components/list). It can be configured as a list of links which is better for screen reader users to navigate.
diff --git a/apps/site/src/content/design-system/components/list/design/visual-design/content.mdoc b/apps/site/src/content/design-system/components/list/design/visual-design/content.mdoc
index 498d2caca..ceb48b5fe 100644
--- a/apps/site/src/content/design-system/components/list/design/visual-design/content.mdoc
+++ b/apps/site/src/content/design-system/components/list/design/visual-design/content.mdoc
@@ -1,6 +1,6 @@
Lists are arguably the most common UI element on the web so it’s important to have a flexible, robust and well-crafted solution.
-We’ve extended the browsers default list styling and provided the option to use custom bullets or [icons](/foundation/icons) in any configuration. Although this provides more options and more flexibility it’s still important to adhere to the design system requirements, particularly when creating list items that are hyperlinks.
+We’ve extended the browsers default list styling and provided the option to use custom bullets or [icons](/foundation/icon) in any configuration. Although this provides more options and more flexibility it’s still important to adhere to the design system requirements, particularly when creating list items that are hyperlinks.
The Design system uses Primary (accent) colour to define hyperlinks etc. As a result the List Link component uses a (Primary) Arrow Right icon. Similarly if you needed a list of downloadable PDF’s you could use the Icon List component and assign a (Primary) PDF icon to each item in the list to indicate that these are links.
diff --git a/apps/site/src/content/design-system/components/panel/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/panel/design/user-experience/content.mdoc
index 540134785..7aed3e305 100644
--- a/apps/site/src/content/design-system/components/panel/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/panel/design/user-experience/content.mdoc
@@ -1 +1 @@
-Panels are designed to group content either for visual structure or as a design requirement. They have optional headers and footers which can be used to associate actions with your grouped content. Panels can be grouped forming a [tabcordion](/components/tabcordions), or can be stripped back visually and functionally as a [well](/components/wells) for a more subtle content experience.
+Panels are designed to group content either for visual structure or as a design requirement. They have optional headers and footers which can be used to associate actions with your grouped content.
diff --git a/apps/site/src/content/design-system/components/progress-bar/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/progress-bar/design/user-experience/content.mdoc
index 6f61bced7..6f9e7ef2e 100644
--- a/apps/site/src/content/design-system/components/progress-bar/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/progress-bar/design/user-experience/content.mdoc
@@ -11,4 +11,4 @@ On the surface the Progress bar component appears to be a simple way to display
- It is very difficult to provide a precise indication of exactly how far the user has moved through the form, as indicated by percentage
- The presence of a percentage based number indicates a precision that cannot be reflected. How is the percentage calculated? Does the bar move as each question is asked? Or as each page is completed?
-GEL recommends using the [Progress-Rope](/components/progress-rope) component to help a user move through a form with confidence. This component provides the user with a clear understanding of their orientation and the ability to move forward and backwards through the form process.
+GEL recommends using the [Progress rope](/components/progress-rope) component to help a user move through a form with confidence. This component provides the user with a clear understanding of their orientation and the ability to move forward and backwards through the form process.
diff --git a/apps/site/src/content/design-system/components/radio-group/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/user-experience/content.mdoc
index 80f47534b..a90f8eb85 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/user-experience/content.mdoc
@@ -1,6 +1,6 @@
Radios should be used when asking a user to select only one item from a list. They have a mutually exclusive, toggle functionality. Once a radio list has had an item selected, it cannot go back to having none selected, so if you need the user to acknowledge a non-selection it is best to include an option like ‘None of these’ in the list.
-For simple yes/no questions, a possible alternative to a radio list could be a [Button Group](/components/button-groups).
+For simple yes/no questions, a possible alternative to a radio list could be a [Button Group](/components/button-group).
### Default selections
diff --git a/apps/site/src/content/design-system/components/select/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/select/code/development-examples/content.mdoc
index 6f95337f6..59accf1d8 100644
--- a/apps/site/src/content/design-system/components/select/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/select/code/development-examples/content.mdoc
@@ -11,8 +11,6 @@
```
----
-
### Select sizes
```tsx
@@ -35,8 +33,6 @@
};
```
----
-
### Different status
```jsx
diff --git a/apps/site/src/content/design-system/components/selector/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/selector/design/user-experience/content.mdoc
index eef81916a..727509e80 100644
--- a/apps/site/src/content/design-system/components/selector/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/selector/design/user-experience/content.mdoc
@@ -1,6 +1,6 @@
The Selector is a component for helping users make a choice about a product, usually at the acquisition stage, or at the service end as the large container helps distinguish it from a form control (despite it being a big radio or checkbox!).
-In order to be accessible, [radios](/components/radios) and [checkboxes](/components/checkboxes) need a fieldset legend—essentially a descriptive label above the choices that gives context to the options presented which is also beneficial from a usability standpoint.
+In order to be accessible, [radios](/components/radio-group) and [checkboxes](/components/checkbox-group) need a fieldset legend—essentially a descriptive label above the choices that gives context to the options presented which is also beneficial from a usability standpoint.
As the Selector can be used as a radio or checkbox, we strongly recommend making that distinction in the label. Eg, “Select one account below” or “Select all accounts below that apply”.
diff --git a/apps/site/src/content/design-system/components/selector/design/visual-design/content.mdoc b/apps/site/src/content/design-system/components/selector/design/visual-design/content.mdoc
index 6b096882f..0941c3d48 100644
--- a/apps/site/src/content/design-system/components/selector/design/visual-design/content.mdoc
+++ b/apps/site/src/content/design-system/components/selector/design/visual-design/content.mdoc
@@ -2,6 +2,6 @@ The selector border radius needs to be accessible and so uses the Border Dark co
The labels inside and hint text follow the established sizing and weight conventions we use in all our form controls.
-While [icons](/foundation/icons) and [pictograms](/foundation/pictograms) can be used, be careful not to rely on them to convey the primary meaning of the content. They are available to be used as a supplementary visual cue. Be aware with pictograms that at small sizes they lose some of their detail and in turn their effectiveness as a communication device.
+While [icons](/foundation/icon) and [pictograms](/foundation/pictogram) can be used, be careful not to rely on them to convey the primary meaning of the content. They are available to be used as a supplementary visual cue. Be aware with pictograms that at small sizes they lose some of their detail and in turn their effectiveness as a communication device.
When the selector is used with the chevron, on desktop devices it will produce a micro-interaction on hover by shifting 10px to the right. This helps inform users that when selected, they will navigate to another page or screen, matching the established convention in all Westpac Group brands.
diff --git a/apps/site/src/content/design-system/components/table/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/table/design/user-experience/content.mdoc
index 7759f60d9..3fd6460ed 100644
--- a/apps/site/src/content/design-system/components/table/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/table/design/user-experience/content.mdoc
@@ -2,7 +2,7 @@ There are several versions of tables from basic to striped row to bordered. Basi
Avoid having large amounts of content in an individual cell, if you are finding your content cannot easily fit in to the table cells, revisit your data and content, and look for other ways to communicate or solve your problem.
-If required, you can use a table component within a [Panel](/components/panels).
+If required, you can use a table component within a [Panel](/components/panel).
### Responsive tables
diff --git a/apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc b/apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc
index 7e18ed1c7..06371375f 100644
--- a/apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc
+++ b/apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc
@@ -1,4 +1,4 @@
-**Default tabset:** See Visual design for the usage recommendations for the default style. Tabsets can appear both ranged to the right, or justified.
+**Default tabs:** See Visual design for the usage recommendations for the default style. Tabs can appear both ranged to the right, or justified.
```jsx
@@ -14,7 +14,7 @@ The Rat said nothing, but stooped and unfastened a rope and hauled on it; then l
```
-**Lego tabset:** See Visual design for the usage recommendations for the lego style. Tabsets can appear both ranged to the right, or justified.
+**Lego tabs:** See Visual design for the usage recommendations for the lego style. Tabs can appear both ranged to the right, or justified.
```jsx
@@ -30,7 +30,7 @@ The Rat said nothing, but stooped and unfastened a rope and hauled on it; then l
```
-**Responsive tabcordion:** This a responsive component that can render as either a tabs or an [accordion](components/accordion), depending on the screen width available. The tabcordion, can appear in either the default or lego style, see Visual design for the usage recommendations for either style.
+**Responsive tabcordion:** This a responsive component that can render as either a tabs or an [accordion](/components/accordion), depending on the screen width available. The tabcordion, can appear in either the default or lego style, see Visual design for the usage recommendations for either style.
```jsx
<>
diff --git a/apps/site/src/content/design-system/components/tabs/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/tabs/design/user-experience/content.mdoc
index 423b2175e..26614faca 100644
--- a/apps/site/src/content/design-system/components/tabs/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/tabs/design/user-experience/content.mdoc
@@ -1,8 +1,8 @@
The Tabs component has two modes:
-1. **Tabset** – traditional horizontal tabs, allowing only one content panel to be visible at a time, by selecting the relevant tab.
+1. **Tabs** – traditional horizontal tabs, allowing only one content panel to be visible at a time, by selecting the relevant tab.
1. **Tabcordion** – a responsive combination of accordions and tabs.
-‘Tabcordion’ is the term we use to describe a responsive tab set. When using a Tabset in our web applications we typically experience layout issues when the application needs to display on small viewports (phones). Often the tabs won’t fit horizontally in the limited screen size. To remedy this problem, we developed the Tabcordion where the Tabset will turn into an Accordion when viewed on smaller devices (phones).
+‘Tabcordion’ is the term we use to describe responsive tabs. When using a tabs in our web applications we typically experience layout issues when the application needs to display on small viewports (phones). Often the tabs won’t fit horizontally in the limited screen size. To remedy this problem, we developed the Tabcordion where the Tabs will turn into an Accordion when viewed on smaller devices (phones).
This component is useful when trying to simplify and group content for users to view when they need it, as opposed to displaying everything at once.
diff --git a/apps/site/src/content/design-system/components/tabs/design/visual-design/content.mdoc b/apps/site/src/content/design-system/components/tabs/design/visual-design/content.mdoc
index da4fa211d..871e76694 100644
--- a/apps/site/src/content/design-system/components/tabs/design/visual-design/content.mdoc
+++ b/apps/site/src/content/design-system/components/tabs/design/visual-design/content.mdoc
@@ -1,7 +1,7 @@
-Tabset, Accordions and Tabcordions, can have one of two styles applied to them *Default* and *Lego*:
+Tabs and Accordions can have one of two styles applied to them *Default* and *Lego*:
The **Default style** is designed to be subtle and understated while still providing a clear indication of which tab or accordion bar is selected, and its related content. To further reinforce this relationship a transition is used to display related content when a tab or accordion bar is selected. Generous padding provides a larger hit area and important breathing space to provide emphasis without adding noise.
-The **Lego tabset** is designed to be more prominent. This design came out of a project request for a more emphasised component which would also add some brand colour to an otherwise dry, text heavy interface.
+The **Lego tabs** are designed to be more prominent. This design came out of a project request for a more emphasised component which would also add some brand colour to an otherwise dry, text heavy interface.
Tab sets and accordions are intended to visually group related content. When used correctly with moderate content they do this extremely well. However, if too much content is used it becomes difficult to visualise this relationship as content extends below the viewport.
diff --git a/apps/site/src/content/design-system/components/tabs/index.yaml b/apps/site/src/content/design-system/components/tabs/index.yaml
index c1b267c1f..a33c932a4 100644
--- a/apps/site/src/content/design-system/components/tabs/index.yaml
+++ b/apps/site/src/content/design-system/components/tabs/index.yaml
@@ -7,7 +7,7 @@ namedExport:
excludeFromNavbar: false
design:
- title:
- name: Tabset
+ name: Tabs
slug: tabset
noTitle: false
- title:
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc
index c117a9822..da3ee42b0 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc
@@ -28,7 +28,7 @@ Guides
```
-Holidays - see [People & Diversity](/content/people-diversity) for more.
+Holidays - see [People & Diversity](/content/guidelines/people-diversity) for more.
```jsx
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc
index bccd81430..a5bba063a 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc
@@ -9,12 +9,7 @@ Headings always use sentence-case (not title-case), excluding H1 page headings w
Don't: Get $3K Cashback When You Refinance To Us
-
- Note: No full stops on the end of any headings – see{' '}
-
- Headings and subheadings
-
- .
-
```
+
+*Note: No full stops on the end of any headings - see* [*Headings and subheadings*](/content/guidelines/headings-subheading)*.*
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml b/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml
index adfe00e74..e46ffedcc 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml
@@ -4,6 +4,7 @@ description: >-
nouns.
namedExport:
discriminant: false
+excludeFromNavbar: false
design:
- title:
name: Headings
diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc
index a3b2212ea..44565d7a4 100644
--- a/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc
+++ b/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc
@@ -31,7 +31,7 @@ Consider your audience when using words like ‘very’, ‘really’, ‘highly
```
-Avoid industry jargon, complex language or [abbreviations](/content/abbreviations) that aren’t commonly used. If it’s necessary to use any of these, consider including an explanation.
+Avoid industry jargon, complex language or [abbreviations](/content/guidelines/abbreviation) that aren’t commonly used. If it’s necessary to use any of these, consider including an explanation.
Don't use slang to shorten words.
@@ -267,7 +267,6 @@ Refer to our brand terminology for more information.
Do - Use clear call to action labels
```
-
{% /layout-area %}
{% layout-area %}
@@ -280,6 +279,5 @@ Refer to our brand terminology for more information.
Avoid - Using double negative labels
```
-
{% /layout-area %}
{% /layout %}
diff --git a/apps/site/src/content/design-system/content/writing-for-digital/index.yaml b/apps/site/src/content/design-system/content/writing-for-digital/index.yaml
index a36feedb1..e3b9681e7 100644
--- a/apps/site/src/content/design-system/content/writing-for-digital/index.yaml
+++ b/apps/site/src/content/design-system/content/writing-for-digital/index.yaml
@@ -5,6 +5,7 @@ description: >-
simplest way possible.
namedExport:
discriminant: false
+excludeFromNavbar: false
design:
- title:
name: Why our words matter
diff --git a/apps/site/src/content/design-system/foundation/colour/design/data-visualisation-colours/content.mdoc b/apps/site/src/content/design-system/foundation/colour/design/data-visualisation-colours/content.mdoc
index 978427a34..2811bc139 100644
--- a/apps/site/src/content/design-system/foundation/colour/design/data-visualisation-colours/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/colour/design/data-visualisation-colours/content.mdoc
@@ -1 +1,5 @@
-{% colors palette="data_visualisation" /%}
\ No newline at end of file
+The data visualisation colour palette gives each brand a set of 6 colours (A-F). Each colour has a corresponding 50% tint and 30% opacity. This set of 18 colours provides enormous scope and flexibility for a wide range of complex data visualisations. The first 4 colours (A–D) are the main set and should ALWAYS be the first choice. The last 2 colours (E–F) are backup colours and must ONLY be used as a last resort for charts that require more than 4 categories. These colours are reserved and must only be used for Data Visualisation (charts and graphs).
+
+Learn more about the [Data Visualisation](/articles/data-visualisation) system.
+
+{% colors palette="data_visualisation" /%}
diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
index 26d884972..009cf3455 100644
--- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
@@ -23,4 +23,4 @@ The error message should always sit above the input field to give context. The e
);
};
-```
\ No newline at end of file
+```
diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
index ae893cd79..2a2fdcc59 100644
--- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
@@ -1,6 +1,6 @@
### Base pattern
-This pattern simplifies address capture to the most basic elements, without the need for extra functionality. It can be used on it own or within other more complex patterns eg as the manual entry option for [Auto-address](/patterns/address/auto-address).
+This pattern simplifies address capture to the most basic elements, without the need for extra functionality. It can be used on it own or within other more complex patterns eg as the manual entry option for Auto-address.
```tsx
```
@@ -16,8 +14,6 @@ This variation includes an option to select a TFN that has been provided previou
```tsx
```