diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 25ae2f9b33..26633d7171 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -1,13 +1,7 @@
 <script>
-  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
-  import { createEventDispatcher } from "svelte"
-  import Property from './Property.svelte'
-  import InfoWord from './InfoWord.svelte'
-  import DocumentationLink from './DocumentationLink.svelte'
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { warnings, errors } from "../../fieldValidator";
+  import { Column, Support, NotRequired, StringNumber } from "./lines"
 
   export let support = {}
 
@@ -22,45 +16,12 @@
 
   let root = null;
 
-  const getDocLink = (columnType) => {
-    if (columnType === "Number") {
-      return "https://docs.budibase.com/docs/number"
-    }
-    if (columnType === "Text") {
-      return "https://docs.budibase.com/docs/text"
-    }
-    if (columnType === "Attachment") {
-      return "https://docs.budibase.com/docs/attachments"
-    }
-    if (columnType === "Multi-select") {
-      return "https://docs.budibase.com/docs/multi-select"
-    }
-    if (columnType === "JSON") {
-      return "https://docs.budibase.com/docs/json"
-    }
-    if (columnType === "Date/Time") {
-      return "https://docs.budibase.com/docs/datetime"
-    }
-    if (columnType === "User") {
-      return "https://docs.budibase.com/docs/user"
-    }
-
-    return ""
-  }
-
-  $: docLink = getDocLink(columnType);
-
   let explanationModalSubject = null
 
