diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
index 95bd8f29054..789d25450ad 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
@@ -36,7 +36,7 @@ The same can apply to components such as cards, form rows, etc. Responsive break
 
 Eufemia for the web uses a simple naming system:
 
-<div className="typography-box">Color name + percentage</div>
+<TypographyBox>Color name + percentage</TypographyBox>
 
 Depending on where the color will be used, its name formation will be different. For example, in Figma (and other design tools), the name is constructed thus:
 
@@ -44,11 +44,11 @@ The color name is written with spaces between words. The first word starts with
 
 Example:
 
-<div className="typography-box">Fire red 8%</div>
+<TypographyBox>Fire red 8%</TypographyBox>
 
 Whereas in CSS as a custom property this is written:
 
-<div className="typography-box">--color-fire-red-8</div>
+<TypographyBox>--color-fire-red-8</TypographyBox>
 
 Colors have a naming convention across all platforms and formats. Please refer to the table in [colors section](/quickguide-designer/colors).
 
@@ -62,16 +62,16 @@ However, to maintain consistency, in Figma we name Pages and Frames (canvases) w
 
 Example of a Figma Page name:
 
-<div className="typography-box">04 Spacing & Common components</div>
+<TypographyBox>04 Spacing & Common components</TypographyBox>
 
 Example of a Figma Frame name:
 
-<div className="typography-box">02 Spacing components - horizontal</div>
+<TypographyBox>02 Spacing components - horizontal</TypographyBox>
 
 Actual components are written with all small letters.
 
 Example of a Figma component name:
 
