Build package

dist/components/PDF.scss

@@ -58,6 +58,8 @@ $padding-horizontal-table-data: 4px;
 $padding-vertical-no-border-table-header: 0px;
 $padding-vertical-no-border-table-data: 2px;
 
+$column-gap-grid: 20px;
+
 $scaling-for-signed-documents: 1.10802;
 
 html,
@@ -239,32 +241,40 @@ body {
                 list-style: none;
             }
         }
-        &[style*="--title-width"] {
-            display: flex;
-            flex-flow: row wrap;
-            align-items: end;
-            dt {
-                width: var(--title-width);
-            }
-            dd {
-                flex-basis: calc(100% - var(--title-width));
-                flex-grow: 1;
+        &[style*="--display-type: inline"],
+        &:not([style*="--display-type"]) {
+            &[style*="--title-width"] {
+                display: flex;
+                flex-flow: row wrap;
+                align-items: end;
+                dt {
+                    width: var(--title-width);
+                }
+                dd {
+                    flex-basis: calc(100% - var(--title-width));
+                    flex-grow: 1;
+                }
             }
-        }
-        &:not([style*="--title-width"]) {
-            dt {
-                display: inline;
-                &::before {
-                    display: block;
-                    content: "";
+            &:not([style*="--title-width"]) {
+                dt {
+                    display: inline;
+                    &::before {
+                        display: block;
+                        content: "";
+                    }
+                    &::after {
+                        display: inline;
+                        content: " ";
+                    }
                 }
-                &::after {
+                dd {
                     display: inline;
-                    content: " ";
                 }
             }
+        }
+        &[style*="--display-type: stacked"] {
             dd {
-                display: inline;
+                margin-bottom: $margin-bottom-list;
             }
         }
     }
@@ -344,6 +354,13 @@ body {
         }
     }
 
+    .grid {
+        display: grid;
+        justify-content: space-between;
+        grid-template-columns: repeat(var(--columns), 1fr);
+        column-gap: $column-gap-grid;
+    }
+
     blockquote {
         background: var(--color-secondary-x-light, colors.$color-secondary-x-light);
         border-left: $border-left-width-blockquote solid var(--color-border, colors.$color-border);
@@ -495,12 +512,20 @@ body {
             dd {
                 margin: calc($margin-vertical-description-list * $scaling-for-signed-documents) 0;
             }
-            &[style*="--title-width"] {
-                dt {
-                    width: calc(var(--title-width) * $scaling-for-signed-documents);
+            &[style*="--display-type: inline"],
+            &:not([style*="--display-type"]) {
+                &[style*="--title-width"] {
+                    dt {
+                        width: calc(var(--title-width) * $scaling-for-signed-documents);
+                    }
+                    dd {
+                        flex-basis: calc(100% - (var(--title-width) * $scaling-for-signed-documents));
+                    }
                 }
+            }
+            &[style*="--display-type: stacked"] {
                 dd {
-                    flex-basis: calc(100% - (var(--title-width) * $scaling-for-signed-documents));
+                    margin-bottom: calc($margin-bottom-list * $scaling-for-signed-documents);
                 }
             }
         }
@@ -546,6 +571,10 @@ body {
             }
         }
 
+        .grid {
+            column-gap: calc($column-gap-grid * $scaling-for-signed-documents);
+        }
+
         blockquote {
             background: var(--color-secondary-x-light, colors.$color-secondary-x-light);
             border-left: calc($border-left-width-blockquote * $scaling-for-signed-documents) solid