-  const handleMouseenter = (option) => {
+  const setExplanationSubject = (option) => {
     explanationModalSubject = option;
     root = root
   }
-
-  const handleMouseleave = () => {
-    explanationModalSubject = null;
-  }
-
 </script>
 
 <div
@@ -68,83 +29,26 @@
   class="tooltipContents"
 >
 
-  <div class="line">
-    <span class="bullet">•</span>
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("column")}
-      on:mouseleave={handleMouseleave}
-      href={tableHref}
-      text={columnName}
-    />
-    <span class="space" />
-    <span class="text"> is a </span>
-    <span class="space" />
-    <DocumentationLink
-      href={docLink}
-      icon={columnIcon}
-      text={`${columnType} column`}
-    />
-    <span class="period">.</span>
-  </div>
-  <div class="line">
-    <span class="bullet">•</span>
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("support")}
-      on:mouseleave={handleMouseleave}
-      href={tableHref}
-      icon={support.icon}
-      color={support.iconColor}
-      text={support.text}
-    />
-    <span class="space" />
-    <span class="text">with</span>
-    <span class="space" />
-    <DocumentationLink
-      href="https://docs.budibase.com/docs/chart"
-      icon="GraphPie"
-      text="Chart components"
-    />
-    <span class="period">.</span>
-  </div>
+<Column
+  {columnName}
+  {columnIcon}
+  {columnType}
+  {tableHref}
+  {setExplanationSubject}
+/>
+<Support
+  {support}
+  {setExplanationSubject}
+/>
   {#if support?.warnings?.includes(warnings.stringAsNumber)}
-    <div class={`line`}>
-      <span class="bullet">•</span>
-      <span class="text">Any</span>
-    <span class="space" />
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
-      on:mouseleave={handleMouseleave}
-      text="non-number values"
+    <StringNumber
+      {setExplanationSubject}
     />
-    <span class="space" />
-      <span class="text">
-        will be ignored
-      </span>
-      <span class="period">.</span>
-    </div>
   {/if}
   {#if support?.warnings?.includes(warnings.notRequired)}
-    <div class={`line`}>
-      <span class="bullet">•</span>
-      <span class="text">No</span>
-    <span class="space" />
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("required")}
-      on:mouseleave={handleMouseleave}
-      text="required"
+    <NotRequired
+      {setExplanationSubject}
     />
-    <span class="space" />
-    <DocumentationLink
-      icon="DataUnavailable"
-      href="https://docs.budibase.com/docs/budibasedb#constraints"
-      text="Constraint"
-    />
-      <span class="comma">,</span>
-      <span class="text">
-        so values may be missing
-      </span>
-      <span class="period">.</span>
-    </div>
   {/if}
 </div>
 
@@ -158,10 +62,6 @@
 {/if}
 
 <style>
-  .text {
-    flex-shrink: 0;
-  }
-
   .tooltipContents {
     max-width: 450px;
     background-color: var(--background-alt);
@@ -170,49 +70,4 @@
     border-radius: 5px;
     box-sizing: border-box;
   }
-
-  .bullet {
-    color: var(--grey-6);
-    font-size: 17px;
-    display: inline block;
-    margin-right: 10px;
-  }
-
-  .period {
-    color: var(--grey-6);
-    font-size: 20px;
-    display: inline block;
-    margin-left: 3px;
-  }
-
-  .comma {
-    margin-left: 2px;
-    color: var(--grey-6);
-    font-size: 17px;
-    display: inline block;
-    margin-right: 5px;
-  }
-
-  .semiColon {
-    color: var(--grey-5);
-    font-size: 16px;
-    display: inline block;
-  }
-
-  .space {
-    margin-right: 5px;
-  }
-
-  .line {
-    background-color: var(--background-alt);
-    color: var(--ink);
-    align-items: center;
-    display: flex;
-
-    margin-bottom: 10px;
-  }
-
-  .line:last-child {
-    margin-bottom: 0px;
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index c1cdb8be18..f587d51d19 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -4,7 +4,7 @@
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import Property from './Property.svelte'
-  import InfoWord from '../InfoWord.svelte'
+  import { InfoWord } from '../typography'
 
   export let anchor
   export let schema
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
index b3bf785afc..b00d414613 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -1,9 +1,53 @@
-
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+
+  export let columnName
+  export let columnIcon
+  export let columnType
+  export let tableHref
+  export let setExplanationSubject
+
+  const getDocLink = (columnType) => {
+    if (columnType === "Number") {
+      return "https://docs.budibase.com/docs/number"
+    }
+    if (columnType === "Text") {
+      return "https://docs.budibase.com/docs/text"
+    }
+    if (columnType === "Attachment") {
+      return "https://docs.budibase.com/docs/attachments"
+    }
+    if (columnType === "Multi-select") {
+      return "https://docs.budibase.com/docs/multi-select"
+    }
+    if (columnType === "JSON") {
+      return "https://docs.budibase.com/docs/json"
+    }
+    if (columnType === "Date/Time") {
+      return "https://docs.budibase.com/docs/datetime"
+    }
+    if (columnType === "User") {
+      return "https://docs.budibase.com/docs/user"
+    }
+
+    return ""
+  }
 </script>
 
-<div>
-</div>
-
-<style>
-</style>
+<Line>
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject("column")}
+    on:mouseleave={() => setExplanationSubject(null)}
+    href={tableHref}
+    text={columnName}
+  />
+  <Space />
+  <Text>is a</Text>
+  <Space />
+  <DocumentationLink
+    href={getDocLink(columnType)}
+    icon={columnIcon}
+    text={`${columnType} column`}
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
index b3bf785afc..8fd1e4acfa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
@@ -1,9 +1,30 @@
-
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+
+  export let setExplanationSubject
 </script>
 
-<div>
-</div>
+
+<Line>
+  <Text>No</Text>
+  <Space />
+  <InfoWord
+  on:mouseenter={() => setExplanationSubject("required")}
+  on:mouseleave={() => setExplanationSubject(null)}
+    text="required"
+  />
+  <Space />
+  <DocumentationLink
+    icon="DataUnavailable"
+    href="https://docs.budibase.com/docs/budibasedb#constraints"
+    text="Constraint"
+  />
+  <Comma />
+  <Text>
+    so values may be missing
+  </Text>
+  <Period />
+</Line>
 
 <style>
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
index b3bf785afc..ee304e32cc 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -1,9 +1,17 @@
-
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  export let setExplanationSubject
 </script>
 
-<div>
-</div>
-
-<style>
-</style>
+<Line>
+  <Text>Any</Text>
+  <Space />
+<InfoWord
+    on:mouseenter={() => setExplanationSubject("stringsAndNumbers")}
+    on:mouseleave={() => setExplanationSubject(null)}
+  text="non-number values"
+/>
+  <Space />
+  <Text>will be ignored</Text>
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
index 2e58e2fcca..92f817af09 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
@@ -1,8 +1,25 @@
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+
+  export let setExplanationSubject
+  export let support
 </script>
 
-<div>
-</div>
-
-<style>
-</style>
+<Line>
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject("support")}
+    on:mouseleave={() => setExplanationSubject(null)}
+    icon={support.icon}
+    color={support.iconColor}
+    text={support.text}
+  />
+  <Space />
+  <Text>with</Text>
+  <Space />
+  <DocumentationLink
+    href="https://docs.budibase.com/docs/chart"
+    icon="GraphPie"
+    text="Chart components"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
new file mode 100644
index 0000000000..1527651a9c
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -0,0 +1,7 @@
+<span class="text"><slot /></span>
+
+<style>
+  .text {
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
index 6c5a1b1866..102b65190d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
@@ -1,5 +1,7 @@
 export { default as Space } from "./Space.svelte"
 export { default as Comma } from "./Comma.svelte"
 export { default as Period } from "./Period.svelte"
+export { default as Text } from "./Text.svelte"
 export { default as InfoWord } from "./InfoWord.svelte"
 export { default as DocumentationLink } from "./DocumentationLink.svelte"
+export { default as Line } from "./Line.svelte"