feat(SW-2930): Aligned margins and spacing for RTE html with Figma

Approved-by: Christian Andolf
2025-06-03 05:45:14 +00:00
parent 958906d3bf
commit 6a639dfd7e
7 changed files with 273 additions and 174 deletions
--- a/apps/scandic-web/components/Blocks/index.tsx
+++ b/apps/scandic-web/components/Blocks/index.tsx
@@ -38,12 +38,11 @@ export default function Blocks({ blocks }: BlocksProps) {
        )
      case BlocksEnums.block.Content:
        return (
-          <section key={`${block.typename}-${idx}`}>
-            <JsonToHtml
-              nodes={block.content.json.children}
-              embeds={block.content.embedded_itemsConnection.edges}
-            />
-          </section>
+          <JsonToHtml
+            key={`${block.typename}-${idx}`}
+            nodes={block.content.json.children}
+            embeds={block.content.embedded_itemsConnection.edges}
+          />
        )
      case BlocksEnums.block.DynamicContent:
        return (
@@ -97,12 +96,11 @@ export default function Blocks({ blocks }: BlocksProps) {
        return <TextCols text_cols={block.text_cols} />
      case BlocksEnums.block.TextContent:
        return (
-          <section key={`${block.typename}-${idx}`}>
-            <JsonToHtml
-              embeds={block.text_content.content.embedded_itemsConnection.edges}
-              nodes={block.text_content.content.json.children}
-            />
-          </section>
+          <JsonToHtml
+            key={`${block.typename}-${idx}`}
+            embeds={block.text_content.content.embedded_itemsConnection.edges}
+            nodes={block.text_content.content.json.children}
+          />
        )
      case BlocksEnums.block.UspGrid:
        return <UspGrid usp_grid={block.usp_grid} />
--- a/apps/scandic-web/components/ContentType/DestinationPage/Blocks/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Blocks/index.tsx
@@ -29,12 +29,11 @@ export default function Blocks({ blocks }: BlocksProps) {
        )
      case BlocksEnums.block.Content:
        return (
-          <section key={`${block.typename}-${idx}`}>
-            <JsonToHtml
-              nodes={block.content.json.children}
-              embeds={block.content.embedded_itemsConnection.edges}
-            />
-          </section>
+          <JsonToHtml
+            key={`${block.typename}-${idx}`}
+            nodes={block.content.json.children}
+            embeds={block.content.embedded_itemsConnection.edges}
+          />
        )
      default:
        return null
--- a/apps/scandic-web/components/JsonToHtml/jsontohtml.module.css
+++ b/apps/scandic-web/components/JsonToHtml/jsontohtml.module.css
@@ -1,9 +1,52 @@
-.imageContainer {
+.container {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.heading {
+  color: var(--Text-Heading);
+  margin-top: var(--Space-x3);
+}
+
+.h1,
+.h2 {
+  margin-bottom: var(--Space-x2);
+}
+
+.h3,
+.h4,
+.h5,
+.p,
+.blockquote,
+.code,
+.divider,
+.div {
+  margin-bottom: var(--Space-x15);
+}
+
+.imageWithCaption {
+  display: grid;
+  gap: var(--Space-x1);
+  margin: var(--Space-x3) 0;
+
+  .imageWrapper {
+    margin: 0;
+  }
+}
+
+.imageWrapper {
  position: relative;
  width: 100%;
  height: 365px;
  border-radius: var(--Corner-radius-md);
-  margin: var(--Spacing-x1) var(--Spacing-x0);
+  margin: var(--Space-x3) 0;
  overflow: hidden;
 }

@@ -14,17 +57,19 @@

 .ul,
 .ol {
-  padding: var(--Spacing-x2) var(--Spacing-x0);
  display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
+  padding: 0;
+  margin-top: var(--Space-x2);
+  margin-bottom: var(--Space-x2);
 }

 .ol > li::marker {
-  color: var(--Primary-Light-On-Surface-Accent);
+  color: var(--Icon-Accent);
 }

 .li {
-  margin-left: var(--Spacing-x3);
+  margin-left: var(--Space-x3);
 }

 .heart > .li::before,
@@ -33,8 +78,8 @@
  position: relative;
  height: 8px;
  top: 3px;
-  margin-right: var(--Spacing-x1);
-  margin-left: calc(var(--Spacing-x3) * -1);
+  margin-right: var(--Space-x1);
+  margin-left: calc(var(--Space-x3) * -1);
 }

 .heart > .li,
@@ -50,23 +95,32 @@
  position: relative;
  height: 8px;
  top: 3px;
-  margin-right: var(--Spacing-x1);
-  margin-left: calc(var(--Spacing-x3) * -1);
-}
-
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-  max-width: 1197px;
+  margin-right: var(--Space-x1);
+  margin-left: calc(var(--Space-x3) * -1);
 }

 .li > p {
  display: inline;
+  margin: 0;
 }

 .tableContainer {
  max-width: 100%;
  overflow-x: auto;
+  margin: var(--Space-x3) 0;
+}
+
+.table .p {
+  display: inline;
+  margin: 0;
+}
+
+.theadContent {
+  color: var(--Text-Heading);
+}
+
+.iframe {
+  margin: var(--Space-x3) 0;
 }

@media screen and (min-width: 768px) {
--- a/apps/scandic-web/components/JsonToHtml/renderOptions.tsx
+++ b/apps/scandic-web/components/JsonToHtml/renderOptions.tsx
@@ -1,3 +1,5 @@
+import { cx } from "class-variance-authority"
+
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -8,12 +10,6 @@ import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
 import ImageContainer from "../ImageContainer"
 import Divider from "../TempDesignSystem/Divider"
 import Table from "../TempDesignSystem/Table"
-import BiroScript from "../TempDesignSystem/Text/BiroScript"
-import Body from "../TempDesignSystem/Text/Body"
-import Caption from "../TempDesignSystem/Text/Caption"
-import Footnote from "../TempDesignSystem/Text/Footnote"
-import Subtitle from "../TempDesignSystem/Text/Subtitle"
-import Title from "../TempDesignSystem/Text/Title"
 import {
  hasAvailableParagraphFormat,
  hasAvailableULFormat,
@@ -87,12 +83,13 @@ export const renderOptions: RenderOptions = {
    fullRenderOptions: RenderOptions
  ) => {
    if (node.attrs.url) {
-      const props = extractPossibleAttributes(node.attrs)
+      const { className, ...props } = extractPossibleAttributes(node.attrs)
      return (
        <Link
+          key={node.uid}
+          className={cx(styles.link, className)}
          {...props}
          href={node.attrs.url}
-          key={node.uid}
          target={node.attrs.target ?? "_blank"}
          textDecoration="underline"
        >
@@ -115,11 +112,13 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <BiroScript key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </BiroScript>
+      <Typography key={node.uid} variant="Title/Decorative/lg">
+        <blockquote className={cx(styles.blockquote, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </blockquote>
+      </Typography>
    )
  },

@@ -129,9 +128,9 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <code key={node.uid} {...props}>
+      <code key={node.uid} className={cx(styles.code, className)} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </code>
    )
@@ -143,7 +142,7 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    if (node.attrs.src) {
      props.src = node.attrs.src
    }
@@ -154,7 +153,11 @@ export const renderOptions: RenderOptions = {
      return null
    }
    return (
-      <iframe key={node.uid} {...props}>
+      <iframe
+        key={node.uid}
+        className={cx(styles.iframe, className)}
+        {...props}
+      >
        {next(node.children, embeds, fullRenderOptions)}
      </iframe>
    )
@@ -166,11 +169,13 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <Title key={node.uid} {...props} level="h1">
-        {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+      <Typography key={node.uid} variant="Title/lg">
+        <h1 className={cx(styles.heading, styles.h1, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h1>
+      </Typography>
    )
  },

@@ -180,11 +185,13 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <Title key={node.uid} {...props} level="h2">
-        {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+      <Typography key={node.uid} variant="Title/md">
+        <h2 className={cx(styles.heading, styles.h2, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h2>
+      </Typography>
    )
  },

@@ -194,11 +201,13 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <Title key={node.uid} {...props} level="h3">
-        {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+      <Typography key={node.uid} variant="Title/sm">
+        <h3 className={cx(styles.heading, styles.h3, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h3>
+      </Typography>
    )
  },

@@ -208,11 +217,13 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <Title key={node.uid} {...props} level="h4">
-        {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+      <Typography key={node.uid} variant="Title/xs">
+        <h4 className={cx(styles.heading, styles.h4, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h4>
+      </Typography>
    )
  },

@@ -222,16 +233,18 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <Title key={node.uid} {...props} level="h5">
-        {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+      <Typography key={node.uid} variant="Title/xs">
+        <h5 className={cx(styles.heading, styles.h5, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h5>
+      </Typography>
    )
  },

  [RTETypeEnum.hr]: () => {
-    return <Divider />
+    return <Divider className={styles.divider} />
  },

  [RTETypeEnum.li]: (
@@ -240,16 +253,16 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassName = makeCssModuleCompatibleClassName(
-      props.className,
+      className,
      "ul"
    )
    return (
      <li
        key={node.uid}
        {...props}
-        className={`${styles.li} ${compatibleClassName}`}
+        className={cx(styles.li, compatibleClassName)}
      >
        {next(node.children, embeds, fullRenderOptions)}
      </li>
@@ -262,7 +275,7 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)

    // Set the number of rows dynamically to create even rows for each column. We want the li:s
    // to flow with the column, so therefore this is needed.
@@ -273,18 +286,19 @@ export const renderOptions: RenderOptions = {
    }

    return (
-      <ol
-        key={node.uid}
-        {...props}
-        className={styles.ol}
-        style={
-          numberOfRows
-            ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
-            : {}
-        }
-      >
-        {next(node.children, embeds, fullRenderOptions)}
-      </ol>
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
+        <ol
+          className={cx(styles.ol, className)}
+          {...props}
+          style={
+            numberOfRows
+              ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
+              : {}
+          }
+        >
+          {next(node.children, embeds, fullRenderOptions)}
+        </ol>
+      </Typography>
    )
  },

@@ -294,7 +308,7 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)

    const hasFormat = node.children.some((item) =>
      hasAvailableParagraphFormat((item as RTETextNode)?.classname)
@@ -307,9 +321,11 @@ export const renderOptions: RenderOptions = {
    }

    return (
-      <Body {...props} key={node.uid}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </Body>
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
+        <p className={cx(styles.p, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </p>
+      </Typography>
    )
  },

@@ -319,20 +335,22 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    let props = extractPossibleAttributes(node.attrs)
-    const className = props.className
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    let propsClassName = className

    if (className) {
      if (hasAvailableULFormat(className)) {
        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
        // to an existing class in the module style sheet. Due to our css modules plugin for
        // typescript, we cannot do this without the ts-ignore
-        props.className = styles[className]
+        propsClassName = styles[className]
      }
    }

    return (
-      <span {...props}>{next(node.children, embeds, fullRenderOptions)}</span>
+      <span className={cx(styles.span, propsClassName)} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </span>
    )
  },
  [RTETypeEnum.div]: (
@@ -341,20 +359,22 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    let props = extractPossibleAttributes(node.attrs)
-    const className = props.className
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    let propsClassName = props.className

    if (className) {
      if (hasAvailableULFormat(className)) {
        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
        // to an existing class in the module style sheet. Due to our css modules plugin for
        // typescript, we cannot do this without the ts-ignore
-        props.className = styles[className]
+        propsClassName = styles[className]
      }
    }

    return (
-      <div {...props}>{next(node.children, embeds, fullRenderOptions)}</div>
+      <div className={cx(styles.div, propsClassName)} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </div>
    )
  },

@@ -374,14 +394,15 @@ export const renderOptions: RenderOptions = {
          if (image?.node.__typename === ContentEnum.blocks.SysAsset) {
            if (image.node.url) {
              const alt = image?.node?.title ?? node.attrs.alt
-              const props = extractPossibleAttributes(node.attrs)
-              props.className = styles.image
+              const { className, ...props } = extractPossibleAttributes(
+                node.attrs
+              )
              return (
-                <div className={styles.imageContainer}>
+                <div key={node.uid} className={styles.imageWrapper}>
                  <Image
-                    alt={alt}
-                    className={styles.image}
+                    className={cx(styles.image, className)}
                    src={image.node.url}
+                    alt={alt}
                    fill
                    sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
                    {...props}
@@ -391,12 +412,15 @@ export const renderOptions: RenderOptions = {
            }
          }
        } else if (node.attrs["display-type"] === "link" && node.attrs.href) {
+          const { className, ...props } = extractPossibleAttributes(node.attrs)
          return (
            <Link
-              href={node.attrs.href}
              key={node.uid}
+              className={cx(styles.link, className)}
+              href={node.attrs.href}
              textDecoration="underline"
              target="_blank"
+              {...props}
            >
              {next(
                // Sometimes editors happen to nest a reference inside a link and vice versa.
@@ -420,6 +444,7 @@ export const renderOptions: RenderOptions = {
          if (entry.node.image_left && entry.node.image_right) {
            return (
              <ImageContainer
+                key={node.uid}
                leftImage={entry.node.image_left}
                rightImage={entry.node.image_right}
              />
@@ -440,13 +465,14 @@ export const renderOptions: RenderOptions = {
          entry?.node.__typename === ContentEnum.blocks.StartPage
        ) {
          // If entry is not an ImageContainer, it is a page and we return it as a link
-          const props = extractPossibleAttributes(node.attrs)
+          const { className, ...props } = extractPossibleAttributes(node.attrs)

          return (
            <Link
+              key={node.uid}
+              className={cx(styles.link, className)}
              {...props}
              href={entry.node.url}
-              key={node.uid}
              textDecoration="underline"
            >
              {next(
@@ -477,13 +503,14 @@ export const renderOptions: RenderOptions = {
          image = insertResponseToImageVaultAsset(attrs)
        }
        const alt = image.meta.alt ?? image.title
-        const props = extractPossibleAttributes(attrs)
+        const caption = image.meta.caption
+        const { className, ...props } = extractPossibleAttributes(attrs)
        return (
-          <section key={node.uid}>
-            <div className={styles.imageContainer}>
+          <div key={node.uid} className={styles.imageWithCaption}>
+            <div className={styles.imageWrapper}>
              <Image
                alt={alt}
-                className={styles.image}
+                className={cx(styles.image, className)}
                src={image.url}
                fill
                sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
@@ -491,8 +518,12 @@ export const renderOptions: RenderOptions = {
                {...props}
              />
            </div>
-            <Caption>{image.meta.caption}</Caption>
-          </section>
+            {caption ? (
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{image.meta.caption}</p>
+              </Typography>
+            ) : null}
+          </div>
        )
      }
    }
@@ -506,10 +537,10 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
-      <div className={styles.tableContainer}>
-        <Table key={node.uid} {...props}>
+      <div key={node.uid} className={styles.tableContainer}>
+        <Table className={cx(styles.table, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </Table>
      </div>
@@ -531,9 +562,11 @@ export const renderOptions: RenderOptions = {
        next: RTENext,
        fullRenderOptions: RenderOptions
      ) => (
-        <Body color={"burgundy"} textTransform={"bold"}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </Body>
+        <Typography variant="Body/Paragraph/mdBold">
+          <span className={styles.theadContent}>
+            {next(node.children, embeds, fullRenderOptions)}
+          </span>
+        </Typography>
      ),
    }
    const props = extractPossibleAttributes(node.attrs)
@@ -629,9 +662,9 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassName = makeCssModuleCompatibleClassName(
-      props.className,
+      className,
      "ul"
    )

@@ -644,10 +677,10 @@ export const renderOptions: RenderOptions = {
    }

    return (
-      <Typography variant="Body/Paragraph/mdRegular" key={node.uid}>
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
        <ul
+          className={cx(styles.ul, compatibleClassName)}
          {...props}
-          className={`${styles.ul} ${compatibleClassName}`}
          style={
            numberOfRows
              ? {
@@ -664,7 +697,11 @@ export const renderOptions: RenderOptions = {

  /** TextNode wrappers */
  [RTEMarkType.bold]: (children: React.ReactNode) => {
-    return <strong>{children}</strong>
+    return (
+      <Typography variant="Body/Paragraph/mdBold">
+        <strong>{children}</strong>
+      </Typography>
+    )
  },

  [RTEMarkType.italic]: (children: React.ReactNode) => {
@@ -672,7 +709,11 @@ export const renderOptions: RenderOptions = {
  },

  [RTEMarkType.underline]: (children: React.ReactNode) => {
-    return <u>{children}</u>
+    return (
+      <Typography variant="Link/md">
+        <u>{children}</u>
+      </Typography>
+    )
  },

  [RTEMarkType.strikethrough]: (children: React.ReactNode) => {
@@ -705,13 +746,9 @@ export const renderOptions: RenderOptions = {
    className?: string,
    id?: string
  ) => {
-    let props = {
-      className,
-      id,
-    }
-    if (!className) {
-      delete props.className
-    }
+    const props = { id }
+    let propsClassName = className
+
    if (!id) {
      delete props.id
    }
@@ -721,60 +758,74 @@ export const renderOptions: RenderOptions = {
        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
        // to an existing class in the module style sheet. Due to our css modules plugin for
        // typescript, we cannot do this without the ts-ignore
-        props.className = styles[className]
+        propsClassName = styles[className]
      }
    }

    if (className === AvailableParagraphFormatEnum.footnote) {
      return (
-        <Footnote key={id} {...props}>
-          {children}
-        </Footnote>
+        <Typography key={id} variant="Label/xsRegular">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum.caption) {
      return (
-        <Caption key={id} {...props}>
-          {children}
-        </Caption>
+        <Typography key={id} variant="Body/Supporting text (caption)/smRegular">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum["script-1"]) {
      return (
-        <BiroScript key={id} type="one" {...props}>
-          {children}
-        </BiroScript>
+        <Typography key={id} variant="Title/Decorative/lg">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum["script-2"]) {
      return (
-        <BiroScript key={id} type="two" {...props}>
-          {children}
-        </BiroScript>
+        <Typography key={id} variant="Title/Decorative/md">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
      return (
-        <Subtitle key={id} {...props} type="one">
-          {children}
-        </Subtitle>
+        <Typography key={id} variant="Title/Subtitle/lg">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
      )
    }
    if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
      return (
-        <Subtitle key={id} {...props} type="two">
-          {children}
-        </Subtitle>
+        <Typography key={id} variant="Title/Subtitle/md">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
      )
    }
    return (
-      <span key={id} {...props}>
-        {children}
-      </span>
+      <Typography key={id} variant="Body/Paragraph/mdRegular">
+        <span className={cx(styles.span, propsClassName)} {...props}>
+          {children}
+        </span>
+      </Typography>
    )
  },

--- a/apps/scandic-web/components/Sidebar/index.tsx
+++ b/apps/scandic-web/components/Sidebar/index.tsx
@@ -20,12 +20,11 @@ export default function Sidebar({ blocks }: SidebarProps) {
        switch (block.typename) {
          case SidebarEnums.blocks.Content:
            return (
-              <section key={`${block.typename}-${idx}`}>
-                <JsonToHtml
-                  embeds={block.content.embedded_itemsConnection.edges}
-                  nodes={block.content.json.children}
-                />
-              </section>
+              <JsonToHtml
+                key={`${block.typename}-${idx}`}
+                embeds={block.content.embedded_itemsConnection.edges}
+                nodes={block.content.json.children}
+              />
            )
          case SidebarEnums.blocks.DynamicContent:
            switch (block.dynamic_content.component) {
--- a/apps/scandic-web/components/Webviews/AccountPage/Blocks.tsx
+++ b/apps/scandic-web/components/Webviews/AccountPage/Blocks.tsx
@@ -80,14 +80,13 @@ export default async function Content({ content }: ContentProps) {
              )
            case BlocksEnums.block.TextContent:
              return (
-                <section key={`${item.__typename}-${idx}`}>
-                  <JsonToHtml
-                    embeds={
-                      item.text_content.content.embedded_itemsConnection.edges
-                    }
-                    nodes={item.text_content.content.json.children}
-                  />
-                </section>
+                <JsonToHtml
+                  key={`${item.__typename}-${idx}`}
+                  embeds={
+                    item.text_content.content.embedded_itemsConnection.edges
+                  }
+                  nodes={item.text_content.content.json.children}
+                />
              )
            default:
              return null
--- a/apps/scandic-web/components/Webviews/LoyaltyPage/Blocks.tsx
+++ b/apps/scandic-web/components/Webviews/LoyaltyPage/Blocks.tsx
@@ -23,12 +23,11 @@ export default async function Blocks({ blocks }: BlocksProps) {
          )
        case BlocksEnums.block.Content:
          return (
-            <section key={`${block.__typename}-${idx}`}>
-              <JsonToHtml
-                nodes={block.content.json.children}
-                embeds={block.content.embedded_itemsConnection.edges}
-              />
-            </section>
+            <JsonToHtml
+              key={`${block.__typename}-${idx}`}
+              nodes={block.content.json.children}
+              embeds={block.content.embedded_itemsConnection.edges}
+            />
          )
        case BlocksEnums.block.DynamicContent:
          const dynamicContent = {