From 9911cfe04e7bf6f8b73fb2ac16c297a39f6e1d7d Mon Sep 17 00:00:00 2001
From: Jeremy Ortiz <jeremy.ortiz@westpac.com.au>
Date: Wed, 6 Dec 2023 08:40:02 +1100
Subject: [PATCH] feature(site): update article layouts and fix some content
 bugs

---
 apps/site/keystatic.config.ts                 |   5 +-
 apps/site/src/app/(home)/page.tsx             |   2 +-
 .../article-page/article-page.component.tsx   |  54 ++++----
 .../components/document-renderer.tsx          |   3 +-
 .../components/heading/heading.style.ts       |  14 +--
 .../[article]/components/image/image.style.ts |   2 +-
 .../[article]/components/layout/index.ts      |   2 +
 .../components/layout/layout.component.tsx    |  25 ++++
 .../components/layout/layout.styles.ts        |  10 ++
 .../components/layout/layout.types.ts         |  11 ++
 .../components/layout/layout.utils.ts         |  38 ++++++
 .../src/app/articles/[article]/layout.tsx     |   2 +-
 .../article-component-blocks.tsx              |   8 ++
 .../article-body-image.component.tsx          |  15 ++-
 .../article-body-image.style.ts               |   2 +-
 .../article-body-image.types.ts               |   3 +
 .../article-body-image.utils.ts               |  26 ++++
 .../leading-text/leading-text.style.ts        |   2 +-
 .../document-renderer/list/list.style.ts      |  11 +-
 .../paragraph/paragraph.style.ts              |   3 +-
 .../collaborate-for-change/content.mdoc       |   2 +-
 .../articles/data-visualisation/content.mdoc  |  86 ++++++-------
 .../content/articles/iconography/content.mdoc |  77 ++++++------
 .../articles/master-reference-page.yaml       |  15 +++
 .../master-reference-page/content.mdoc        | 117 ++++++++++++++++++
 .../multi-brand-made-easy/content.mdoc        |  14 +--
 .../content/articles/the-grid/content.mdoc    |   8 +-
 .../articles/think-responsive/content.mdoc    |   2 +-
 .../content/articles/typography/content.mdoc  |   4 +-
 .../content/articles/what-is-gel/content.mdoc |   4 +-
 30 files changed, 414 insertions(+), 153 deletions(-)
 create mode 100644 apps/site/src/app/articles/[article]/components/layout/index.ts
 create mode 100644 apps/site/src/app/articles/[article]/components/layout/layout.component.tsx
 create mode 100644 apps/site/src/app/articles/[article]/components/layout/layout.styles.ts
 create mode 100644 apps/site/src/app/articles/[article]/components/layout/layout.types.ts
 create mode 100644 apps/site/src/app/articles/[article]/components/layout/layout.utils.ts
 create mode 100644 apps/site/src/components/component-blocks/components/article-body-image/article-body-image.utils.ts
 create mode 100644 apps/site/src/content/articles/master-reference-page.yaml
 create mode 100644 apps/site/src/content/articles/master-reference-page/content.mdoc

