diff --git a/src/blocks/Blocks.d.ts b/src/blocks/Blocks.d.ts
index 7f05886..462ceba 100644
--- a/src/blocks/Blocks.d.ts
+++ b/src/blocks/Blocks.d.ts
@@ -1,4 +1,4 @@
-import { 
+import {
   EmbedBlockFragment,
   ImageBlockFragment,
   PagePartialBlockFragment,
diff --git a/src/blocks/PagePartialBlock/PagePartialBlock.astro b/src/blocks/PagePartialBlock/PagePartialBlock.astro
index 9dca605..3f88918 100644
--- a/src/blocks/PagePartialBlock/PagePartialBlock.astro
+++ b/src/blocks/PagePartialBlock/PagePartialBlock.astro
@@ -58,3 +58,45 @@ const isLayout = (layout: PagePartialBlockFragment['layout']) => block.layout ==
     </>))}
   </Tabs>
 )}
+
+{ isLayout('details-vertical') && (
+  <dl data-layout="vertical">
+    { items.map((item) => (
+      <>
+        <dt>{ item.title }</dt>
+        {item.blocks.map((block) => (
+          <dd>
+            <Blocks blocks={ [block] }/>
+          </dd>
+        ))}
+      </>
+    )) }
+  </dl>
+)}
+
+{ isLayout('details-horizontal') && (
+  <dl data-layout="horizontal">
+    { items.map((item) => (
+      <>
+        <dt>{ item.title }</dt>
+        {item.blocks.map((block) => (
+          <dd>
+            <Blocks blocks={ [block] }/>
+          </dd>
+        ))}
+
+      </>
+    )) }
+  </dl>
+)}
+
+<style>
+    dl[data-layout="horizontal"] {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+    }
+
+    dl[data-layout="horizontal"] dd {
+        grid-column: 2;
+    }
+</style>