-<div className="typography-box">date picker</div>
+<TypographyBox>date picker</TypographyBox>
 
 If in doubt, look at the main Eufemia file - [Eufemia - Web](https://www.figma.com/file/cdtwQD8IJ7pTeE45U148r1/Eufemia-Web?node-id=530%3A49).
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
index 5218a9826bb..7f23a6795aa 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
@@ -1,4 +1,4 @@
-import { H2, H3 } from '@dnb/eufemia/src'
+import { H3 } from '@dnb/eufemia/src'
 
 <VisibilityByTheme hidden="sbanken">
 ## Font Families
@@ -7,7 +7,7 @@ The default font family for all web applications is the `DNB` font.
 
 ## DNB Regular
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p dnb-typo-regular">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -15,11 +15,11 @@ The default font family for all web applications is the `DNB` font.
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 
 ## DNB Medium
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p dnb-typo-medium">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -27,11 +27,11 @@ The default font family for all web applications is the `DNB` font.
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 
 ## DNB Bold
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p dnb-typo-bold">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -39,11 +39,11 @@ The default font family for all web applications is the `DNB` font.
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 
 ## DNBMono Regular
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p dnb-typo-mono-regular">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -51,7 +51,7 @@ The default font family for all web applications is the `DNB` font.
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 </VisibilityByTheme>
 <VisibilityByTheme visible="sbanken">
 ## Font Families
@@ -60,13 +60,13 @@ The default font family for all web applications is `Roboto`, however for headli
 
 ### Maison Neue
 
-<div className="typography-box">
+<TypographyBox>
   <H3>This is a headline in Maison Neue</H3>
-</div>
+</TypographyBox>
 
 ### Roboto regular
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p dnb-typo-regular">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -74,11 +74,11 @@ The default font family for all web applications is `Roboto`, however for headli
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 
 ### Roboto bold
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p dnb-typo-bold">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -86,6 +86,6 @@ The default font family for all web applications is `Roboto`, however for headli
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 
 </VisibilityByTheme>
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
index fe510d58a6b..656e1eca38e 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
@@ -7,7 +7,7 @@ Achieved with HTML classes: `.dnb-typo-regular`, <VisibilityByTheme hidden="sban
 **NB!** body text is automatically set to use **regular** weight so there is
 no need to use a class.
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-typo-regular">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -15,12 +15,12 @@ no need to use a class.
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 
 <VisibilityByTheme hidden="sbanken">
 ### Body Medium
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-typo-medium">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -28,12 +28,12 @@ no need to use a class.
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
 </VisibilityByTheme>
 
 ### Body Bold
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-typo-bold">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
@@ -41,4 +41,4 @@ no need to use a class.
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
-</div>
+</TypographyBox>
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx
index 6af1abb32a4..5f9b2d06b29 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx
@@ -12,7 +12,7 @@ Because their line-height **is** evenly divisible by 8.
 
 ### Line height = 1rem (16px)
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p lh-16">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -20,11 +20,11 @@ Because their line-height **is** evenly divisible by 8.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
     Dico purto nullam sea an.
   </p>
-</div>
+</TypographyBox>
 
 ### Line height = 1.5rem (24px)
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p lh-24">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -32,11 +32,11 @@ Because their line-height **is** evenly divisible by 8.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
     Dico purto nullam sea an.
   </p>
-</div>
+</TypographyBox>
 
 ### Line height = 2rem (32px)
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p lh-32">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -44,7 +44,7 @@ Because their line-height **is** evenly divisible by 8.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
     Dico purto nullam sea an.
   </p>
-</div>
+</TypographyBox>
 
 ### These break alternatively on/off the grid (line heights 0.75rem, 1.25rem and 1.75rem)
 
@@ -53,7 +53,7 @@ Try resizing the browser - you will see the 'off-grid' result.
 
 ### Line height = 0.75rem (12px)
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p lh-12">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -61,11 +61,11 @@ Try resizing the browser - you will see the 'off-grid' result.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
     Dico purto nullam sea an.
   </p>
-</div>
+</TypographyBox>
 
 ### Line height = 1.25rem (20px)
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p lh-20">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -73,11 +73,11 @@ Try resizing the browser - you will see the 'off-grid' result.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
     Dico purto nullam sea an.
   </p>
-</div>
+</TypographyBox>
 
 ### Line height = 1.75rem (28px)
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p lh-28">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -85,4 +85,4 @@ Try resizing the browser - you will see the 'off-grid' result.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
     Dico purto nullam sea an.
   </p>
-</div>
+</TypographyBox>
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
index 87538a50be5..2c81995945d 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
@@ -14,15 +14,16 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Example:
 
-<div className="typography-box">
-  {/* prettier-ignore */}
-  <h1 className="dnb-h--xx-large skip-anchor">Quem facilisi moderatius id eam, id tamquam albucius per.</h1>
+<TypographyBox>
+  <h1 className="dnb-h--xx-large skip-anchor">
+    Quem facilisi moderatius id eam, id tamquam albucius per.
+  </h1>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
     exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
-</div>
+</TypographyBox>
 
 ## Heading x-large
 
@@ -36,16 +37,17 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Example:
 
-<div className="typography-box">
-  {/* prettier-ignore */}
-  <h4 className="dnb-h--x-large skip-anchor">Facilisi moderatius id eam, id tamquam albucius per.
-  Vel quem congue appareat cu, mei te eros convenire</h4>
+<TypographyBox>
+  <h4 className="dnb-h--x-large skip-anchor">
+    Facilisi moderatius id eam, id tamquam albucius per. Vel quem congue
+    appareat cu, mei te eros convenire
+  </h4>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
     exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
-</div>
+</TypographyBox>
 
 ## Heading large
 
@@ -59,16 +61,17 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Example:
 
-<div className="typography-box">
-  {/* prettier-ignore */}
-  <h4 className="dnb-h--large skip-anchor">Quem facilisi moderatius id eam, id tamquam albucius per.
-  Vel quem congue appareat cu, mei te eros convenire.</h4>
+<TypographyBox>
+  <h4 className="dnb-h--large skip-anchor">
+    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+    congue appareat cu, mei te eros convenire.
+  </h4>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
     exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
-</div>
+</TypographyBox>
 
 ## Text lead
 
@@ -82,19 +85,20 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Example:
 
-<div className="typography-box">
-  {/* prettier-ignore */}
-  <h4 className="dnb-lead skip-anchor">Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+<TypographyBox>
+  <h4 className="dnb-lead skip-anchor">
+    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
     exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
-    Dico purto nullam sea an.</h4>
+    Dico purto nullam sea an.
+  </h4>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
     exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
-</div>
+</TypographyBox>
 
 ## Text basis (paragraph)
 
@@ -107,7 +111,7 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Example:
 
-<div className="typography-box">
+<TypographyBox>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -120,7 +124,7 @@ This is an overview of the default, basic typographic elements such as **heading
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
     exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
-</div>
+</TypographyBox>
 
 ## Text basis - small
 
@@ -137,18 +141,20 @@ There are two methods to create small text. One, is to use the `.dnb-p--small` m
 
 ### Example
 
-<div className="typography-box">
-  {/* prettier-ignore */}
-  <p className="dnb-p dnb-p--small">This is a paragraph with a <b>modifier class</b>. This is the small
+<TypographyBox>
+  <p className="dnb-p dnb-p--small">
+    This is a paragraph with a <b>modifier class</b>. This is the small
     content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel
     quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea,
-    ei exerci tacimates pro, aliquam pertinacia eu vim.</p>
+    ei exerci tacimates pro, aliquam pertinacia eu vim.
+  </p>
   <p className="dnb-p">
-    {/* prettier-ignore */}
-    <small>This is a paragraph with a <b>small tag</b> inserted here: this is
+    <small>
+      This is a paragraph with a <b>small tag</b> inserted here: this is
       the small content. Quem facilisi moderatius id eam, id tamquam
       albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
       bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu
-      vim.</small>
+      vim.
+    </small>
   </p>
-</div>
+</TypographyBox>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
index d1188bda56e..36027183e8a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
@@ -7,13 +7,14 @@ import React from 'react'
 import styled from '@emotion/styled'
 import ComponentBox from '../../../shared/tags/ComponentBox'
 import { Code, H4, Lead, P } from '@dnb/eufemia/src'
+import { TypographyBox } from '../../../shared/parts/TypographyBox'
 
 const Wrapper = styled.div`
   margin-bottom: 3rem;
 `
 
 const FontUsageExample = ({ typo_class, font_family }) => (
-  <div className="typography-box">
+  <TypographyBox>
     <h3 className={typo_class}>{font_family}</h3>
     <p className={typo_class}>
       Here is a paragraph with some nonsense{' '}
@@ -25,7 +26,7 @@ const FontUsageExample = ({ typo_class, font_family }) => (
       <strong>The Extremes</strong> of Good and Evil) by Cicero, written in
       45 BC.
     </p>
-  </div>
+  </TypographyBox>
 )
 
 export function FontWeightExample() {
diff --git a/packages/dnb-design-system-portal/src/shared/parts/TypographyBox.tsx b/packages/dnb-design-system-portal/src/shared/parts/TypographyBox.tsx
new file mode 100644
index 00000000000..45368f4f041
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/shared/parts/TypographyBox.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export function TypographyBox({ children, className = null, ...props }) {
+  return (
+    <div className={classnames('typography-box', className)} {...props}>
+      {removeNestedParagraphs(children)}
+    </div>
+  )
+}
+
+function removeNestedParagraphs(children: Array<JSX.Element>) {
+  return React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const jsx = child as JSX.Element
+      if (jsx.type?.name === 'p') {
+        return jsx.props.children
+      } else {
+        return React.cloneElement(
+          child,
+          null,
+          removeNestedParagraphs(jsx.props.children),
+        )
+      }
+    }
+
+    return child
+  })
+}
diff --git a/packages/dnb-design-system-portal/src/shared/tags/index.tsx b/packages/dnb-design-system-portal/src/shared/tags/index.tsx
index 22cae052359..bddedb9a3af 100644
--- a/packages/dnb-design-system-portal/src/shared/tags/index.tsx
+++ b/packages/dnb-design-system-portal/src/shared/tags/index.tsx
@@ -22,6 +22,7 @@ import Anchor from './Anchor'
 import Header from './AutoLinkHeader'
 import Copy from './Copy'
 import VisibilityByTheme from '@dnb/eufemia/src/shared/VisibilityByTheme'
+import { TypographyBox } from '../parts/TypographyBox'
 
 export const basicComponents = {
   // img: Img, // -> <figure> cannot appear as a descendant of <p>
@@ -69,6 +70,7 @@ export const basicComponents = {
 
 export default {
   Copy,
+  TypographyBox,
   VisibilityByTheme,
   VisibleWhenVisualTest: ({ children }) => {
     if (typeof globalThis !== 'undefined' && globalThis.IS_TEST) {