diff --git a/apps/site/keystatic.config.ts b/apps/site/keystatic.config.ts
index 3d928327b..b36499b3f 100644
--- a/apps/site/keystatic.config.ts
+++ b/apps/site/keystatic.config.ts
@@ -254,7 +254,10 @@ export default config({
           links: true,
           label: 'Design',
           componentBlocks: ArticleComponentBlocks,
-          layouts: [[6, 6]],
+          layouts: [
+            [4, 4],
+            [5, 5],
+          ],
           images: {
             directory: 'public/images/articles/content',
             publicPath: '/images/articles/content',
diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
index 62a6a36a6..8d31dd3d8 100644
--- a/apps/site/src/app/(home)/page.tsx
+++ b/apps/site/src/app/(home)/page.tsx
@@ -30,7 +30,7 @@ export default async function Homepage() {
   );
 
   return (
-    <main className="pb-8 font-gel-sans">
+    <main className="pb-8 font-gel-sans text-gel-text">
       <Hero />
       <ActionBar />
       <HomePageContent articleRows={articleRows} />
diff --git a/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx b/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx
index eed2ad931..78f1e8d62 100644
--- a/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx
+++ b/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx
@@ -14,39 +14,35 @@ import { type ArticlePageProps } from './article-page.types';
 export function ArticlePage({ article, author }: ArticlePageProps) {
   return (
     <>
-      <div>
-        <div className="bg-gradient-to-b from-white from-25% to-gel-background">
-          <Container className=" pt-8 xsl:pt-10 sm:pt-11">
-            <Grid className="gap-y-5 xsl:gap-y-6 sm:gap-y-8">
-              <div className="col-span-12">
-                <h1 className="typography-site-6 mb-2 font-black !leading-[1.1] tracking-[-1px] xsl:typography-site-3 xsl:mb-3">
-                  {article.name}
-                </h1>
-                <p className="typography-site-9 text-gel-muted">{author?.name}</p>
-              </div>
-              <div className="col-span-12 mb-7 xsl:mb-9">
-                {article.image && (
-                  <figure>
-                    <img alt={article.name} src={article.image} className="block h-auto w-full" />
-                  </figure>
-                )}
-              </div>
-            </Grid>
-          </Container>
-        </div>
-        <Container>
-          <Grid>
-            <div className="col-span-12 pb-14.5 xsl:col-span-10 xsl:col-start-2 md:col-span-8 md:col-start-3">
-              <LeadingText text={article.description} />
-              <DocumentRenderer
-                document={article.content}
-                renderers={DOCUMENT_RENDERERS}
-                componentBlocks={ArticleComponentBlocksComponents}
-              />
+      <div className="bg-gradient-to-b from-white from-25% to-gel-background">
+        <Container className=" pt-8 xsl:pt-10 sm:pt-11">
+          <Grid className="gap-y-5 xsl:gap-y-6 sm:gap-y-8">
+            <div className="col-span-12">
+              <h1 className="typography-site-6 mb-2 font-black !leading-[1.1] tracking-[-1px] xsl:typography-site-3 xsl:mb-3">
+                {article.name}
+              </h1>
+              <p className="typography-site-9 text-gel-muted">{author?.name}</p>
+            </div>
+            <div className="col-span-12 mb-7 xsl:mb-9">
+              {article.image && (
+                <figure>
+                  <img alt={article.name} src={article.image} className="block h-auto w-full" />
+                </figure>
+              )}
             </div>
           </Grid>
         </Container>
       </div>
+      <Container className="pb-8 xsl:pb-10 sm:pb-11">
+        <Grid className="gap-y-0 xsl:gap-y-0 sm:gap-y-0">
+          <LeadingText text={article.description} />
+          <DocumentRenderer
+            document={article.content}
+            renderers={DOCUMENT_RENDERERS}
+            componentBlocks={ArticleComponentBlocksComponents}
+          />
+        </Grid>
+      </Container>
       <StickyFooter />
     </>
   );
diff --git a/apps/site/src/app/articles/[article]/components/document-renderer.tsx b/apps/site/src/app/articles/[article]/components/document-renderer.tsx
index 4fc91f20a..917f7290e 100644
--- a/apps/site/src/app/articles/[article]/components/document-renderer.tsx
+++ b/apps/site/src/app/articles/[article]/components/document-renderer.tsx
@@ -2,14 +2,15 @@ import { DocumentRendererProps } from '@keystatic/core/renderer';
 
 import { Code as InlineCode, Link } from '@/components/content-blocks/typography';
 import { Blockquote, Code, Divider, List, Paragraph } from '@/components/document-renderer';
-import { Layout } from '@/components/document-renderer/layout/layout.component';
 
 import { Heading } from './heading';
 import { Image } from './image';
+import { Layout } from './layout';
 
 export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] = {
   block: {
     divider: Divider,
+    block: ({ children }) => <>{children}</>,
     paragraph: props => <Paragraph {...props} type="graphik" />,
     code: Code,
     heading: Heading,
diff --git a/apps/site/src/app/articles/[article]/components/heading/heading.style.ts b/apps/site/src/app/articles/[article]/components/heading/heading.style.ts
index 1f6e41115..2e65f248e 100644
--- a/apps/site/src/app/articles/[article]/components/heading/heading.style.ts
+++ b/apps/site/src/app/articles/[article]/components/heading/heading.style.ts
@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'mt-7 font-bold xsl:mt-9',
+  base: 'col-span-12 font-bold xsl:col-span-10 xsl:col-start-2 md:col-span-8 md:col-start-3',
   variants: {
     textAlign: {
       left: 'text-left',
@@ -9,12 +9,12 @@ export const styles = tv({
       end: 'text-right',
     },
     level: {
-      1: 'typography-site-5 mb-5',
-      2: 'typography-site-7 mb-4 !leading-loose xsl:typography-site-6 xsl:mb-5',
-      3: 'typography-site-7 mb-5',
-      4: 'typography-site-9 mb-5',
-      5: 'typography-site-10 mb-2',
-      6: 'typography-site-10 mb-2',
+      1: 'typography-site-5',
+      2: 'typography-site-7 mb-4 leading-[1.3] xsl:typography-site-6 xsl:mb-5 xsl:leading-[1.3]',
+      3: 'typography-site-8 mb-3 leading-[1.3] xsl:typography-site-7 xsl:leading-[1.3]',
+      4: 'typography-site-8 mb-3 leading-[1.3]',
+      5: 'typography-site-10',
+      6: 'typography-site-10',
     },
   },
 });
diff --git a/apps/site/src/app/articles/[article]/components/image/image.style.ts b/apps/site/src/app/articles/[article]/components/image/image.style.ts
index ca213d4d7..0033cc086 100644
--- a/apps/site/src/app/articles/[article]/components/image/image.style.ts
+++ b/apps/site/src/app/articles/[article]/components/image/image.style.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'relative mx-0 my-4 only:my-0',
+    base: 'relative',
     img: 'block',
     caption: 'typography-site-10 mt-2 text-gel-muted',
   },
diff --git a/apps/site/src/app/articles/[article]/components/layout/index.ts b/apps/site/src/app/articles/[article]/components/layout/index.ts
new file mode 100644
index 000000000..6057beac4
--- /dev/null
+++ b/apps/site/src/app/articles/[article]/components/layout/index.ts
@@ -0,0 +1,2 @@
+export * from './layout.component';
+export * from './layout.types';
diff --git a/apps/site/src/app/articles/[article]/components/layout/layout.component.tsx b/apps/site/src/app/articles/[article]/components/layout/layout.component.tsx
new file mode 100644
index 000000000..7876c61ab
--- /dev/null
+++ b/apps/site/src/app/articles/[article]/components/layout/layout.component.tsx
@@ -0,0 +1,25 @@
+import { Item } from '@westpac/ui';
+
+import { styles } from './layout.styles';
+import { type LayoutProps, type Variants } from './layout.types';
+import { layoutMap } from './layout.utils';
+
+export const Layout = ({ children, layout }: LayoutProps) => {
+  return (
+    <>
+      {children.map((child, index) => {
+        const width = layout[index];
+        return (
+          <Item
+            key={index}
+            span={layoutMap[width].span}
+            start={layoutMap[width].start[index]}
+            className={styles({ index: index as Variants['index'] })}
+          >
+            {child}
+          </Item>
+        );
+      })}
+    </>
+  );
+};
diff --git a/apps/site/src/app/articles/[article]/components/layout/layout.styles.ts b/apps/site/src/app/articles/[article]/components/layout/layout.styles.ts
new file mode 100644
index 000000000..71ee946ad
--- /dev/null
+++ b/apps/site/src/app/articles/[article]/components/layout/layout.styles.ts
@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'mb-7 xsl:mb-9',
+  variants: {
+    index: {
+      0: 'mb-4',
+    },
+  },
+});
diff --git a/apps/site/src/app/articles/[article]/components/layout/layout.types.ts b/apps/site/src/app/articles/[article]/components/layout/layout.types.ts
new file mode 100644
index 000000000..93b4638c9
--- /dev/null
+++ b/apps/site/src/app/articles/[article]/components/layout/layout.types.ts
@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './layout.styles.js';
+
+export type LayoutProps = {
+  children: ReactElement[];
+  layout: [number, ...number[]];
+};
+
+export type Variants = VariantProps<typeof styles>;
diff --git a/apps/site/src/app/articles/[article]/components/layout/layout.utils.ts b/apps/site/src/app/articles/[article]/components/layout/layout.utils.ts
new file mode 100644
index 000000000..472331ea9
--- /dev/null
+++ b/apps/site/src/app/articles/[article]/components/layout/layout.utils.ts
@@ -0,0 +1,38 @@
+export const layoutMap: { [key: number]: { span: object; start: { [index: number]: object } } } = {
+  // body
+  4: {
+    span: {
+      initial: 12,
+      xsl: 5,
+      md: 4,
+    },
+    start: {
+      0: {
+        inital: 1,
+        xsl: 2,
+        md: 3,
+      },
+      1: {
+        initial: 1,
+        xsl: 7,
+      },
+    },
+  },
+  //body-wide
+  5: {
+    span: {
+      initial: 12,
+      xsl: 5,
+    },
+    start: {
+      0: {
+        initial: 1,
+        xsl: 2,
+      },
+      1: {
+        intial: 1,
+        xsl: 7,
+      },
+    },
+  },
+};
diff --git a/apps/site/src/app/articles/[article]/layout.tsx b/apps/site/src/app/articles/[article]/layout.tsx
index 0d4e3303d..a4e9d3389 100644
--- a/apps/site/src/app/articles/[article]/layout.tsx
+++ b/apps/site/src/app/articles/[article]/layout.tsx
@@ -2,7 +2,7 @@ import { Header } from './components';
 
 export default function ArticleLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="bg-gel-background pb-8">
+    <div className="bg-gel-background pb-8 text-gel-text">
       <Header />
       <main>{children}</main>
     </div>
diff --git a/apps/site/src/components/component-blocks/article-component-blocks.tsx b/apps/site/src/components/component-blocks/article-component-blocks.tsx
index 354462356..cc0a8d2c9 100644
--- a/apps/site/src/components/component-blocks/article-component-blocks.tsx
+++ b/apps/site/src/components/component-blocks/article-component-blocks.tsx
@@ -32,6 +32,14 @@ export const ArticleComponentBlocks = {
       title: fields.text({
         label: 'Title',
       }),
+      type: fields.select({
+        label: 'Image width',
+        options: [
+          { label: 'Body', value: 'body' },
+          { label: 'Body Wide', value: 'bodyWide' },
+        ],
+        defaultValue: 'body',
+      }),
     },
   }),
   leadingText: component({
diff --git a/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.component.tsx b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.component.tsx
index 4894a0710..419c27887 100644
--- a/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.component.tsx
+++ b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.component.tsx
@@ -1,12 +1,17 @@
+import { Item } from '@westpac/ui/grid';
+
 import { styles as ArticleBodyImageStyles } from './article-body-image.style';
 import { type ArticleBodyImageProps } from './article-body-image.types';
+import { layoutMap } from './article-body-image.utils';
 
-export const ArticleBodyImage = ({ articleBodyImage, alt, title }: ArticleBodyImageProps) => {
+export const ArticleBodyImage = ({ articleBodyImage, alt, title, type = 'body' }: ArticleBodyImageProps) => {
   const styles = ArticleBodyImageStyles({});
   return (
-    <figure className={styles.base({})}>
-      <img className={styles.img({})} loading="lazy" alt={alt} src={articleBodyImage} />
-      {title && <figcaption className={styles.caption({})}>{title}</figcaption>}
-    </figure>
+    <Item span={layoutMap[type].span} start={layoutMap[type].start}>
+      <figure className={styles.base({})}>
+        <img className={styles.img({})} loading="lazy" alt={alt} src={articleBodyImage} />
+        {title && <figcaption className={styles.caption({})}>{title}</figcaption>}
+      </figure>
+    </Item>
   );
 };
diff --git a/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.style.ts b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.style.ts
index 09b28f7ac..42ffc5dbf 100644
--- a/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.style.ts
+++ b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.style.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'relative mx-0 my-7 xsl:my-9 md:-mx-17',
+    base: 'relative mb-7 xsl:mb-9',
     img: 'block w-full',
     caption: 'typography-site-10 mt-2 text-gel-muted',
   },
diff --git a/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.types.ts b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.types.ts
index fcd882046..208354753 100644
--- a/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.types.ts
+++ b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.types.ts
@@ -1,5 +1,8 @@
+export type Width = 'body' | 'bodyWide';
+
 export type ArticleBodyImageProps = {
   alt?: string;
   articleBodyImage?: string;
   title?: string;
+  type?: Width;
 };
diff --git a/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.utils.ts b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.utils.ts
new file mode 100644
index 000000000..318ebf446
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/article-body-image/article-body-image.utils.ts
@@ -0,0 +1,26 @@
+import { type Width } from './article-body-image.types';
+
+export const layoutMap: Record<Width, { span: object; start: object }> = {
+  body: {
+    span: {
+      initial: 12,
+      xsl: 10,
+      md: 8,
+    },
+    start: {
+      initial: 1,
+      xsl: 2,
+      md: 3,
+    },
+  },
+  bodyWide: {
+    span: {
+      initial: 12,
+      xsl: 10,
+    },
+    start: {
+      initial: 1,
+      xsl: 2,
+    },
+  },
+};
diff --git a/apps/site/src/components/component-blocks/components/leading-text/leading-text.style.ts b/apps/site/src/components/component-blocks/components/leading-text/leading-text.style.ts
index 97accf5a2..d3a296948 100644
--- a/apps/site/src/components/component-blocks/components/leading-text/leading-text.style.ts
+++ b/apps/site/src/components/component-blocks/components/leading-text/leading-text.style.ts
@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'typography-site-8 mx-0 mb-7 leading-[1.6] xsl:typography-site-7 xsl:mb-9 xsl:leading-[1.6] md:-mx-17',
+  base: 'typography-site-8 col-span-12 mx-0 mb-7 leading-[1.6] xsl:typography-site-7 xsl:col-span-10 xsl:col-start-2 xsl:mb-9 xsl:leading-[1.6]',
 });
diff --git a/apps/site/src/components/document-renderer/list/list.style.ts b/apps/site/src/components/document-renderer/list/list.style.ts
index 769f52c74..0745bb511 100644
--- a/apps/site/src/components/document-renderer/list/list.style.ts
+++ b/apps/site/src/components/document-renderer/list/list.style.ts
@@ -2,8 +2,8 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'my-4 w-full p-0 leading-[2] last:mb-0',
-    li: 'relative mb-2 pl-[1.1875rem] leading-7',
+    base: 'w-full p-0 leading-[2] last:mb-0',
+    li: 'relative mb-2 leading-7',
   },
   variants: {
     color: {
@@ -16,18 +16,21 @@ export const styles = tv({
     },
     type: {
       ordered: {
-        base: 'list-decimal',
+        base: 'list-decimal ps-[1.25rem]',
+        li: 'last:mb-0',
       },
       unordered: {
         base: '',
-        li: 'leading-[2] before:absolute before:left-[0.25rem] before:top-[0.7rem] before:block before:h-[0.5rem] before:w-[0.5rem] before:rounded-full last:mb-0',
+        li: 'pl-[1.1875rem] leading-[2] before:absolute before:left-[0.25rem] before:top-[0.7rem] before:block before:h-[0.5rem] before:w-[0.5rem] before:rounded-full last:mb-0',
       },
     },
     fontFamily: {
       default: {
+        base: 'my-4',
         li: 'typography-body-9',
       },
       graphik: {
+        base: 'col-span-12 mb-7 xsl:col-span-10 xsl:col-start-2 xsl:mb-9 md:col-span-8 md:col-start-3 [&:has(+_p)]:mb-7',
         li: 'typography-site-9',
       },
     },
diff --git a/apps/site/src/components/document-renderer/paragraph/paragraph.style.ts b/apps/site/src/components/document-renderer/paragraph/paragraph.style.ts
index 864444177..0c6b5d38e 100644
--- a/apps/site/src/components/document-renderer/paragraph/paragraph.style.ts
+++ b/apps/site/src/components/document-renderer/paragraph/paragraph.style.ts
@@ -9,7 +9,8 @@ export const styles = tv({
     },
     type: {
       default: 'typography-body-9',
-      graphik: 'typography-site-9',
+      graphik:
+        'typography-site-9 col-span-12 mb-7 leading-[2] xsl:col-span-10 xsl:col-start-2 xsl:mb-9 md:col-span-8 md:col-start-3 [&:has(+_p,_+_ul,_+_ol)]:mb-2',
     },
   },
 });
diff --git a/apps/site/src/content/articles/collaborate-for-change/content.mdoc b/apps/site/src/content/articles/collaborate-for-change/content.mdoc
index 38457b53b..de4c2e647 100644
--- a/apps/site/src/content/articles/collaborate-for-change/content.mdoc
+++ b/apps/site/src/content/articles/collaborate-for-change/content.mdoc
@@ -27,7 +27,7 @@ When proposing a component change a strong business case is required as change m
 - Technical build in platform component libraries
 - Adoption across projects, touch-points and platforms
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png" alt="The 5 stages of the process; request, review, feedback, approval and build." /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png" alt="The 5 stages of the process; request, review, feedback, approval and build." type="bodyWide" /%}
 
 ## Requesting component and pattern change
 
diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc
index 63d8276c6..d28ab7301 100644
--- a/apps/site/src/content/articles/data-visualisation/content.mdoc
+++ b/apps/site/src/content/articles/data-visualisation/content.mdoc
@@ -6,13 +6,13 @@ Ensuring that your graphs and charts comply with WCAG’s AA accessibility stand
 
 From an accessibility perspective supporting data is your friend. Put simply; supporting data is the information used in a graph or chart. This includes the data itself and (if possible) a caption to describe the key findings. As a best practice, all charts must contain supporting data within the meta tags, this allows screen readers to relay the information however, it does not necessarily make your chart accessible.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![Horizontal bar chart showing an example data visualisation of annual spending](https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png "Fig.1 Data visualisation")
+![Horizontal bar chart showing an example data visualisation of annual spending](https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png 'Fig.1 Data visualisation')
 {% /layout-area %}
 
 {% layout-area %}
-![Example of the supporting data required to communicate this chart.](https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png "Fig.2 Supporting data")
+![Example of the supporting data required to communicate this chart.](https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png 'Fig.2 Supporting data')
 {% /layout-area %}
 {% /layout %}
 
@@ -20,13 +20,13 @@ To further meet our accessibility requirements, any charts which use multiple ca
 
 Fig.3 (below) shows our lovely colourful pie chart. All the colours in this chart pass the 3:1 contrast ratio. To all intents and purposes this chart would seem to be accessible, sadly this is not the case. Fig.4 demonstrates what a vision impaired customer would see. This is known as Achromatopsia (total colour blindness).
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png "Fig.3")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png 'Fig.3')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png "Fig.4")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png 'Fig.4')
 {% /layout-area %}
 {% /layout %}
 
@@ -34,13 +34,13 @@ The issue lies in the key (fig.4). There is not enough contrast in these greys t
 
 To make our pie chart accessible we have to display the supporting data as shown below (fig.6)
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png "Fig.5")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png 'Fig.5')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png "Fig.6")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png 'Fig.6')
 {% /layout-area %}
 {% /layout %}
 
@@ -48,13 +48,13 @@ The exception to this rule is where charts only display a single category as sho
 
 These charts only use one category and therefore do not require a key. Providing the colour used in these charts passes the 3:1 minimum contrast ratio there is no need to display supporting data. We’ll cover this in more detail later.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png "Fig.7")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png 'Fig.7')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png "Fig.8")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png 'Fig.8')
 {% /layout-area %}
 {% /layout %}
 
@@ -64,7 +64,7 @@ From a multi-brand perspective the colour system is our friend. As a rule of thu
 
 To assist designers with this we’ve created a data visualisation colour palette. Each brand provides 6 colours (A-F) for designers to use in their charts. 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. With that in mind, please avoid using additional colours, tints and opacities.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059531/claankr800028f58i36nsbcn0.png)
 {% /layout-area %}
@@ -74,7 +74,7 @@ To assist designers with this we’ve created a data visualisation colour palett
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059613/claanmim7002af58i7ate4iat.png)
 {% /layout-area %}
@@ -84,7 +84,7 @@ To assist designers with this we’ve created a data visualisation colour palett
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059657/claannged002cf58id4x5dq9o.png)
 {% /layout-area %}
@@ -98,35 +98,35 @@ To assist designers with this we’ve created a data visualisation colour palett
 
 To give you some context, the following examples show how these colours are applied. Circular swatches indicate the colours used in the graph. In fig.9 below the pie chart uses the solid colours A-D as shown in fig.10.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png "Fig.9")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png 'Fig.9')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png "Fig.10")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png 'Fig.10')
 {% /layout-area %}
 {% /layout %}
 
 The comparison chart in fig.11 shows how a tint is used with its corresponding solid colour (fig.12) and the area chart in fig.13 shows how the transparent colours are used with their corresponding solid colours (fig 14).
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png "Fig.11")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png 'Fig.11')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png "Fig.12")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png 'Fig.12')
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png "Fig.13")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png 'Fig.13')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png "Fig.14")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png 'Fig.14')
 {% /layout-area %}
 {% /layout %}
 
@@ -136,7 +136,7 @@ We just looked at where to use these colours. Now we’re going to look at when
 
 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.
 
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668141281/clac08xt60033f58i13sya6es.png "Fig.15")
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1668141281/clac08xt60033f58i13sya6es.png" title="Fig.15" type="body" /%}
 
 Incorrect use of these colours will dilute the consistency and integrity of the brand. If you’re unsure how to apply these colours or have any concerns please ask your design principle for help. We also recommend informing the business whenever you use the backup colours in charts as they are strictly governed, and only for use in edge-case scenarios.
 
@@ -150,13 +150,13 @@ Always use solid colours from the main set before using colours from the backup
 
 Always use colours from the main set before using colours from the backup set.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137247/clabxugfj002rf58ic1e8civz.png "Fig.16")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137247/clabxugfj002rf58ic1e8civz.png 'Fig.16')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137812/claby6kak002vf58ig262gyco.png "Fig.17")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137812/claby6kak002vf58ig262gyco.png 'Fig.17')
 {% /layout-area %}
 {% /layout %}
 
@@ -164,13 +164,13 @@ Always use colours from the main set before using colours from the backup set.
 
 Avoid using the tint (or transparent) variations on their own. As mentioned earlier, these variations are intended to be used in conjunction with their corresponding solid colour. They should not be used in isolation. The comparison chart below (fig.18) shows the correct use of a solid colour with its corresponding tint, whereas fig.19 is an example of incorrect use of the tints.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139231/clabz1005002yf58icsfzf6by.png "Fig.18")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139231/clabz1005002yf58icsfzf6by.png 'Fig.18')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139502/clabz6t3c0030f58ifh9o0bde.png "Fig.19")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139502/clabz6t3c0030f58ifh9o0bde.png 'Fig.19')
 {% /layout-area %}
 {% /layout %}
 
@@ -178,13 +178,13 @@ Avoid using the tint (or transparent) variations on their own. As mentioned earl
 
 Only use the tint (and transparent) variations with their corresponding solid colours (as shown in fig.20). Never use tint or transparent variations with an alternative solid colour (fig.21). Tints and transparencies must only be used with their corresponding solid colours.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137869/claby7sm3002wf58ibvhq5cu0.png "Fig.20")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137869/claby7sm3002wf58ibvhq5cu0.png 'Fig.20')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139527/clabz7bov0031f58iaifvhbqp.png "Fig.21")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139527/clabz7bov0031f58iaifvhbqp.png 'Fig.21')
 {% /layout-area %}
 {% /layout %}
 
@@ -194,13 +194,13 @@ As mentioned earlier, simple charts that use a single category are not required
 
 Fig.23 below shows a simple Westpac line graph. This graph uses colour C from the Westpac data visualisation palette. When this graph is converted to Rams (fig.24) it automatically applies colour C from the Rams palette. Unfortunately the Rams colour is not accessible and therefore the graph will fail to meet accessibility requirements.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650799/clakflnvh003lf58ibe6u08ab.png "Fig.23")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650799/clakflnvh003lf58ibe6u08ab.png 'Fig.23')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650815/clakfm0ne003mf58i0pxk0la6.png "Fig.24")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650815/clakfm0ne003mf58i0pxk0la6.png 'Fig.24')
 {% /layout-area %}
 {% /layout %}
 
@@ -208,7 +208,7 @@ If your chart needs to be multi-brand (and we’ll assume it does) you will need
 
 To make life easier we’ve structured the colour tokens to accomodate this scenario by making the first 2 colours (A & B) accessible in all brands. There are other accessible colours in these palettes, however, A and B are the only colours that are consistently accessible across each brand.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391172/clag50yna003ef58i798k7yrj.png)
 {% /layout-area %}
@@ -218,7 +218,7 @@ To make life easier we’ve structured the colour tokens to accomodate this scen
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391236/clag52cle003gf58i43x19xll.png)
 {% /layout-area %}
@@ -228,7 +228,7 @@ To make life easier we’ve structured the colour tokens to accomodate this scen
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391289/clag53gz8003if58ihj0gfy7n.png)
 {% /layout-area %}
@@ -240,13 +240,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen
 
 If you want to take advantage of this system, using either of these colours (A or B) will ensure that the charts are both accessible and multi-brand with no additional re-work. Fig.25 shows our updated Westpac line graph which now uses colour A. When this graph is converted to Rams (Fig.26) it automatically applies colour A from the Rams palette which is also accessible.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651525/clakg18oj003nf58id9wr0o81.png "Fig.25")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651525/clakg18oj003nf58id9wr0o81.png 'Fig.25')
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651562/clakg214l003of58iesjaah4j.png "Fig.26")
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651562/clakg214l003of58iesjaah4j.png 'Fig.26')
 {% /layout-area %}
 {% /layout %}
 
diff --git a/apps/site/src/content/articles/iconography/content.mdoc b/apps/site/src/content/articles/iconography/content.mdoc
index 156eab4a9..af7014373 100644
--- a/apps/site/src/content/articles/iconography/content.mdoc
+++ b/apps/site/src/content/articles/iconography/content.mdoc
@@ -10,11 +10,11 @@ User Interface icons are designed to communicate meaning and aid navigation. The
 
 Each icon in the library has 2 variants; filled and outlined as shown in the image below. These variants can be used to visually emphasise or de-emphasise a symbol. Designers can use a combination of filled and outlined icons to help draw attention to what’s important. This approach is similar to using font weights. When we want to emphasise a string of text we typically use a bolder font, this is a very simple and effective way to focus ones attention without the need for additional visual queues. Filled and outlined icons work in exactly the same way where the filled icon is bold and the outlined icon is light.
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png" alt="Image showing filled and outlined icons." title="Icon variants, filled and outlined" /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png" alt="Image showing filled and outlined icons." title="Icon variants, filled and outlined" type="bodyWide" /%}
 
 Filled and outlined variants are also useful when creating menus where the filled variant can represent the selected state, however its important to note that not all icons can have a fill (eg. link) and not all icons can have an outline (eg. accessibility). It's important to consider this before designing a menu that uses icons to indicate selected and unselected states.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[5, 5] %}
 {% layout-area %}
 ![Image showing examples of icons that can't be filled.](https://res.cloudinary.com/westpac-gel/image/upload/v1693977523/clm7ah9ii0004vd8i5ukg1r0j.png "Examples of icons that can't be filled")
 {% /layout-area %}
@@ -36,17 +36,16 @@ Icons should be used sparingly. Too many icons add clutter and confusion to the
 
 The GEL design system also provides a library of Pictograms. Unlike icons Pictograms are not intended to aid navigation or represent common actions like search and print. The primary purpose of Pictograms is brand embellishment. They’re designed to enhance the brand at specific points in the customer journey, we call these “brand moments”. Given their primary function Pictograms are not designed to be used at small sizes. They’re not drawn on the pixel grid and depending on the brand they may use colours that are not accessible. As a result Pictograms must always be larger than 36px. For more information and downloads please refer to the Design System [Pictograms](https://gel.westpacgroup.com.au/design-system/foundation/pictograms?b=WBC)
 
-{% layout layout=[6, 6] %}
+{% layout layout=[5, 5] %}
 {% layout-area %}
-![Image showing the icon sizing chart. Available sizes are: 12, 18, 24, 36 and 48 pixels.](https://res.cloudinary.com/westpac-gel/image/upload/v1690447333/clkkwp1dg00014g8iashk6m6s.png "Icons should only be used at these sizes")
+![Image showing the icon sizing chart. Available sizes are: 12, 18, 24, 36 and 48 pixels.](https://res.cloudinary.com/westpac-gel/image/upload/v1690447333/clkkwp1dg00014g8iashk6m6s.png 'Icons should only be used at these sizes')
 {% /layout-area %}
 
 {% layout-area %}
-![Image showing the Pictogram sizing chart. Pictograms should only be used above 36px](https://res.cloudinary.com/westpac-gel/image/upload/v1690447449/clkkwrixm00024g8i7phj2zw3.png "Pictograms should always be larger that 36px")
+![Image showing the Pictogram sizing chart. Pictograms should only be used above 36px](https://res.cloudinary.com/westpac-gel/image/upload/v1690447449/clkkwrixm00024g8i7phj2zw3.png 'Pictograms should always be larger that 36px')
 {% /layout-area %}
 {% /layout %}
 
-
 ## Design Principles
 
 If you cannot find an icon in the library to suit your needs it’s likely that you’ll need to create your own bespoke icon. The principles below explain how to design and craft icons correctly - aligning to the grid, using the correct corner radius, stroke widths etc. Note: before deciding to design new icons we recommend contacting the [GEL team](mailto:gel@westpac.com.au) or speaking to your Principle as we may be able to assist with finding a suitable library icon.
@@ -59,13 +58,13 @@ Simplicity is the key design requirement for UI icons. Using simple geometric sh
 
 The icon grid has been developed to facilitate consistency while also offering a certain amount of flexibility. All the icons in this library have been designed and crafted on a 24px grid. This allows us to use the icons at the following sizes: XSmall (12px), Small (18px), Medium (24px), Large (36px) and XLarge (48px). Using the icons at these pre-defined sizes will ensure that horizontal and vertical edges align with the pixel grid, with the exception of the Small (18px). This results in a sharper more legible graphic. If icons are not used at these intended sizes they will no longer align to the pixel grid which will result in a blurred effect. Using a fixed set of icon sizes also helps us to maintain consistency across all our applications.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[5, 5] %}
 {% layout-area %}
-![The 24px pixel grid at one thousand percent magnification.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572062/cl88fupn9001cam8i7zrbcu4a.png "1000% zoom")
+![The 24px pixel grid at one thousand percent magnification.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572062/cl88fupn9001cam8i7zrbcu4a.png '1000% zoom')
 {% /layout-area %}
 
 {% layout-area %}
-![The five icon sizes, 12, 18, 24, 36 and 42 pixels](https://res.cloudinary.com/westpac-gel/image/upload/v1663572105/cl88fvn4e001dam8ie77vfy1c.png "100% actual size")
+![The five icon sizes, 12, 18, 24, 36 and 42 pixels](https://res.cloudinary.com/westpac-gel/image/upload/v1663572105/cl88fvn4e001dam8ie77vfy1c.png '100% actual size')
 {% /layout-area %}
 {% /layout %}
 
@@ -73,13 +72,13 @@ The icon grid has been developed to facilitate consistency while also offering a
 
 Legibility, consistency and simplicity are key design principals for all UI icons. We use simple geometric shapes to construct icons. This gives them a unified symmetry and visual consistency.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572294/cl88fzomk001eam8ibfnv8odm.png "Key aspects of an icon")
+![The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572294/cl88fzomk001eam8ibfnv8odm.png 'Key aspects of an icon')
 {% /layout-area %}
 
 {% layout-area %}
-![Each of the six aspects of an icons anatomy.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572302/cl88fzunq001fam8i284s4twi.png "800% zoom")
+![Each of the six aspects of an icons anatomy.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572302/cl88fzunq001fam8i284s4twi.png '800% zoom')
 {% /layout-area %}
 {% /layout %}
 
@@ -87,13 +86,13 @@ Legibility, consistency and simplicity are key design principals for all UI icon
 
 To ensure icons maintain alignment with the pixel grid at 24, 36 and 48px, it is important to use even numbers for both the position, width and height of shapes (positive and negative).
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![The use of even numbers to ensure that icons can be scaled correctly.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572494/cl88g3z6f001gam8i276jhqo7.png "Do - use even numbers)
+![The use of even numbers to ensure that icons can be scaled correctly.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572494/cl88g3z6f001gam8i276jhqo7.png 'Do - use even numbers')
 {% /layout-area %}
 
 {% layout-area %}
-![demonstration of why not to use odd numbers. ](https://res.cloudinary.com/westpac-gel/image/upload/v1663572500/cl88g43sz001ham8i3x56d83z.png "Avoid - using odd numbers")
+![demonstration of why not to use odd numbers. ](https://res.cloudinary.com/westpac-gel/image/upload/v1663572500/cl88g43sz001ham8i3x56d83z.png 'Avoid - using odd numbers')
 {% /layout-area %}
 {% /layout %}
 
@@ -101,13 +100,13 @@ To ensure icons maintain alignment with the pixel grid at 24, 36 and 48px, it is
 
 A 2px corner radius is used on the fill area of the icon. Interior corners in the counter area should always be square. Do not round the corners of strokes that are 2px wide or less.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![How the corner radius works on the fill area](https://res.cloudinary.com/westpac-gel/image/upload/v1663572714/cl88g8p4l001iam8i0eg93tj7.png "Fill area with 2px corner radius")
+![How the corner radius works on the fill area](https://res.cloudinary.com/westpac-gel/image/upload/v1663572714/cl88g8p4l001iam8i0eg93tj7.png 'Fill area with 2px corner radius')
 {% /layout-area %}
 
 {% layout-area %}
-![How the corner area does not use a corner radius.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572720/cl88g8tqr001jam8i3kszd6ek.png "Counter area - no corners")
+![How the corner area does not use a corner radius.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572720/cl88g8tqr001jam8i3kszd6ek.png 'Counter area - no corners')
 {% /layout-area %}
 {% /layout %}
 
@@ -115,23 +114,23 @@ A 2px corner radius is used on the fill area of the icon. Interior corners in th
 
 Always use a 2px width for strokes and counter strokes. This includes curves and angles, interior and exterior.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![The stroke and counter stroke width](https://res.cloudinary.com/westpac-gel/image/upload/v1663572956/cl88gdv6j001mam8i4zxwc9wj.png "Strokes and counter strokes are 2px")
+![The stroke and counter stroke width](https://res.cloudinary.com/westpac-gel/image/upload/v1663572956/cl88gdv6j001mam8i4zxwc9wj.png 'Strokes and counter strokes are 2px')
 {% /layout-area %}
 
 {% layout-area %}
-![The stroke width on curves and angles](https://res.cloudinary.com/westpac-gel/image/upload/v1663572962/cl88ge09h001nam8i5nnm3dlw.png "Curves and angles are 2px)
+![The stroke width on curves and angles](https://res.cloudinary.com/westpac-gel/image/upload/v1663572962/cl88ge09h001nam8i5nnm3dlw.png 'Curves and angles are 2px')
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![Example 1. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572970/cl88ge6uu001oam8ihfeea8qi.png "All strokes should have 90° square ends")
+![Example 1. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572970/cl88ge6uu001oam8ihfeea8qi.png 'All strokes should have 90° square ends')
 {% /layout-area %}
 
 {% layout-area %}
-![Example 2. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572980/cl88gedy1001pam8iazws3qeg.png "All strokes should have 90° square ends")
+![Example 2. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572980/cl88gedy1001pam8iazws3qeg.png 'All strokes should have 90° square ends')
 {% /layout-area %}
 {% /layout %}
 
@@ -139,14 +138,14 @@ Always use a 2px width for strokes and counter strokes. This includes curves and
 
 Some scenarios may call for a little ‘artistic licence’ to break these guidelines to aid legibility of an icon. In spite of this it remains important to only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 
-![An example of where these guidelines may not work.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573097/cl88ggwvt001qam8ibkw672ef.png "Reduced border radius for wheels")
+![An example of where these guidelines may not work.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573097/cl88ggwvt001qam8ibkw672ef.png 'Reduced border radius for wheels')
 {% /layout-area %}
 
 {% layout-area %}
-![Another example of where these guidelines may not work.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573106/cl88gh3g0001ram8i9sxthmfa.png "Uses an odd number for legs")
+![Another example of where these guidelines may not work.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573106/cl88gh3g0001ram8i9sxthmfa.png 'Uses an odd number for legs')
 {% /layout-area %}
 {% /layout %}
 
@@ -154,43 +153,43 @@ Some scenarios may call for a little ‘artistic licence’ to break these guide
 
 Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different applications. If you have to create additional icons for your project here are some dos and don’ts.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![The correct use of strokes](https://res.cloudinary.com/westpac-gel/image/upload/v1663573350/cl88gmbly001sam8if1nx9agu.png "Do - use consistent stroke weights and squared stroke terminals")
+![The correct use of strokes](https://res.cloudinary.com/westpac-gel/image/upload/v1663573350/cl88gmbly001sam8if1nx9agu.png 'Do - use consistent stroke weights and squared stroke terminals')
 {% /layout-area %}
 
 {% layout-area %}
-![The incorrect use of strokes](https://res.cloudinary.com/westpac-gel/image/upload/v1663573356/cl88gmg9a001tam8i2ihk6hny.png "Don’t - use inconsistent stroke weights or rounded stroke terminals")
+![The incorrect use of strokes](https://res.cloudinary.com/westpac-gel/image/upload/v1663573356/cl88gmg9a001tam8i2ihk6hny.png 'Don’t - use inconsistent stroke weights or rounded stroke terminals')
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![The correct geometric graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573365/cl88gmniv001uam8i7jfa0yot.png "Do - make icons simple, bold, flat shapes")
+![The correct geometric graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573365/cl88gmniv001uam8i7jfa0yot.png 'Do - make icons simple, bold, flat shapes')
 {% /layout-area %}
 
 {% layout-area %}
-![The incorrect three dimensional graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573371/cl88gms2x001vam8igy9e4rzl.png "Don’t - add unnecessary dimension")
+![The incorrect three dimensional graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573371/cl88gms2x001vam8igy9e4rzl.png 'Don’t - add unnecessary dimension')
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![The correct geometric, simple graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573383/cl88gn0yy001wam8idnvf2qmp.png "Do - use simple geometric shapes to construct icons. This adds clarity and legibility.")
+![The correct geometric, simple graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573383/cl88gn0yy001wam8idnvf2qmp.png 'Do - use simple geometric shapes to construct icons. This adds clarity and legibility.')
 {% /layout-area %}
 
 {% layout-area %}
-![The incorrect organic graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573389/cl88gn5t0001xam8i54mp5lce.png "Don’t - be too literal. Avoid adding complex details and organic shapes.")
+![The incorrect organic graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573389/cl88gn5t0001xam8i54mp5lce.png 'Don’t - be too literal. Avoid adding complex details and organic shapes.')
 {% /layout-area %}
 {% /layout %}
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![How icons align to the pixel grid](https://res.cloudinary.com/westpac-gel/image/upload/v1663573396/cl88gnbe0001yam8i8pprdypb.png "Do - use icons at one of the pre-defined sizes. Set sizes and position icons ‘on the pixel grid’.")
+![How icons align to the pixel grid](https://res.cloudinary.com/westpac-gel/image/upload/v1663573396/cl88gnbe0001yam8i8pprdypb.png 'Do - use icons at one of the pre-defined sizes. Set sizes and position icons ‘on the pixel grid’.')
 {% /layout-area %}
 
 {% layout-area %}
-![What happens when icons are scaled and no longer align with the pixel grid.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573403/cl88gngdh001zam8i37xwbri1.png "Don’t - scale icons to random sizes. This will cause them to fall off the grid and blur.")
+![What happens when icons are scaled and no longer align with the pixel grid.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573403/cl88gngdh001zam8i37xwbri1.png 'Don’t - scale icons to random sizes. This will cause them to fall off the grid and blur.')
 {% /layout-area %}
 {% /layout %}
 
diff --git a/apps/site/src/content/articles/master-reference-page.yaml b/apps/site/src/content/articles/master-reference-page.yaml
new file mode 100644
index 000000000..5dc5017d4
--- /dev/null
+++ b/apps/site/src/content/articles/master-reference-page.yaml
@@ -0,0 +1,15 @@
+name: Master Reference Page
+cardTitle: Master reference page
+description: >-
+  Our global visual language is shared across all our brands. We have a library
+  of carefully crafted user interface icons for use in our designs. This article
+  discusses the iconography design principles and provides usage guidelines to
+  ensure that we design icons consistently and use them correctly. For
+  information about embedding, sizing and styling icons please refer to the
+  Design System Iconography.
+thumbnail: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1663138229/cl819k5u60009am8i687f9lc2.png
+smallDescription: Use our global visual language to communicate and engage with customers.
+image: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1690447987/clkkx311z00034g8i2jjuhsdh.png
+author: justin-spencer
diff --git a/apps/site/src/content/articles/master-reference-page/content.mdoc b/apps/site/src/content/articles/master-reference-page/content.mdoc
new file mode 100644
index 000000000..c1b679cfd
--- /dev/null
+++ b/apps/site/src/content/articles/master-reference-page/content.mdoc
@@ -0,0 +1,117 @@
+User Interface icons are designed to communicate meaning and aid navigation. They can symbolise a command, file, device or directory. They’re also used to represent common actions like search, print and edit.
+
+Simplicity is the key design requirement for UI icons. Each icon in this library is reduced to its minimal form, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the vector file size by limiting the number of points required to draw the graphic.
+
+## Heading 2
+
+The icon grid has been developed to facilitate consistency while also offering a certain amount of flexibility. All the icons in this library have been designed and crafted on a 24px grid. This allows us to use the icons at the following sizes: XSmall (12px), Small (18px), Medium (24px), Large (36px) and XLarge (48px). Using the icons at these pre-defined sizes will ensure that horizontal and vertical edges align with the pixel grid, with the exception of the Small (18px). This results in a sharper more legible graphic. If icons are not used at these intended sizes they will no longer align to the pixel grid which will result in a blurred effect. Using a fixed set of icon sizes also helps us to maintain consistency across all our applications.
+
+{% layout layout=[5, 5] %}
+{% layout-area %}
+![The 24px pixel grid at one thousand percent magnification.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572062/cl88fupn9001cam8i7zrbcu4a.png '1000% zoom')
+{% /layout-area %}
+
+{% layout-area %}
+![The five icon sizes, 12, 18, 24, 36 and 42 pixels](https://res.cloudinary.com/westpac-gel/image/upload/v1663572105/cl88fvn4e001dam8ie77vfy1c.png '100% actual size')
+{% /layout-area %}
+{% /layout %}
+
+## Heading two
+
+Legibility, consistency and simplicity are key design principals for all UI icons. We use simple geometric shapes to construct icons. This gives them a unified symmetry and visual consistency.
+
+{% layout layout=[4, 4] %}
+{% layout-area %}
+![The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572294/cl88fzomk001eam8ibfnv8odm.png 'Key aspects of an icon')
+{% /layout-area %}
+
+{% layout-area %}
+![Each of the six aspects of an icons anatomy.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572302/cl88fzunq001fam8i284s4twi.png '800% zoom')
+{% /layout-area %}
+{% /layout %}
+
+### Heading three
+
+Legibility, consistency and simplicity are key design principals for all UI icons. We use simple geometric shapes to construct icons. This gives them a unified symmetry and visual consistency.
+
+{% layout layout=[4, 4] %}
+{% layout-area %}
+![The use of even numbers to ensure that icons can be scaled correctly.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572494/cl88g3z6f001gam8i276jhqo7.png 'Do - use even numbers')
+{% /layout-area %}
+
+{% layout-area %}
+![demonstration of why not to use odd numbers. ](https://res.cloudinary.com/westpac-gel/image/upload/v1663572500/cl88g43sz001ham8i3x56d83z.png 'Avoid - using odd numbers')
+{% /layout-area %}
+{% /layout %}
+
+### Heading three
+
+Always use a 2px width for strokes and counter strokes. This includes curves and angles, interior and exterior.
+
+{% layout layout=[4, 4] %}
+{% layout-area %}
+![The stroke and counter stroke width](https://res.cloudinary.com/westpac-gel/image/upload/v1663572956/cl88gdv6j001mam8i4zxwc9wj.png 'Strokes and counter strokes are 2px')
+{% /layout-area %}
+
+{% layout-area %}
+![The stroke width on curves and angles](https://res.cloudinary.com/westpac-gel/image/upload/v1663572962/cl88ge09h001nam8i5nnm3dlw.png 'Curves and angles are 2px')
+{% /layout-area %}
+{% /layout %}
+
+{% layout layout=[4, 4] %}
+{% layout-area %}
+![Example 1. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572970/cl88ge6uu001oam8ihfeea8qi.png 'All strokes should have 90° square ends')
+{% /layout-area %}
+
+{% layout-area %}
+![Example 2. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572980/cl88gedy1001pam8iazws3qeg.png 'All strokes should have 90° square ends')
+{% /layout-area %}
+{% /layout %}
+
+## Heading two
+
+Some scenarios may call for a little ‘artistic licence’ to break these guidelines to aid legibility of an icon. In spite of this it remains important to only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms.
+
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png" alt="Image showing filled and outlined icons." title="Icon variants, filled and outlined" type="body" /%}
+
+## Heading two
+
+Some scenarios may call for a little ‘artistic licence’ to break these guidelines to aid legibility of an icon. In spite of this it remains important to only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms.
+
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png" alt="Image showing filled and outlined icons." title="Icon variants, filled and outlined" type="bodyWide" /%}
+
+## Heading two
+
+Some Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+
+### Heading three
+
+- This is the first bullet item
+- And this is the second bullet item
+
+### Another heading three
+
+1. This is the first numbered item
+2. And this is the second numbered item
+
+Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
+- This is the first bullet item with long content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+- And this is the second bullet item with long content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
+Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
+1. This is the first numbered item with long content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+2. And this is the second numbered item with long content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
+#### I'm a heading four
+
+Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Some article body.
+
+New paragraph of text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
+#### I'm another heading four
+
+Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Some article body.
+
+New paragraph of text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
diff --git a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc
index 14557c1cd..f90203870 100644
--- a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc
+++ b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc
@@ -12,13 +12,13 @@ Several years later on the cusp of the digital revolution the GEL Design System
 
 At its core the design system is made up of 4 sub-systems; colour, typography, iconography and layout. These are the foundations of our multi-brand system.
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667257636/cl9xe5c2t0015f58i4u4yd807.png" alt="Graphic showing the design systems 4 sub-systems; Colour, Typography, Iconography and Layout." /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667257636/cl9xe5c2t0015f58i4u4yd807.png" alt="Graphic showing the design systems 4 sub-systems; Colour, Typography, Iconography and Layout." type="bodyWide" /%}
 
 ### Colour
 
 The colour system is a collection of carefully considered variables (or tokens) designed to work in unison. In consultation with each brand we developed a unique set of corresponding colour values all rigorously tested to ensure brand alignment and guarantee the user interface remained accessible in every possible scenario.
 
-![Graphic to show the different colours that each brand use for their Primary colour.](https://res.cloudinary.com/westpac-gel/image/upload/v1665358951/cl91zpy5o000rrq8ih082f3oh.png)
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1665358951/cl91zpy5o000rrq8ih082f3oh.png" alt="Graphic to show the different colours that each brand use for their Primary colour." /%}
 
 When we reference these colours in our applications we don’t specify the explicit colour value, instead we reference the colours variable (or token). For example the _Primary colour_ in Westpac is #DA1710 however in Rams it’s #047DBC. Our application only needs to know that the _Primary colour_ is being used, the value of that colour is irrelevant.
 
@@ -32,17 +32,15 @@ When we reference these fonts in our applications we don’t specify the actual
 
 For example, the _Brand font_ in St.George (fig. 2) is Dragon Bold, Bank of Melbourne’s _Brand font_ is LL Brown (fig. 3). Our application only needs to know that the _Brand font_ is being used, the actual typeface used to display the text is irrelevant.
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
-![Graphic to show what the St.George brand font looks like.](https://res.cloudinary.com/westpac-gel/image/upload/v1664939880/cl8v27szo000nrq8ie1ogbach.png)
+![Graphic to show what the St.George brand font looks like.](https://res.cloudinary.com/westpac-gel/image/upload/v1664939880/cl8v27szo000nrq8ie1ogbach.png 'Fig. 2')
 
-Fig. 2
 {% /layout-area %}
 
 {% layout-area %}
-![Graphic to show what the Bank of Melbourne brand font looks like.](https://res.cloudinary.com/westpac-gel/image/upload/v1664939898/cl8v286s6000orq8ihhl2dkch.png)
+![Graphic to show what the Bank of Melbourne brand font looks like.](https://res.cloudinary.com/westpac-gel/image/upload/v1664939898/cl8v286s6000orq8ihhl2dkch.png 'Fig. 3')
 
-Fig. 3
 {% /layout-area %}
 {% /layout %}
 
@@ -62,7 +60,7 @@ The SVG format also allows us to dynamically control the styling of the icon whi
 
 For more in-depth information on the Iconography system see the article [Iconography](/articles/iconography)
 
-{% layout layout=[6, 6] %}
+{% layout layout=[4, 4] %}
 {% layout-area %}
 ![Graphic to show how an icon aligns to the 24px grid.](https://res.cloudinary.com/westpac-gel/image/upload/v1665119556/cl8y16vr3000prq8i58486coh.png)
 {% /layout-area %}
diff --git a/apps/site/src/content/articles/the-grid/content.mdoc b/apps/site/src/content/articles/the-grid/content.mdoc
index c660863e1..88112efa4 100644
--- a/apps/site/src/content/articles/the-grid/content.mdoc
+++ b/apps/site/src/content/articles/the-grid/content.mdoc
@@ -28,25 +28,25 @@ The grid consists of 12 columns (see figure 1). A pre-defined gutter is applied
 
 As illustrated in figure 1. the number 12 is an extremely versatile composite number not least because it has 6 divisors - 1, 2, 3, 4 and 6. This versatility offers much more flexibility for layout options which is particularly useful when designing responsive applications.
 
-{% articleBodyImage alt="The different layout options available when using the 12 column grid" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070755/cl9dridp8000ktc8i3uwr61eo.png" title="Figure 1. Using 12 columns offers many more options for layout configurations" /%}
+{% articleBodyImage alt="The different layout options available when using the 12 column grid" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070755/cl9dridp8000ktc8i3uwr61eo.png" title="Figure 1. Using 12 columns offers many more options for layout configurations" type="bodyWide" /%}
 
 ## **Column spans**
 
 When we design our layouts in a responsive environment we don’t use fixed pixel widths instead we use column spans and offsets. Rather than specifying the width of an element in pixels we specify the number of columns the element needs to span. We can then change the number of columns that element spans at different breakpoints. For example, suppose we have 2 elements A and B. In XS view we want A and B to each span 12 columns. This results in A and B stacking. However, on a larger viewport (e.g. SM) we don’t want A and B to stack instead we want to place them side by side. To achieve this, we would specify that A and B each span 6 columns at SM.
 
-{% articleBodyImage alt="How the layout can change at different breakpoints" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070840/cl9drk7cd000ltc8i5lz82nsz.png" title="Figure 2. Using 12 columns offers many more options for layout configurations" /%}
+{% articleBodyImage alt="How the layout can change at different breakpoints" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070840/cl9drk7cd000ltc8i5lz82nsz.png" title="Figure 2. Using 12 columns offers many more options for layout configurations" type="bodyWide" /%}
 
 ## **Column offsets**
 
 Column offsets work in tandem with column spans. They allow designers to move content across the grid. For example, a text element may not need to span 12 columns in LG view. To reduce the width of the text element the designer could offset 2 columns and span 8. This would provide a narrower text element. Offsets also allow us to create more interesting asymmetric layouts which don’t follow the popular blog style design approach where everything is centred.
 
-{% articleBodyImage alt="How elements can offset and span various columns" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070918/cl9drlvjq000mtc8i1n9jco9g.png" title="Figure 3. Column offsets" /%}
+{% articleBodyImage alt="How elements can offset and span various columns" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070918/cl9drlvjq000mtc8i1n9jco9g.png" title="Figure 3. Column offsets" type="bodyWide" /%}
 
 ## **Nested grids**
 
 Nested grids offer even more flexibility for content layout. As the name suggests a nested grid is just another grid put into a container that’s already in the grid. There are 2 key things to remember when using nested grids. Whenever you add a grid it will always use 12 columns and there will always be the same margin between the columns no matter how small the container.
 
-{% articleBodyImage alt="How nested grids work" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070960/cl9drmrm7000ntc8ihxqwdojh.png" title="Figure 4. Example of a nested grid" /%}
+{% articleBodyImage alt="How nested grids work" articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666070960/cl9drmrm7000ntc8ihxqwdojh.png" title="Figure 4. Example of a nested grid" type="bodyWide" /%}
 
 ## **Design assets**
 
diff --git a/apps/site/src/content/articles/think-responsive/content.mdoc b/apps/site/src/content/articles/think-responsive/content.mdoc
index ceeeb2dce..e41f4d263 100644
--- a/apps/site/src/content/articles/think-responsive/content.mdoc
+++ b/apps/site/src/content/articles/think-responsive/content.mdoc
@@ -2,7 +2,7 @@
 
 Responsive web design suggests that the user interface should respond to the user’s behaviour and environment based on screen size, platform and orientation. This practice consists of a mix of flexible grids and CSS media queries. As the user switches from one device to another, the interface should automatically respond and accommodate for layout, resolution, media size, content and interactions. In other words, the interface should have the smarts to automatically respond to the user’s preferences. This eliminates the need for a different design and development phase for each new gadget on the market. Responsive web design is not only about adjustable screen layouts and fluid images, but rather a whole new approach to design delivery. Achieving user interface design and code quality must be a priority — to do this greater emphasis on design and front-end development skills and collaboration is paramount.
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666585315/cl9m9v70f0014tc8ih17u372r.png" alt="Illustration showing different devices and orientations and how this affects the viewport size" /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666585315/cl9m9v70f0014tc8ih17u372r.png" alt="Illustration showing different devices and orientations and how this affects the viewport size" type="bodyWide" /%}
 
 ## Responsive architecture
 
diff --git a/apps/site/src/content/articles/typography/content.mdoc b/apps/site/src/content/articles/typography/content.mdoc
index f3b11b537..9513fc536 100644
--- a/apps/site/src/content/articles/typography/content.mdoc
+++ b/apps/site/src/content/articles/typography/content.mdoc
@@ -28,7 +28,7 @@ The brand font stack is also a list of typefaces with the web-font being the fir
 
 Font weights allow us to add more visual appeal and hierarchy to our designs. Designers can use the available weights as they see fit however they must consider the brands design direction and guidelines. As we use the font stack to establish the correct typeface developers must always use numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light version of whatever typeface the device is using (providing this weight is available). Unavailable weights display the logically closest weight. **Font weights should always be used in alignment with the GUIs and the digital brand guidelines.**
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666139429/cl9eweb04000otc8i5h3k3ep6.png" alt="The different font weights available." /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666139429/cl9eweb04000otc8i5h3k3ep6.png" alt="The different font weights available." type="bodyWide" /%}
 
 ### Type scale
 
@@ -39,6 +39,6 @@ Our typographic scale has a limited set of sizes that work together to help main
 
 We’re hoping to establish a more robust system of spacing for our Typography system however this is easier said than done due to the volume and variation of our digital products and services. We’re also aware that good typography is a craft not an exact science. Baseline grids, tracking, kerning, leading etc are all features used by designers to massage letters and words into visually appealing shapes. With this in mind we are reluctant to apply too many rules to the type system opting instead to let designers work their magic armed with their knowledge, experience and of course the brand guidelines.
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666141371/cl9exjwys000ptc8i1ki2fsxh.png" alt="The font sizes available in the design system" /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1666141371/cl9exjwys000ptc8i1ki2fsxh.png" alt="The font sizes available in the design system" type="bodyWide" /%}
 
 [Access the design system fonts](https://gel.westpacgroup.com.au/design-system/foundation/fonts)
diff --git a/apps/site/src/content/articles/what-is-gel/content.mdoc b/apps/site/src/content/articles/what-is-gel/content.mdoc
index fa41ff649..0dae22429 100644
--- a/apps/site/src/content/articles/what-is-gel/content.mdoc
+++ b/apps/site/src/content/articles/what-is-gel/content.mdoc
@@ -5,13 +5,13 @@ We put the customer at the centre of everything we do and so we take a customer
 - Design the right thing - explore customer problems to solve and opportunities to add value to our customers
 - Design the thing right - use common tools to ensure individual projects across the organisation deliver on brand and connected customer experiences optimised for the digital channel
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1665987289/cl9cdteon0006tc8i43v63pe8.png" alt="The 3 core aspects of GEL - Approach, Delivery and Collaboration" /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1665987289/cl9cdteon0006tc8i43v63pe8.png" alt="The 3 core aspects of GEL - Approach, Delivery and Collaboration" type="bodyWide" /%}
 
 At the heart of the GEL is the Westpac Group enterprise design system. The design system is delivered via Figma libraries and a React JS coding framework, supported by documentation and serviced through consultation. GEL is at the intersection of Brand, Design, and Technology to ensure maximum value can be achieved and integration is feasible.
 
 The GEL Design System provides 3 core outputs that connect our business.
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667029763/cl9tmh823000hf58i5a513mgf.png" alt="The 3 core outputs that connect our business. Digital brand clarity and direction, reusable library of components and a robust coding framework." /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667029763/cl9tmh823000hf58i5a513mgf.png" alt="The 3 core outputs that connect our business. Digital brand clarity and direction, reusable library of components and a robust coding framework." type="bodyWide" /%}
 
 GEL is governed by a centralised specialist team who manage the tools and provide support for our teams to adopt the system and to realise the customer and business benefits that the system and framework have to offer.