From c6973507c92cde5cd274579d3b9308c9b8d0eabd Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 31 Mar 2021 14:49:56 +0700
Subject: [PATCH] Add CSS panel

---
 client/index.html                             |   2 +-
 client/patterns/accordion/Details.tsx         | 160 ++++----
 client/patterns/arrow-buttons/Details.tsx     | 293 +++++++-------
 client/patterns/avatar-list/Details.tsx       |  38 +-
 client/patterns/avatar/Details.tsx            |  86 ++--
 client/patterns/badge/Details.tsx             |  62 +--
 client/patterns/breadcrumb/Details.tsx        |  48 +--
 client/patterns/button-with-icon/Details.tsx  |  62 +--
 client/patterns/card-layout/Details.tsx       |  66 ++--
 client/patterns/card/Details.tsx              |  64 +--
 client/patterns/centering/Details.tsx         |  38 +-
 client/patterns/chip/Details.tsx              |  30 +-
 .../patterns/circular-navigation/Details.tsx  |  54 +--
 client/patterns/close-button/Details.tsx      |  96 ++---
 client/patterns/cookie-banner/Details.tsx     |  70 ++--
 client/patterns/corner-ribbon/Details.tsx     |  92 ++---
 client/patterns/curved-background/Details.tsx |  40 +-
 .../custom-checkbox-button/Details.tsx        |  96 ++---
 .../patterns/custom-radio-button/Details.tsx  |  96 ++---
 client/patterns/diagonal-section/Details.tsx  |  82 ++--
 client/patterns/docked-at-corner/Details.tsx  |  76 ++--
 client/patterns/dot-leader/Details.tsx        | 106 ++---
 client/patterns/dot-navigation/Details.tsx    |  60 +--
 client/patterns/drawer/Details.tsx            |  70 ++--
 client/patterns/drop-area/Details.tsx         |  62 +--
 client/patterns/drop-cap/Details.tsx          |  46 +--
 client/patterns/dropdown/Details.tsx          | 142 +++----
 .../patterns/fading-long-section/Details.tsx  |  72 ++--
 .../patterns/feature-comparison/Details.tsx   | 216 +++++-----
 client/patterns/feature-list/Details.tsx      |  58 +--
 client/patterns/fixed-at-corner/Details.tsx   |  36 +-
 client/patterns/fixed-at-side/Details.tsx     |  46 +--
 client/patterns/floating-label/Details.tsx    |  96 ++---
 client/patterns/full-background/Details.tsx   |  58 +--
 client/patterns/full-screen-menu/Details.tsx  | 150 +++----
 client/patterns/holy-grail/Details.tsx        | 106 ++---
 client/patterns/initial-avatar/Details.tsx    |  78 ++--
 client/patterns/input-addon/Details.tsx       | 254 ++++++------
 client/patterns/keyboard-shortcut/Details.tsx |  52 +--
 client/patterns/lined-paper/Details.tsx       |  66 ++--
 client/patterns/media-object/Details.tsx      |  46 +--
 client/patterns/mega-menu/Details.tsx         | 132 +++----
 client/patterns/menu/Details.tsx              | 230 +++++------
 client/patterns/modal/Details.tsx             | 104 ++---
 client/patterns/nested-dropdowns/Details.tsx  |  66 ++--
 client/patterns/notification/Details.tsx      |  82 ++--
 .../patterns/overlay-play-button/Details.tsx  | 100 ++---
 client/patterns/pagination/Details.tsx        | 180 ++++-----
 client/patterns/popover-arrow/Details.tsx     | 370 +++++++++---------
 .../patterns/presence-indicator/Details.tsx   |  72 ++--
 .../previous-next-buttons/Details.tsx         | 108 ++---
 client/patterns/pricing-table/Details.tsx     | 166 ++++----
 client/patterns/progress-bar/Details.tsx      |  80 ++--
 client/patterns/property-list/Details.tsx     |  66 ++--
 .../questions-and-answers/Details.tsx         | 118 +++---
 .../patterns/radial-progress-bar/Details.tsx  |  32 +-
 .../patterns/radio-button-group/Details.tsx   |  68 ++--
 client/patterns/radio-switch/Details.tsx      | 152 +++----
 client/patterns/rating/Details.tsx            |  40 +-
 client/patterns/resizable-element/Details.tsx | 240 ++++++------
 client/patterns/ribbon/Details.tsx            | 142 +++----
 .../patterns/same-height-columns/Details.tsx  | 146 +++----
 client/patterns/search-box/Details.tsx        | 120 +++---
 client/patterns/separator/Details.tsx         |  86 ++--
 client/patterns/sidebar/Details.tsx           |  64 +--
 client/patterns/simple-grid/Details.tsx       | 172 ++++----
 client/patterns/slider/Details.tsx            |  54 +--
 client/patterns/spin-button/Details.tsx       | 126 +++---
 client/patterns/split-navigation/Details.tsx  |  64 +--
 client/patterns/split-screen/Details.tsx      |  66 ++--
 client/patterns/stacked-cards/Details.tsx     |  94 ++---
 client/patterns/stamp-border/Details.tsx      |  68 ++--
 client/patterns/statistic/Details.tsx         |  58 +--
 client/patterns/status-light/Details.tsx      |  72 ++--
 client/patterns/stepper-input/Details.tsx     | 146 +++----
 client/patterns/sticky-footer/Details.tsx     |  66 ++--
 client/patterns/sticky-header/Details.tsx     |  44 +--
 client/patterns/sticky-sections/Details.tsx   |  76 ++--
 .../patterns/sticky-table-column/Details.tsx  | 198 +++++-----
 .../patterns/sticky-table-headers/Details.tsx | 144 +++----
 client/patterns/switch/Details.tsx            |  86 ++--
 client/patterns/tab/Details.tsx               |  76 ++--
 client/patterns/teardrop/Details.tsx          |  62 +--
 client/patterns/timeline/Details.tsx          | 144 +++----
 .../toggle-password-visibility/Details.tsx    | 120 +++---
 client/patterns/tooltip/Details.tsx           |  68 ++--
 client/patterns/triangle-buttons/Details.tsx  | 284 +++++++-------
 client/patterns/upload-button/Details.tsx     | 124 +++---
 client/patterns/validation-icon/Details.tsx   | 196 +++++-----
 client/patterns/video-background/Details.tsx  | 124 +++---
 client/patterns/watermark/Details.tsx         | 122 +++---
 client/patterns/wizard/Details.tsx            | 190 ++++-----
 client/placeholders/BrowserFrame.tsx          |  15 +-
 client/placeholders/browserFrame.css          |   7 +-
 94 files changed, 4762 insertions(+), 4739 deletions(-)

diff --git a/client/index.html b/client/index.html
index aa4c700..7bc0488 100644
--- a/client/index.html
+++ b/client/index.html
@@ -18,4 +18,4 @@ gtag('js', new Date());
 gtag('config', 'UA-139616701-3');
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
index 0bd314d..0903b21 100644
--- a/client/patterns/accordion/Details.tsx
+++ b/client/patterns/accordion/Details.tsx
@@ -64,89 +64,24 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderBottomColor: 'transparent',
-                                    borderRadius: '4px',
-                                    width: '60%',
-                                }}
-                            >
-                                <Item
-                                    index={0}
-                                    title={<div style={{ width: '40%' }}><Rectangle /></div>}
-                                >
-                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                                </Item>
-                                <Item
-                                    index={1}
-                                    title={<div style={{ width: '80%' }}><Rectangle /></div>}
-                                >
-                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
-                                </Item>
-                                <Item
-                                    index={2}
-                                    title={<div style={{ width: '60%' }}><Rectangle /></div>}
-                                >
-                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                                </Item>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Container -->
-<div style="
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-bottom-color: transparent;
-    border-radius: 4px;
-">
+<div class="container">
     <!-- Each accordion item -->
-    <div style="
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    ">
+    <div class="item">
         <!-- Heading -->
-        <div style="
-            /* Center the content horizontally */
-            align-items: center;
-            display: flex;
-
-            cursor: pointer;
-            padding: 16px;
-        ">
+        <div class="header">
             <!-- The toggle icon -->
-            <div style="margin-right: 12px;">...</div>
+            <div class="toggle">...</div>
 
             <!-- The title -->
-            <div style="
-                flex: 1; /* Take remaining width */
-            ">
+            <div class="title">
                 ...
             </div>
         </div>
 
         <!-- The content -->
-        <div style="
-            /* For selected item */
-            display: block;
-
-            /* For not selected item */
-            display: none;
-
-            border-top: 1px solid rgba(0, 0, 0, 0.3);
-            padding: 16px;
-        ">
+        <div class="content">
             ...
         </div>
     </div>
@@ -155,7 +90,86 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={`
+.container {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-bottom-color: transparent;
+    border-radius: 4px;
+}
+
+.item {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.header {
+    /* Center the content horizontally */
+    align-items: center;
+    display: flex;
+
+    cursor: pointer;
+    padding: 16px;
+}
+.toggle {
+    margin-right: 12px;
+}
+.title {
+    /* Take remaining width */
+    flex: 1;
+}
+
+.content {
+    /* For not selected item */
+    display: none;
+
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
+    padding: 16px;
+}
+.content.selected {
+    /* For selected item */
+    display: block;
+}
+`}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderBottomColor: 'transparent',
+                                borderRadius: '4px',
+                                width: '60%',
+                            }}
+                        >
+                            <Item
+                                index={0}
+                                title={<div style={{ width: '40%' }}><Rectangle /></div>}
+                            >
+                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                            </Item>
+                            <Item
+                                index={1}
+                                title={<div style={{ width: '80%' }}><Rectangle /></div>}
+                            >
+                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                            </Item>
+                            <Item
+                                index={2}
+                                title={<div style={{ width: '60%' }}><Rectangle /></div>}
+                            >
+                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                            </Item>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx
index 3fdc596..779da39 100644
--- a/client/patterns/arrow-buttons/Details.tsx
+++ b/client/patterns/arrow-buttons/Details.tsx
@@ -20,151 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    height: '200px',
-                                    position: 'relative',
-                                    width: '200px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'translate(-50%, -50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div
-                                            style={{
-                                                backgroundColor: 'transparent',
-                                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                                height: '12px',
-                                                transform: 'translateY(25%) rotate(45deg)',
-                                                width: '12px',
-                                            }}
-                                        />
-                                        <div style={{ marginLeft: '8px' }}>Up</div>
-                                    </button>
-                                </div>
-                                <div
-                                    style={{
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: '50%',
-                                        transform: 'translate(50%, -50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div style={{ marginRight: '8px' }}>Right</div>
-                                        <div
-                                            style={{
-                                                backgroundColor: 'transparent',
-                                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                                height: '12px',
-                                                transform: 'translateX(-25%) rotate(45deg)',
-                                                width: '12px',
-                                            }}
-                                        />
-                                    </button>
-                                </div>
-                                <div
-                                    style={{
-                                        bottom: 0,
-                                        left: '50%',
-                                        position: 'absolute',
-                                        transform: 'translate(-50%, 50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div
-                                            style={{
-                                                backgroundColor: 'transparent',
-                                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                                height: '12px',
-                                                transform: 'translateY(-25%) rotate(45deg)',
-                                                width: '12px',
-                                            }}
-                                        />
-                                        <div style={{ marginLeft: '8px' }}>Down</div>
-                                    </button>
-                                </div>
-                                <div
-                                    style={{
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div
-                                            style={{
-                                                backgroundColor: 'transparent',
-                                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                                height: '12px',
-                                                transform: 'translateX(25%) rotate(45deg)',
-                                                width: '12px',
-                                            }}
-                                        />
-                                        <div style={{ marginLeft: '8px' }}>Left</div>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Up arrow button -->
 <button style="
     /* Center the content */
@@ -281,7 +137,152 @@ const Details: React.FC<{}> = () => {
     ...
 </button>
 `}
-                />
+css={`
+`}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                height: '200px',
+                                position: 'relative',
+                                width: '200px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'translate(-50%, -50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                            height: '12px',
+                                            transform: 'translateY(25%) rotate(45deg)',
+                                            width: '12px',
+                                        }}
+                                    />
+                                    <div style={{ marginLeft: '8px' }}>Up</div>
+                                </button>
+                            </div>
+                            <div
+                                style={{
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: '50%',
+                                    transform: 'translate(50%, -50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div style={{ marginRight: '8px' }}>Right</div>
+                                    <div
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                            height: '12px',
+                                            transform: 'translateX(-25%) rotate(45deg)',
+                                            width: '12px',
+                                        }}
+                                    />
+                                </button>
+                            </div>
+                            <div
+                                style={{
+                                    bottom: 0,
+                                    left: '50%',
+                                    position: 'absolute',
+                                    transform: 'translate(-50%, 50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                            height: '12px',
+                                            transform: 'translateY(-25%) rotate(45deg)',
+                                            width: '12px',
+                                        }}
+                                    />
+                                    <div style={{ marginLeft: '8px' }}>Down</div>
+                                </button>
+                            </div>
+                            <div
+                                style={{
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                            height: '12px',
+                                            transform: 'translateX(25%) rotate(45deg)',
+                                            width: '12px',
+                                        }}
+                                    />
+                                    <div style={{ marginLeft: '8px' }}>Left</div>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index 1390a2d..a3e376e 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -40,24 +40,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                            <div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
 ">
@@ -87,7 +70,24 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                        <div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index 53b7f73..8ae94d1 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '9999px',
-                                    height: '64px',
-                                    padding: '8px',
-                                    width: '64px',
-                                }}
-                            >
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    style={{
-                                        fill: 'none',
-                                        height: '100%',
-                                        stroke: "#FFF",
-                                        strokeLinecap: 'round',
-                                        strokeLinejoin: 'round',
-                                        strokeWidth: 1,
-                                        width: '100%',
-                                    }}
-                                >
-                                    <path
-                                        d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
-                                        M5,20.5
-                                        c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
-                                    />
-                                </svg>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Rounded border */
     border-radius: 50%;
@@ -82,7 +41,48 @@ const Details: React.FC<{}> = () => {
     />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '9999px',
+                                height: '64px',
+                                padding: '8px',
+                                width: '64px',
+                            }}
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                style={{
+                                    fill: 'none',
+                                    height: '100%',
+                                    stroke: "#FFF",
+                                    strokeLinecap: 'round',
+                                    strokeLinejoin: 'round',
+                                    strokeWidth: 1,
+                                    width: '100%',
+                                }}
+                            >
+                                <path
+                                    d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
+                                    M5,20.5
+                                    c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index 025df0a..9d853f7 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '9999px',
-                                    color: '#FFF',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    fontSize: '20px',
-                                    height: '32px',
-                                    justifyContent: 'center',
-                                    width: '32px',
-                                }}
-                            >
-                                1
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -68,7 +39,36 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                fontSize: '20px',
+                                height: '32px',
+                                justifyContent: 'center',
+                                width: '32px',
+                            }}
+                        >
+                            1
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index 98e022f..18d008b 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -20,29 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ alignItems: 'center', display: 'flex' }}>
-                                <div style={{ width: '128px' }}><Rectangle height={16} /></div>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                                <div style={{ width: '32px' }}><Rectangle height={16} /></div>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                                <div style={{ width: '64px' }}><Rectangle height={16} /></div>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                                <div style={{ width: '32px' }}><Rectangle height={16} /></div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Content is centered vertically */
     align-items: center;
@@ -58,7 +36,29 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ alignItems: 'center', display: 'flex' }}>
+                            <div style={{ width: '128px' }}><Rectangle height={16} /></div>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                            <div style={{ width: '32px' }}><Rectangle height={16} /></div>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                            <div style={{ width: '64px' }}><Rectangle height={16} /></div>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                            <div style={{ width: '32px' }}><Rectangle height={16} /></div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index c47699a..578f603 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -21,36 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '256px' }}>
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '8px',
-                                        display: 'flex',
-                                        height: '64px',
-                                        padding: '8px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}><Circle size={32} /></div>
-                                    <Rectangle />
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <button style="
     /* Center the content */
     align-items: center;
@@ -65,7 +36,36 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '256px' }}>
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '8px',
+                                    display: 'flex',
+                                    height: '64px',
+                                    padding: '8px',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ marginRight: '8px' }}><Circle size={32} /></div>
+                                <Rectangle />
+                            </button>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx
index 2120845..7bbb934 100644
--- a/client/patterns/card-layout/Details.tsx
+++ b/client/patterns/card-layout/Details.tsx
@@ -21,38 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    flexWrap: 'wrap',
-                                    margin: '0 -8px',
-                                    width: '60%',
-                                }}
-                            >
-                                {
-                                    Array(10).fill(0).map((_, index) => {
-                                        return (
-                                            <div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
-                                                <Rectangle height={80} />
-                                            </div>
-                                        );
-                                    })
-                                }
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
 
@@ -77,7 +46,38 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                margin: '0 -8px',
+                                width: '60%',
+                            }}
+                        >
+                            {
+                                Array(10).fill(0).map((_, index) => {
+                                    return (
+                                        <div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
+                                            <Rectangle height={80} />
+                                        </div>
+                                    );
+                                })
+                            }
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index 0cc6ba1..c504f95 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -22,37 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '16px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '8px',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    width: '256px',
-                                }}
-                            >
-                                <Rectangle height={150} />
-                                <div style={{ flex: 1, padding: '16px' }}>
-                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
-                                    <div style={{ width: '128px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -75,7 +45,37 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '16px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                width: '256px',
+                            }}
+                        >
+                            <Rectangle height={150} />
+                            <div style={{ flex: 1, padding: '16px' }}>
+                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                                <div style={{ width: '128px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index 0c303eb..7cbfa4b 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -21,24 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <Circle size={64} />
-                            <div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
-                            <div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
-                            <div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     align-items: center;
     display: flex;
@@ -47,7 +30,24 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <Circle size={64} />
+                        <div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
+                        <div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
+                        <div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
index b37db84..95a5125 100644
--- a/client/patterns/chip/Details.tsx
+++ b/client/patterns/chip/Details.tsx
@@ -25,20 +25,7 @@ const Details: React.FC<{}> = () => {
                     You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <InputChip>CSS</InputChip>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -64,7 +51,20 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <InputChip>CSS</InputChip>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.CloseButton]} />
diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx
index 31d290f..66d697e 100644
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -56,32 +56,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ position: 'relative' }}>
-                                <div style={{ height: '32px', width: '32px' }}>
-                                    <Square />
-                                </div>
-                                {
-                                    Array(numItems).fill(0).map((_, i) => {
-                                        return (
-                                            <CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
-                                        );
-                                    })
-                                }
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     position: relative;
 ">
@@ -133,7 +108,32 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ position: 'relative' }}>
+                            <div style={{ height: '32px', width: '32px' }}>
+                                <Square />
+                            </div>
+                            {
+                                Array(numItems).fill(0).map((_, i) => {
+                                    return (
+                                        <CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
+                                    );
+                                })
+                            }
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index 584e82d..d26689d 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -20,53 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <button
-                                style={{
-                                    backgroundColor: 'transparent',
-                                    borderColor: 'transparent',
-                                    cursor: 'pointer',
-                                    height: '32px',
-                                    position: 'relative',
-                                    width: '32px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                        height: '1px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(0%, -50%) rotate(45deg)',
-                                        width: '100%',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                        height: '100%',
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'translate(-50%, 0%) rotate(45deg)',
-                                        width: '1px',
-                                    }}
-                                />
-                            </button>
-                        </div>
-                    )}
-                    source={`
+html={`
 <button style="
     /* Reset */
     background-color: transparent;
@@ -113,7 +67,53 @@ const Details: React.FC<{}> = () => {
     " />
 </button>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <button
+                            style={{
+                                backgroundColor: 'transparent',
+                                borderColor: 'transparent',
+                                cursor: 'pointer',
+                                height: '32px',
+                                position: 'relative',
+                                width: '32px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    height: '1px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(0%, -50%) rotate(45deg)',
+                                    width: '100%',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    height: '100%',
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'translate(-50%, 0%) rotate(45deg)',
+                                    width: '1px',
+                                }}
+                            />
+                        </button>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
index aec2f57..6469e28 100644
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -22,40 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                position: 'relative',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: 0,
-                                    display: 'flex',
-                                    left: 0,
-                                    padding: '8px',
-                                    position: 'absolute',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '12px' }}>
-                                    <Block numberOfBlocks={5} />
-                                </div>
-                                <div style={{ width: '96px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Banner is displayed at the bottom */
     bottom: 0;
@@ -80,7 +47,40 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            position: 'relative',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: 0,
+                                display: 'flex',
+                                left: 0,
+                                padding: '8px',
+                                position: 'absolute',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ flex: 1, marginRight: '12px' }}>
+                                <Block numberOfBlocks={5} />
+                            </div>
+                            <div style={{ width: '96px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
         </DetailsLayout>
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
index 8e56977..1b9f96a 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -22,51 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    height: '256px',
-                                    position: 'relative',
-                                    width: '256px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        height: '100px',
-                                        left: 0,
-                                        overflow: 'hidden',
-                                        position: 'absolute',
-                                        top: 0,
-                                        width: '100px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                            height: '24px',
-                                            left: '-64px',
-                                            position: 'absolute',
-                                            textAlign: 'center',
-                                            top: '32px',
-                                            transform: 'rotate(-45deg)',
-                                            width: '206px',
-                                        }}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     position: relative;
 ">
@@ -109,7 +65,51 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                height: '256px',
+                                position: 'relative',
+                                width: '256px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '100px',
+                                    left: 0,
+                                    overflow: 'hidden',
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                        height: '24px',
+                                        left: '-64px',
+                                        position: 'absolute',
+                                        textAlign: 'center',
+                                        top: '32px',
+                                        transform: 'rotate(-45deg)',
+                                        width: '206px',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <section>
diff --git a/client/patterns/curved-background/Details.tsx b/client/patterns/curved-background/Details.tsx
index 6d467bf..d09fb7b 100644
--- a/client/patterns/curved-background/Details.tsx
+++ b/client/patterns/curved-background/Details.tsx
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                height: '100%',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderBottomLeftRadius: '50% 40%',
-                                    borderBottomRightRadius: '50% 40%',
-                                    height: '50%',
-                                    width: '100%',
-                                }}
-                            />
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Background color */
     background-color: rgba(0, 0, 0, 0.3);
@@ -53,7 +35,25 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            height: '100%',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderBottomLeftRadius: '50% 40%',
+                                borderBottomRightRadius: '50% 40%',
+                                height: '50%',
+                                width: '100%',
+                            }}
+                        />
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.DiagonalSection]} />
diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
index ee4582f..b923ddc 100644
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ b/client/patterns/custom-checkbox-button/Details.tsx
@@ -70,53 +70,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '200px' }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'inline-flex',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <Checkbox value='1' isChecked={false}>
-                                        <div style={{ width: '100px' }}><Rectangle /></div>
-                                    </Checkbox>
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'inline-flex',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <Checkbox value='2' isChecked={true}>
-                                        <div style={{ width: '200px' }}><Rectangle /></div>
-                                    </Checkbox>
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'inline-flex',
-                                    }}
-                                >
-                                    <Checkbox value='3' isChecked={false}>
-                                        <div style={{ width: '150px' }}><Rectangle /></div>
-                                    </Checkbox>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <label style="
     /* Center the content horizontally */
     align-items: center;
@@ -161,7 +115,53 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '200px' }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'inline-flex',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <Checkbox value='1' isChecked={false}>
+                                    <div style={{ width: '100px' }}><Rectangle /></div>
+                                </Checkbox>
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'inline-flex',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <Checkbox value='2' isChecked={true}>
+                                    <div style={{ width: '200px' }}><Rectangle /></div>
+                                </Checkbox>
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'inline-flex',
+                                }}
+                            >
+                                <Checkbox value='3' isChecked={false}>
+                                    <div style={{ width: '150px' }}><Rectangle /></div>
+                                </Checkbox>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
         </DetailsLayout>
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
index d36cd06..2398ce1 100644
--- a/client/patterns/custom-radio-button/Details.tsx
+++ b/client/patterns/custom-radio-button/Details.tsx
@@ -71,53 +71,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '200px' }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'inline-flex',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <Radio value='1'>
-                                        <div style={{ width: '100px' }}><Rectangle /></div>
-                                    </Radio>
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'inline-flex',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <Radio value='2'>
-                                        <div style={{ width: '200px' }}><Rectangle /></div>
-                                    </Radio>
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'inline-flex',
-                                    }}
-                                >
-                                    <Radio value='3'>
-                                        <div style={{ width: '150px' }}><Rectangle /></div>
-                                    </Radio>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <label style="
     /* Center the content horizontally */
     align-items: center;
@@ -164,7 +118,53 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '200px' }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'inline-flex',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <Radio value='1'>
+                                    <div style={{ width: '100px' }}><Rectangle /></div>
+                                </Radio>
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'inline-flex',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <Radio value='2'>
+                                    <div style={{ width: '200px' }}><Rectangle /></div>
+                                </Radio>
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'inline-flex',
+                                }}
+                            >
+                                <Radio value='3'>
+                                    <div style={{ width: '150px' }}><Rectangle /></div>
+                                </Radio>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
         </DetailsLayout>
diff --git a/client/patterns/diagonal-section/Details.tsx b/client/patterns/diagonal-section/Details.tsx
index 4706b2a..a00a3e5 100644
--- a/client/patterns/diagonal-section/Details.tsx
+++ b/client/patterns/diagonal-section/Details.tsx
@@ -21,46 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    height: '200px',
-                                    justifyContent: 'center',
-                                    position: 'relative',
-                                    width: '75%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                        height: '100%',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'skewY(-5deg)',
-                                        width: '100%',
-                                        zIndex: -1,
-                                    }}
-                                />
-                                <div style={{ width: '60%' }}>
-                                    <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the diagonal area */
     position: relative;
@@ -90,7 +51,46 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '200px',
+                                justifyContent: 'center',
+                                position: 'relative',
+                                width: '75%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    height: '100%',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'skewY(-5deg)',
+                                    width: '100%',
+                                    zIndex: -1,
+                                }}
+                            />
+                            <div style={{ width: '60%' }}>
+                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.CurvedBackground]} />
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index 7330e71..e00ac80 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -22,43 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '8px',
-                                    padding: '16px',
-                                    position: 'relative',
-                                    width: '128px',
-                                }}
-                            >
-                                <Rectangle />
-                                <div
-                                    style={{
-                                        backgroundColor: '#00449E',
-                                        borderRadius: '9999px',
-                                        height: '32px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: 0,
-                                        transform: 'translate(50%, -50%)',
-                                        width: '32px',
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     position: relative;
 ">
@@ -80,7 +44,43 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '8px',
+                                padding: '16px',
+                                position: 'relative',
+                                width: '128px',
+                            }}
+                        >
+                            <Rectangle />
+                            <div
+                                style={{
+                                    backgroundColor: '#00449E',
+                                    borderRadius: '9999px',
+                                    height: '32px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: 0,
+                                    transform: 'translate(50%, -50%)',
+                                    width: '32px',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <section>
                 <Heading title="Use cases" />
diff --git a/client/patterns/dot-leader/Details.tsx b/client/patterns/dot-leader/Details.tsx
index d8f3e2c..581434e 100644
--- a/client/patterns/dot-leader/Details.tsx
+++ b/client/patterns/dot-leader/Details.tsx
@@ -23,58 +23,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div style={{ width: '400px' }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        marginBottom: '8px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ width: '60%' }}><Rectangle /></div>
-                                    <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
-                                    <Circle />
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        marginBottom: '8px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ width: '40%' }}><Rectangle /></div>
-                                    <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
-                                    <Circle />
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ width: '30%' }}><Rectangle /></div>
-                                    <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
-                                    <Circle />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -100,7 +49,58 @@ const Details: React.FC<{}> = () => {
     <div>...</div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div style={{ width: '400px' }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginBottom: '8px',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ width: '60%' }}><Rectangle /></div>
+                                <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
+                                <Circle />
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginBottom: '8px',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ width: '40%' }}><Rectangle /></div>
+                                <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
+                                <Circle />
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ width: '30%' }}><Rectangle /></div>
+                                <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
+                                <Circle />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <section>
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
index da08e77..fb0f128 100644
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -44,35 +44,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <ul
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    listStyleType: 'none',
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                <Dot index={0} />
-                                <Dot index={1} />
-                                <Dot index={2} />
-                                <Dot index={3} />
-                            </ul>
-                        </div>
-                    )}
-                    source={`
+html={`
 <ul style="
     /* Center the content */
     align-items: center;
@@ -102,7 +74,35 @@ const Details: React.FC<{}> = () => {
     " />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <ul
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                listStyleType: 'none',
+                                margin: 0,
+                                padding: 0,
+                            }}
+                        >
+                            <Dot index={0} />
+                            <Dot index={1} />
+                            <Dot index={2} />
+                            <Dot index={3} />
+                        </ul>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/drawer/Details.tsx b/client/patterns/drawer/Details.tsx
index 04d3897..b62821b 100644
--- a/client/patterns/drawer/Details.tsx
+++ b/client/patterns/drawer/Details.tsx
@@ -23,40 +23,7 @@ const Details: React.FC<{}> = () => {
                     This pattern is also known as off-canvas.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                height: '100%',
-                                position: 'relative',
-                                width: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '100%',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#fff',
-                                    height: '100%',
-                                    left: 0,
-                                    padding: '16px',
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '250px',
-                                }}
-                            >
-                                <Block numberOfBlocks={20} />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Container takes full size */
     height: 100%;
@@ -98,7 +65,40 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            height: '100%',
+                            position: 'relative',
+                            width: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '100%',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#fff',
+                                height: '100%',
+                                left: 0,
+                                padding: '16px',
+                                position: 'absolute',
+                                top: 0,
+                                width: '250px',
+                            }}
+                        >
+                            <Block numberOfBlocks={20} />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
index 19d48be..fb27e34 100644
--- a/client/patterns/drop-area/Details.tsx
+++ b/client/patterns/drop-area/Details.tsx
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '4px dashed rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    height: '80%',
-                                    justifyContent: 'center',
-                                    width: '80%',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}>
-                                    <Block justify='center' numberOfBlocks={10} />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -63,7 +34,36 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '4px dashed rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '80%',
+                                justifyContent: 'center',
+                                width: '80%',
+                            }}
+                        >
+                            <div style={{ width: '40%' }}>
+                                <Block justify='center' numberOfBlocks={10} />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
index 0ec44e6..6830e07 100644
--- a/client/patterns/drop-cap/Details.tsx
+++ b/client/patterns/drop-cap/Details.tsx
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '256px' }}>
-                                <div className="p-drop-cap">
-                                    Cascading Style Sheets (CSS) is a style sheet language used for
-                                    describing the presentation of a document written in a markup
-                                    language like HTML. CSS is a cornerstone technology of the World Wide Web,
-                                    alongside HTML and JavaScript.
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 /* Styles for the first letter */
 .p-drop-cap:first-letter {
@@ -64,7 +43,28 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '256px' }}>
+                            <div className="p-drop-cap">
+                                Cascading Style Sheets (CSS) is a style sheet language used for
+                                describing the presentation of a document written in a markup
+                                language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                alongside HTML and JavaScript.
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
index f420cb0..039fe87 100644
--- a/client/patterns/dropdown/Details.tsx
+++ b/client/patterns/dropdown/Details.tsx
@@ -28,76 +28,7 @@ const Details: React.FC<{}> = () => {
                     Move the mouse over the button to see the dropdown.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                className="p-dropdown"
-                                style={{
-                                    position: 'relative',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        height: '32px',
-                                        width: '128px',
-                                    }}
-                                >
-                                    <span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
-                                    <Triangle size={8} corner='b' />
-                                </button>
-
-                                <div
-                                    className="p-dropdown-content"
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        height: '200px',
-                                        left: 0,
-                                        paddingTop: '4px',
-                                        position: 'absolute',
-                                        top: '100%',
-                                        width: '200px',
-                                        zIndex: 9999,
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderRadius: '4px',
-                                            display: 'flex',
-                                            height: '100%',
-                                            justifyContent: 'center',
-                                            padding: '16px',
-                                            width: '100%',
-                                        }}
-                                    >
-                                        <Block numberOfBlocks={10} justify='center' />
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                style={{
-                                    marginTop: '16px',
-                                    width: '256px',
-                                }}
-                            >
-                                <Block numberOfBlocks={20} justify='center' />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 /* Hide the dropdown's content by default -->
 .dropdown-content {
@@ -142,7 +73,76 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            className="p-dropdown"
+                            style={{
+                                position: 'relative',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    height: '32px',
+                                    width: '128px',
+                                }}
+                            >
+                                <span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
+                                <Triangle size={8} corner='b' />
+                            </button>
+
+                            <div
+                                className="p-dropdown-content"
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    height: '200px',
+                                    left: 0,
+                                    paddingTop: '4px',
+                                    position: 'absolute',
+                                    top: '100%',
+                                    width: '200px',
+                                    zIndex: 9999,
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        height: '100%',
+                                        justifyContent: 'center',
+                                        padding: '16px',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <Block numberOfBlocks={10} justify='center' />
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                marginTop: '16px',
+                                width: '256px',
+                            }}
+                        >
+                            <Block numberOfBlocks={20} justify='center' />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
         </DetailsLayout>
diff --git a/client/patterns/fading-long-section/Details.tsx b/client/patterns/fading-long-section/Details.tsx
index 26f25dc..692642f 100644
--- a/client/patterns/fading-long-section/Details.tsx
+++ b/client/patterns/fading-long-section/Details.tsx
@@ -23,41 +23,7 @@ const Details: React.FC<{}> = () => {
                     Fading a long section to indicate there is more content.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ position: 'relative', width: '200px' }}>
-                                <div
-                                    style={{
-                                        height: '200px',
-                                        overflowY: 'scroll',
-                                    }}
-                                >
-                                    <Block numberOfBlocks={50} />
-                                </div>
-
-                                <div
-                                    style={{
-                                        background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
-                                        bottom: 0,
-                                        height: '30px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        width: '100%',
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the faded element */
     position: relative;
@@ -89,7 +55,41 @@ const Details: React.FC<{}> = () => {
     " />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ position: 'relative', width: '200px' }}>
+                            <div
+                                style={{
+                                    height: '200px',
+                                    overflowY: 'scroll',
+                                }}
+                            >
+                                <Block numberOfBlocks={50} />
+                            </div>
+
+                            <div
+                                style={{
+                                    background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
+                                    bottom: 0,
+                                    height: '30px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    width: '100%',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
index 965e726..7038763 100644
--- a/client/patterns/feature-comparison/Details.tsx
+++ b/client/patterns/feature-comparison/Details.tsx
@@ -23,113 +23,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div style={{ width: '60%' }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        padding: '12px 0',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ flex: 1, marginRight: '16px' }}>
-                                        <Rectangle />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                        <Rectangle />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                        <Rectangle />
-                                    </div>
-                                </div>
-
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        padding: '8px 0',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ flex: 1, marginRight: '16px' }}>
-                                        <Block numberOfBlocks={4} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                        <Circle size={8} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                        <Circle size={8} />
-                                    </div>
-                                </div>
-
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        padding: '8px 0',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ flex: 1, marginRight: '16px' }}>
-                                        <Block numberOfBlocks={5} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
-                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                        <Circle size={8} />
-                                    </div>
-                                </div>
-
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        padding: '8px 0',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ flex: 1, marginRight: '16px' }}>
-                                        <Block numberOfBlocks={4} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                        <Circle size={8} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                                </div>
-
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        padding: '8px 0',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ flex: 1, marginRight: '16px' }}>
-                                        <Block numberOfBlocks={6} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                        <Circle size={8} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     align-items: center;
     display: flex;
@@ -174,7 +68,113 @@ const Details: React.FC<{}> = () => {
 <!-- Repeated items -->
 ...
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    padding: '12px 0',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ flex: 1, marginRight: '16px' }}>
+                                    <Rectangle />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                    <Rectangle />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                    <Rectangle />
+                                </div>
+                            </div>
+
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    padding: '8px 0',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ flex: 1, marginRight: '16px' }}>
+                                    <Block numberOfBlocks={4} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                    <Circle size={8} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                    <Circle size={8} />
+                                </div>
+                            </div>
+
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    padding: '8px 0',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ flex: 1, marginRight: '16px' }}>
+                                    <Block numberOfBlocks={5} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
+                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                    <Circle size={8} />
+                                </div>
+                            </div>
+
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    padding: '8px 0',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ flex: 1, marginRight: '16px' }}>
+                                    <Block numberOfBlocks={4} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                    <Circle size={8} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
+                            </div>
+
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    padding: '8px 0',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ flex: 1, marginRight: '16px' }}>
+                                    <Block numberOfBlocks={6} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                    <Circle size={8} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index dc25f47..972365b 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -23,34 +23,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div style={{ width: '60%' }}>
-                                <div style={{ display: 'flex', marginBottom: '32px' }}>
-                                    <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
-                                    <div style={{ flex: 1 }}>
-                                        <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
-                                        <Block numberOfBlocks={10} />
-                                    </div>
-                                </div>
-                                <div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
-                                    <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
-                                    <div style={{ flex: 1 }}>
-                                        <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
-                                        <Block numberOfBlocks={15} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Feature item -->
 <div style="
     display: flex;
@@ -80,7 +53,34 @@ const Details: React.FC<{}> = () => {
 <!-- Repeated items -->
 ...
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}>
+                            <div style={{ display: 'flex', marginBottom: '32px' }}>
+                                <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
+                                <div style={{ flex: 1 }}>
+                                    <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
+                                    <Block numberOfBlocks={10} />
+                                </div>
+                            </div>
+                            <div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
+                                <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
+                                <div style={{ flex: 1 }}>
+                                    <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
+                                    <Block numberOfBlocks={15} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index 701296a..b716900 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -21,23 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div style={{ height: '100%', position: 'relative' }}>
-                            <div style={{ left: 0, position: 'absolute', top: 0 }}>
-                                <Triangle size={64} corner="tl" />
-                            </div>
-                            <div style={{ position: 'absolute', right: 0, top: 0 }}>
-                                <Triangle size={64} corner="tr" />
-                            </div>
-                            <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
-                                <Triangle size={64} corner="br" />
-                            </div>
-                            <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
-                                <Triangle size={64} corner="bl" />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     position: relative;
 ">
@@ -78,7 +62,23 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div style={{ height: '100%', position: 'relative' }}>
+                        <div style={{ left: 0, position: 'absolute', top: 0 }}>
+                            <Triangle size={64} corner="tl" />
+                        </div>
+                        <div style={{ position: 'absolute', right: 0, top: 0 }}>
+                            <Triangle size={64} corner="tr" />
+                        </div>
+                        <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
+                            <Triangle size={64} corner="br" />
+                        </div>
+                        <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
+                            <Triangle size={64} corner="bl" />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
         </DetailsLayout>
diff --git a/client/patterns/fixed-at-side/Details.tsx b/client/patterns/fixed-at-side/Details.tsx
index a9e014e..b74b17d 100644
--- a/client/patterns/fixed-at-side/Details.tsx
+++ b/client/patterns/fixed-at-side/Details.tsx
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                height: '100%',
-                                position: 'relative',
-                                width: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '200px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(0, -50%)',
-                                    width: '32px',
-                                }}
-                            />
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Fixed at the middle of side -->
 <div style="
     right: 0;
@@ -53,7 +32,28 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            height: '100%',
+                            position: 'relative',
+                            width: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '200px',
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translate(0, -50%)',
+                                width: '32px',
+                            }}
+                        />
+                    </div>
+                </BrowserFrame>
             </div>
 
             <section>
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index 64690f5..e3eecf2 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -24,53 +24,7 @@ const Details: React.FC<{}> = () => {
                     Type something in the input to see how the label is shown up.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                className="p-floating-container"
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    padding: '0 1px',
-                                    position: 'relative',
-                                    width: '200px',
-                                }}
-                            >
-                                <input
-                                    id="floating-label-input"
-                                    placeholder="Placeholder"
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        padding: '8px',
-                                        width: '100%',
-                                    }}
-                                />
-                                <label
-                                    htmlFor="floating-label-input"
-                                    style={{
-                                        left: '8px',
-                                        padding: '0 8px',
-                                        position: 'absolute',
-                                        top: 0,
-                                        transition: 'all 200ms',
-                                    }}
-                                >
-                                    Placeholder
-                                </label>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 .p-floating-container {
     position: relative;
@@ -103,7 +57,53 @@ const Details: React.FC<{}> = () => {
     <label>Placeholder</label>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            className="p-floating-container"
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                padding: '0 1px',
+                                position: 'relative',
+                                width: '200px',
+                            }}
+                        >
+                            <input
+                                id="floating-label-input"
+                                placeholder="Placeholder"
+                                type="text"
+                                style={{
+                                    borderColor: 'transparent',
+                                    padding: '8px',
+                                    width: '100%',
+                                }}
+                            />
+                            <label
+                                htmlFor="floating-label-input"
+                                style={{
+                                    left: '8px',
+                                    padding: '0 8px',
+                                    position: 'absolute',
+                                    top: 0,
+                                    transition: 'all 200ms',
+                                }}
+                            >
+                                Placeholder
+                            </label>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/full-background/Details.tsx b/client/patterns/full-background/Details.tsx
index 780e5c5..219ab85 100644
--- a/client/patterns/full-background/Details.tsx
+++ b/client/patterns/full-background/Details.tsx
@@ -21,34 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ width: '250px' }}>
-                                    <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -66,7 +39,34 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ width: '250px' }}>
+                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.VideoBackground]} />
diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx
index 17d79ba..e57b6df 100644
--- a/client/patterns/full-screen-menu/Details.tsx
+++ b/client/patterns/full-screen-menu/Details.tsx
@@ -20,80 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <button
-                                style={{
-                                    backgroundColor: 'transparent',
-                                    borderColor: 'transparent',
-                                    padding: 0,
-                                    position: 'absolute',
-                                    right: '16px',
-                                    top: '16px',
-                                }}
-                            >
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    style={{
-                                        fill: 'none',
-                                        height: 24,
-                                        stroke: '#000',
-                                        strokeLinecap: 'round',
-                                        strokeLinejoin: 'round',
-                                        strokeWidth: 1,
-                                        width: 24,
-                                    }}
-                                >
-                                    <path
-                                        d={`M7,16.999l10-10
-                                        M17,16.999l-10-10
-                                        M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
-                                        S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
-                                    />
-                                </svg>
-                            </button>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            >
-                                <ul
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        listStyleType: 'none',
-                                        margin: 0,
-                                        padding: 0,
-                                    }}
-                                >
-                                    <li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
-                                    <li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
-                                    <li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
-                                    <li style={{ width: '160px' }}><Rectangle /></li>
-                                </ul>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Full screen overlay */
     height: 100%;
@@ -123,7 +50,80 @@ const Details: React.FC<{}> = () => {
     </ul>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <button
+                            style={{
+                                backgroundColor: 'transparent',
+                                borderColor: 'transparent',
+                                padding: 0,
+                                position: 'absolute',
+                                right: '16px',
+                                top: '16px',
+                            }}
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                style={{
+                                    fill: 'none',
+                                    height: 24,
+                                    stroke: '#000',
+                                    strokeLinecap: 'round',
+                                    strokeLinejoin: 'round',
+                                    strokeWidth: 1,
+                                    width: 24,
+                                }}
+                            >
+                                <path
+                                    d={`M7,16.999l10-10
+                                    M17,16.999l-10-10
+                                    M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
+                                    S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
+                                />
+                            </svg>
+                        </button>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        >
+                            <ul
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    listStyleType: 'none',
+                                    margin: 0,
+                                    padding: 0,
+                                }}
+                            >
+                                <li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
+                                <li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
+                                <li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
+                                <li style={{ width: '160px' }}><Rectangle /></li>
+                            </ul>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
index 2c3c4d7..7ee6a05 100644
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -21,58 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    flexShrink: 0,
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ width: '50%' }}><Rectangle /></div>
-                            </div>
-                            <div style={{ display: 'flex', flexGrow: 1 }}>
-                                <div
-                                    style={{
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        padding: '16px',
-                                        width: '25%',
-                                    }}
-                                >
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                                <div style={{ flex: 1, padding: '16px' }}>
-                                    <Block numberOfBlocks={20} />
-                                </div>
-                                <div
-                                    style={{
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        padding: '16px',
-                                        width: '20%',
-                                    }}
-                                >
-                                    <Block numberOfBlocks={5} />
-                                </div>
-                            </div>
-                            <div
-                                style={{
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    flexShrink: 0,
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}><Rectangle /></div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -111,7 +60,58 @@ const Details: React.FC<{}> = () => {
     </footer>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                flexShrink: 0,
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ width: '50%' }}><Rectangle /></div>
+                        </div>
+                        <div style={{ display: 'flex', flexGrow: 1 }}>
+                            <div
+                                style={{
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    padding: '16px',
+                                    width: '25%',
+                                }}
+                            >
+                                <Block numberOfBlocks={10} />
+                            </div>
+                            <div style={{ flex: 1, padding: '16px' }}>
+                                <Block numberOfBlocks={20} />
+                            </div>
+                            <div
+                                style={{
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    padding: '16px',
+                                    width: '20%',
+                                }}
+                            >
+                                <Block numberOfBlocks={5} />
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                flexShrink: 0,
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ width: '40%' }}><Rectangle /></div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
index 70cdc30..39dde5e 100644
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -25,44 +25,7 @@ const Details: React.FC<{}> = () => {
                     the <Link to='/patterns/centering'>Centering</Link> pattern.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '50%',
-                                    color: '#FFF',
-                                    display: 'inline-block',
-                                    fontSize: '24px',
-                                    height: '48px',
-                                    position: 'relative',
-                                    verticalAlign: 'middle',
-                                    width: '48px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                    }}
-                                >
-                                    PN
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     display: inline-block;
@@ -92,7 +55,44 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '50%',
+                                color: '#FFF',
+                                display: 'inline-block',
+                                fontSize: '24px',
+                                height: '48px',
+                                position: 'relative',
+                                verticalAlign: 'middle',
+                                width: '48px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                }}
+                            >
+                                PN
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns
diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx
index 724a4e8..04c406f 100644
--- a/client/patterns/input-addon/Details.tsx
+++ b/client/patterns/input-addon/Details.tsx
@@ -20,132 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '256px' }}>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        height: '32px',
-                                        marginBottom: '16px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                            width: '30%',
-                                        }}
-                                    >
-                                        <Rectangle />
-                                    </div>
-                                    <input
-                                        type="text"
-                                        style={{
-                                            borderColor: 'transparent',
-                                            flex: 1,
-                                            marginRight: '1px',
-                                            padding: '4px',
-                                        }}
-                                    />
-                                </div>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        height: '32px',
-                                        marginBottom: '16px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <input
-                                        type="text"
-                                        style={{
-                                            borderColor: 'transparent',
-                                            flex: 1,
-                                            marginLeft: '1px',
-                                            padding: '8px',
-                                        }}
-                                    />
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                            width: '40%',
-                                        }}
-                                    >
-                                        <Rectangle />
-                                    </div>
-                                </div>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        height: '32px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                            width: '20%',
-                                        }}
-                                    >
-                                        <Rectangle />
-                                    </div>
-                                    <input
-                                        type="text"
-                                        style={{
-                                            borderColor: 'transparent',
-                                            flex: 1,
-                                            padding: '8px',
-                                        }}
-                                    />
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                            width: '30%',
-                                        }}
-                                    >
-                                        <Rectangle />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Add-on prepended -->
 <div style="
     display: flex;
@@ -228,7 +103,132 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '256px' }}>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    height: '32px',
+                                    marginBottom: '16px',
+                                    width: '100%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                        width: '30%',
+                                    }}
+                                >
+                                    <Rectangle />
+                                </div>
+                                <input
+                                    type="text"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        flex: 1,
+                                        marginRight: '1px',
+                                        padding: '4px',
+                                    }}
+                                />
+                            </div>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    height: '32px',
+                                    marginBottom: '16px',
+                                    width: '100%',
+                                }}
+                            >
+                                <input
+                                    type="text"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        flex: 1,
+                                        marginLeft: '1px',
+                                        padding: '8px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                        width: '40%',
+                                    }}
+                                >
+                                    <Rectangle />
+                                </div>
+                            </div>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    height: '32px',
+                                    width: '100%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                        width: '20%',
+                                    }}
+                                >
+                                    <Rectangle />
+                                </div>
+                                <input
+                                    type="text"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        flex: 1,
+                                        padding: '8px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                        width: '30%',
+                                    }}
+                                >
+                                    <Rectangle />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx
index 0f05188..9d347b3 100644
--- a/client/patterns/keyboard-shortcut/Details.tsx
+++ b/client/patterns/keyboard-shortcut/Details.tsx
@@ -56,31 +56,7 @@ const Details: React.FC<{}> = () => {
                     We use the native <code>kbd</code> tag to display the keyboard shortcut.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <kbd
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                    borderRadius: '4px',
-                                    boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                                    color: 'rgba(0, 0, 0, 0.7)',
-                                    padding: '8px',
-                                }}
-                            >
-                                ⌘ + C
-                            </kbd>
-                        </div>
-                    )}
-                    source={`
+html={`
 <kbd style="
     /* Background and color */
     background-color: rgba(0, 0, 0, 0.1);
@@ -96,7 +72,31 @@ const Details: React.FC<{}> = () => {
     ...
 </kbd>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <kbd
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                borderRadius: '4px',
+                                boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
+                                color: 'rgba(0, 0, 0, 0.7)',
+                                padding: '8px',
+                            }}
+                        >
+                            ⌘ + C
+                        </kbd>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <section>
diff --git a/client/patterns/lined-paper/Details.tsx b/client/patterns/lined-paper/Details.tsx
index e1b59f9..e6b3b8f 100644
--- a/client/patterns/lined-paper/Details.tsx
+++ b/client/patterns/lined-paper/Details.tsx
@@ -19,38 +19,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
-                                    backgroundPositionY: '24px',
-                                    backgroundSize: '100% 2em',
-                                    height: '200px',
-                                    lineHeight: '2em',
-                                    width: '75%',
-                                }}
-                            >
-                                <div>
-                                    Cascading Style Sheets (CSS) is a style sheet language used for
-                                    describing the presentation of a document written in a markup
-                                    language like HTML. CSS is a cornerstone technology of the World Wide Web,
-                                    alongside HTML and JavaScript.
-                                </div>
-                                <div style={{ textAlign: 'right' }}>— Wikipedia</div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Lined background */
     background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
@@ -66,7 +35,38 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
+                                backgroundPositionY: '24px',
+                                backgroundSize: '100% 2em',
+                                height: '200px',
+                                lineHeight: '2em',
+                                width: '75%',
+                            }}
+                        >
+                            <div>
+                                Cascading Style Sheets (CSS) is a style sheet language used for
+                                describing the presentation of a document written in a markup
+                                language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                alongside HTML and JavaScript.
+                            </div>
+                            <div style={{ textAlign: 'right' }}>— Wikipedia</div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index 07eb0ea..74eb200 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -22,28 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'flex-start',
-                                display: 'flex',
-                                height: '100%',
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
-                                <Square />
-                            </div>
-                            <div style={{ flex: 1 }}>
-                                <div style={{ marginBottom: '32px', width: '80%' }}>
-                                    <Rectangle />
-                                </div>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Align sub-items to top */
     align-items: start;
@@ -68,7 +47,28 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'flex-start',
+                            display: 'flex',
+                            height: '100%',
+                            padding: '16px',
+                        }}
+                    >
+                        <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
+                            <Square />
+                        </div>
+                        <div style={{ flex: 1 }}>
+                            <div style={{ marginBottom: '32px', width: '80%' }}>
+                                <Rectangle />
+                            </div>
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/mega-menu/Details.tsx b/client/patterns/mega-menu/Details.tsx
index d1bfb24..d63b6d3 100644
--- a/client/patterns/mega-menu/Details.tsx
+++ b/client/patterns/mega-menu/Details.tsx
@@ -28,71 +28,7 @@ const Details: React.FC<{}> = () => {
                     Move the mouse over the second navigation item to see the mega menu.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div style={{ padding: '8px' }}>
-                            <div className='p-mega-menu-container'>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'inline-flex',
-                                        justifyContent: 'center',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            padding: '16px',
-                                            width: '150px',
-                                        }}
-                                    >
-                                        <Rectangle />
-                                    </div>
-                                    <div
-                                        className='p-mega-menu-trigger'
-                                        style={{
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            width: '180px',
-                                        }}
-                                    >
-                                        <div style={{ display: 'flex', padding: '16px' }}>
-                                            <div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
-                                            <Triangle size={8} corner='b' />
-                                        </div>
-                                        <div className='p-mega-menu-content'>
-                                            <div style={{ display: 'flex' }}>
-                                                <div style={{ flex: 1, padding: '16px' }}>
-                                                    <Block numberOfBlocks={10} />
-                                                </div>
-                                                <div style={{ flex: 1, padding: '16px' }}>
-                                                    <Block numberOfBlocks={6} />
-                                                </div>
-                                                <div style={{ flex: 1, padding: '16px' }}>
-                                                    <Block numberOfBlocks={8} />
-                                                </div>
-                                                <div style={{ flex: 1, padding: '16px' }}>
-                                                    <Block numberOfBlocks={6} />
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div
-                                        style={{
-                                            padding: '16px',
-                                            width: '120px',
-                                        }}
-                                    >
-                                        <Rectangle />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div style={{ marginTop: '16px' }}>
-                                <Block numberOfBlocks={10} />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 .p-mega-menu-container {
     /* Used to position the mega menu */
@@ -142,7 +78,71 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div style={{ padding: '8px' }}>
+                        <div className='p-mega-menu-container'>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'inline-flex',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        padding: '16px',
+                                        width: '150px',
+                                    }}
+                                >
+                                    <Rectangle />
+                                </div>
+                                <div
+                                    className='p-mega-menu-trigger'
+                                    style={{
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        width: '180px',
+                                    }}
+                                >
+                                    <div style={{ display: 'flex', padding: '16px' }}>
+                                        <div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
+                                        <Triangle size={8} corner='b' />
+                                    </div>
+                                    <div className='p-mega-menu-content'>
+                                        <div style={{ display: 'flex' }}>
+                                            <div style={{ flex: 1, padding: '16px' }}>
+                                                <Block numberOfBlocks={10} />
+                                            </div>
+                                            <div style={{ flex: 1, padding: '16px' }}>
+                                                <Block numberOfBlocks={6} />
+                                            </div>
+                                            <div style={{ flex: 1, padding: '16px' }}>
+                                                <Block numberOfBlocks={8} />
+                                            </div>
+                                            <div style={{ flex: 1, padding: '16px' }}>
+                                                <Block numberOfBlocks={6} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    style={{
+                                        padding: '16px',
+                                        width: '120px',
+                                    }}
+                                >
+                                    <Rectangle />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div style={{ marginTop: '16px' }}>
+                            <Block numberOfBlocks={10} />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index f7232e1..5290809 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -24,120 +24,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    width: '40%',
-                                }}
-                            >
-                                <div
-                                    className="p-menu-item"
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        padding: '0 8px',
-                                    }}
-                                >
-                                    <div style={{ width: '40%' }}><Rectangle /></div>
-                                </div>
-                                <div
-                                    className="p-menu-item"
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        padding: '0 8px',
-                                    }}
-                                >
-                                    <Circle />
-                                    <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
-                                </div>
-                                <div
-                                    className="p-menu-item"
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        justifyContent: 'space-between',
-                                        padding: '0 8px',
-                                    }}
-                                >
-                                    <div style={{ width: '30%' }}><Rectangle /></div>
-                                    <div>Ctrl + X</div>
-                                </div>
-                                <div
-                                    className="p-menu-item"
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        justifyContent: 'space-between',
-                                        padding: '0 8px',
-                                    }}
-                                >
-                                    <div style={{ width: '70%' }}><Rectangle /></div>
-                                    <div>Ctrl + C</div>
-                                </div>
-                                <div
-                                    className="p-menu-item"
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        justifyContent: 'space-between',
-                                        padding: '0 8px',
-                                    }}
-                                >
-                                    <div style={{ width: '20%' }}><Rectangle /></div>
-                                    <Circle />
-                                </div>
-                                <div
-                                    className="p-menu-item"
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        justifyContent: 'space-between',
-                                        padding: '0 8px',
-                                    }}
-                                >
-                                    <div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
-                                        <Circle />
-                                        <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
-                                    </div>
-                                    <Circle />
-                                </div>
-                                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
-                                <div
-                                    className="p-menu-item"
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        justifyContent: 'space-between',
-                                        padding: '0 8px',
-                                    }}
-                                >
-                                    <div style={{ width: '40%' }}><Rectangle /></div>
-                                    <div>Ctrl + V</div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -196,7 +83,120 @@ const Details: React.FC<{}> = () => {
     " />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                width: '40%',
+                            }}
+                        >
+                            <div
+                                className="p-menu-item"
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    padding: '0 8px',
+                                }}
+                            >
+                                <div style={{ width: '40%' }}><Rectangle /></div>
+                            </div>
+                            <div
+                                className="p-menu-item"
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    padding: '0 8px',
+                                }}
+                            >
+                                <Circle />
+                                <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
+                            </div>
+                            <div
+                                className="p-menu-item"
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    justifyContent: 'space-between',
+                                    padding: '0 8px',
+                                }}
+                            >
+                                <div style={{ width: '30%' }}><Rectangle /></div>
+                                <div>Ctrl + X</div>
+                            </div>
+                            <div
+                                className="p-menu-item"
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    justifyContent: 'space-between',
+                                    padding: '0 8px',
+                                }}
+                            >
+                                <div style={{ width: '70%' }}><Rectangle /></div>
+                                <div>Ctrl + C</div>
+                            </div>
+                            <div
+                                className="p-menu-item"
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    justifyContent: 'space-between',
+                                    padding: '0 8px',
+                                }}
+                            >
+                                <div style={{ width: '20%' }}><Rectangle /></div>
+                                <Circle />
+                            </div>
+                            <div
+                                className="p-menu-item"
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    justifyContent: 'space-between',
+                                    padding: '0 8px',
+                                }}
+                            >
+                                <div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
+                                    <Circle />
+                                    <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
+                                </div>
+                                <Circle />
+                            </div>
+                            <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
+                            <div
+                                className="p-menu-item"
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    justifyContent: 'space-between',
+                                    padding: '0 8px',
+                                }}
+                            >
+                                <div style={{ width: '40%' }}><Rectangle /></div>
+                                <div>Ctrl + V</div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns
                 patterns={[
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 74784ce..8cf4ffd 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -27,57 +27,7 @@ const Details: React.FC<{}> = () => {
                     represent the button for closing the modal.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    width: '50%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        padding: '16px',
-                                    }}
-                                >
-                                    <div style={{ width: '60%' }}><Rectangle /></div>
-                                    <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                                        <Circle />
-                                    </div>
-                                </div>
-                                <div style={{ padding: '16px' }}>
-                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                                    <Block numberOfBlocks={5} />
-                                </div>
-                                <div
-                                    style={{
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'flex-end',
-                                        padding: '16px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
-                                    <div style={{ width: '30%' }}><Rectangle height={32} /></div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Border */
     border: 1px solid rgba(0, 0, 0.3);
@@ -111,7 +61,57 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                width: '50%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ width: '60%' }}><Rectangle /></div>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
+                                    <Circle />
+                                </div>
+                            </div>
+                            <div style={{ padding: '16px' }}>
+                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                                <Block numberOfBlocks={5} />
+                            </div>
+                            <div
+                                style={{
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'flex-end',
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
+                                <div style={{ width: '30%' }}><Rectangle height={32} /></div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/nested-dropdowns/Details.tsx b/client/patterns/nested-dropdowns/Details.tsx
index 6d70939..46b80bd 100644
--- a/client/patterns/nested-dropdowns/Details.tsx
+++ b/client/patterns/nested-dropdowns/Details.tsx
@@ -25,38 +25,7 @@ const Details: React.FC<{}> = () => {
                     Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                padding: '8px',
-                            }}
-                        >
-                            <ul className="p-nested-dropdowns">
-                                <li>Home</li>
-                                <li>
-                                    <div>Patterns</div>
-                                    <ul>
-                                        <li>Layout</li>
-                                        <li>Input</li>
-                                        <li>
-                                            <div>Navigation</div>
-                                            <ul>
-                                                <li>Breadcrumb</li>
-                                                <li>Dropdown</li>
-                                                <li>Menu</li>
-                                                <li>Nested dropdown</li>
-                                            </ul>
-                                        </li>
-                                        <li>Display</li>
-                                        <li>Feedback</li>
-                                    </ul>
-                                </li>
-                                <li>Products</li>
-                                <li>About</li>
-                            </ul>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 /* The root */
 .p-nested-dropdowns {
@@ -144,7 +113,38 @@ const Details: React.FC<{}> = () => {
     <li>About</li>
 </ul>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            padding: '8px',
+                        }}
+                    >
+                        <ul className="p-nested-dropdowns">
+                            <li>Home</li>
+                            <li>
+                                <div>Patterns</div>
+                                <ul>
+                                    <li>Layout</li>
+                                    <li>Input</li>
+                                    <li>
+                                        <div>Navigation</div>
+                                        <ul>
+                                            <li>Breadcrumb</li>
+                                            <li>Dropdown</li>
+                                            <li>Menu</li>
+                                            <li>Nested dropdown</li>
+                                        </ul>
+                                    </li>
+                                    <li>Display</li>
+                                    <li>Feedback</li>
+                                </ul>
+                            </li>
+                            <li>Products</li>
+                            <li>About</li>
+                        </ul>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index 2d4f8ee..fddf803 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -26,46 +26,7 @@ const Details: React.FC<{}> = () => {
                     represent the button for closing the notification.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    width: '60%',
-                                }}
-                            >
-                                <div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        borderColor: 'transparent',
-                                        color: 'rgba(0, 0, 0, .3)',
-                                        display: 'flex',
-                                        fontSize: '36px',
-                                        height: '32px',
-                                        justifyContent: 'center',
-                                        marginRight: '1px',
-                                        width: '32px',
-                                    }}
-                                >
-                                    <Circle />
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
     justify-content: space-between;
@@ -77,7 +38,46 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                width: '60%',
+                            }}
+                        >
+                            <div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    borderColor: 'transparent',
+                                    color: 'rgba(0, 0, 0, .3)',
+                                    display: 'flex',
+                                    fontSize: '36px',
+                                    height: '32px',
+                                    justifyContent: 'center',
+                                    marginRight: '1px',
+                                    width: '32px',
+                                }}
+                            >
+                                <Circle />
+                            </button>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
index 78f4c35..18bcf06 100644
--- a/client/patterns/overlay-play-button/Details.tsx
+++ b/client/patterns/overlay-play-button/Details.tsx
@@ -21,55 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    height: '100%',
-                                    position: 'relative',
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                                        display: 'flex',
-                                        height: '100%',
-                                        justifyContent: 'center',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: 0,
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            border: '4px solid #FFF',
-                                            borderRadius: '9999px',
-                                            display: 'flex',
-                                            height: '64px',
-                                            justifyContent: 'center',
-                                            width: '64px',
-                                        }}
-                                    >
-                                        <Triangle backgroundColor='#FFF' corner='r' size={8} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the overlay */
     position: relative;
@@ -101,7 +53,55 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                height: '100%',
+                                position: 'relative',
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                                    display: 'flex',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '4px solid #FFF',
+                                        borderRadius: '9999px',
+                                        display: 'flex',
+                                        height: '64px',
+                                        justifyContent: 'center',
+                                        width: '64px',
+                                    }}
+                                >
+                                    <Triangle backgroundColor='#FFF' corner='r' size={8} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.VideoBackground]} />
         </DetailsLayout>
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
index 38da19d..709294b 100644
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -21,95 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '128px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <Circle size={16} />
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <Circle size={16} />
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <Circle size={16} />
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <Circle size={16} />
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '64px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
 
@@ -144,7 +56,95 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '128px',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <Circle size={16} />
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <Circle size={16} />
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <Circle size={16} />
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <Circle size={16} />
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '64px',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
index bbc07b4..c9a0472 100644
--- a/client/patterns/popover-arrow/Details.tsx
+++ b/client/patterns/popover-arrow/Details.tsx
@@ -20,190 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    height: '300px',
-                                    marginBottom: '16px',
-                                    position: 'relative',
-                                    width: '300px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '16px',
-                                        left: '32px',
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'translate(50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '16px',
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '16px',
-                                        position: 'absolute',
-                                        right: '32px',
-                                        top: 0,
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '16px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: '32px',
-                                        transform: 'translate(50%, 50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '16px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: '50%',
-                                        transform: 'translate(50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: '32px',
-                                        height: '16px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        transform: 'translate(50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: '-16px',
-                                        height: '16px',
-                                        left: '32px',
-                                        position: 'absolute',
-                                        transform: 'translate(50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: '-16px',
-                                        height: '16px',
-                                        left: '50%',
-                                        position: 'absolute',
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: '-16px',
-                                        height: '16px',
-                                        position: 'absolute',
-                                        right: '32px',
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '16px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: '32px',
-                                        transform: 'translate(-50%, 50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '16px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: '32px',
-                                        height: '16px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        transform: 'translate(-50%, -50%) rotate(45deg)',
-                                        width: '16px',
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
@@ -431,7 +248,190 @@ const Details: React.FC<{}> = () => {
     " />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                height: '300px',
+                                marginBottom: '16px',
+                                position: 'relative',
+                                width: '300px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '16px',
+                                    left: '32px',
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'translate(50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '16px',
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'translate(-50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '16px',
+                                    position: 'absolute',
+                                    right: '32px',
+                                    top: 0,
+                                    transform: 'translate(-50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '16px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: '32px',
+                                    transform: 'translate(50%, 50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '16px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: '50%',
+                                    transform: 'translate(50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: '32px',
+                                    height: '16px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    transform: 'translate(50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: '-16px',
+                                    height: '16px',
+                                    left: '32px',
+                                    position: 'absolute',
+                                    transform: 'translate(50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: '-16px',
+                                    height: '16px',
+                                    left: '50%',
+                                    position: 'absolute',
+                                    transform: 'translate(-50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: '-16px',
+                                    height: '16px',
+                                    position: 'absolute',
+                                    right: '32px',
+                                    transform: 'translate(-50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '16px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '32px',
+                                    transform: 'translate(-50%, 50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '16px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: '32px',
+                                    height: '16px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    transform: 'translate(-50%, -50%) rotate(45deg)',
+                                    width: '16px',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
index 6ad9cac..536e085 100644
--- a/client/patterns/presence-indicator/Details.tsx
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    height: '64px',
-                                    marginRight: '16px',
-                                    position: 'relative',
-                                    width: '64px',
-                                }}
-                            >
-                                <Circle size={64} />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FF4136',
-                                        borderRadius: '9999px',
-                                        bottom: 0,
-                                        height: '16px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        transform: 'translate(50%, 50%)',
-                                        width: '16px',
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     position: relative;
 ">
@@ -80,7 +46,41 @@ const Details: React.FC<{}> = () => {
     " />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                height: '64px',
+                                marginRight: '16px',
+                                position: 'relative',
+                                width: '64px',
+                            }}
+                        >
+                            <Circle size={64} />
+                            <div
+                                style={{
+                                    backgroundColor: '#FF4136',
+                                    borderRadius: '9999px',
+                                    bottom: 0,
+                                    height: '16px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    transform: 'translate(50%, 50%)',
+                                    width: '16px',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
index e138746..c543f67 100644
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -20,59 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '50%' }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '32px',
-                                        justifyContent: 'space-between',
-                                        padding: '8px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <a
-                                        style={{
-                                            alignItems: 'center',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderRadius: '4px',
-                                            display: 'flex',
-                                            padding: '8px',
-                                            width: '30%',
-                                        }}
-                                    >
-                                        <div style={{ marginRight: '8px' }}>&lt;</div>
-                                        <Rectangle />
-                                    </a>
-                                    <a
-                                        style={{
-                                            alignItems: 'center',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderRadius: '4px',
-                                            display: 'flex',
-                                            padding: '8px',
-                                            width: '30%',
-                                        }}
-                                    >
-                                        <Rectangle />
-                                        <div style={{ marginLeft: '8px' }}>&gt;</div>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     align-items: center;
     display: flex;
@@ -85,7 +33,59 @@ const Details: React.FC<{}> = () => {
     <a>..</a>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '50%' }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '32px',
+                                    justifyContent: 'space-between',
+                                    padding: '8px',
+                                    width: '100%',
+                                }}
+                            >
+                                <a
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        padding: '8px',
+                                        width: '30%',
+                                    }}
+                                >
+                                    <div style={{ marginRight: '8px' }}>&lt;</div>
+                                    <Rectangle />
+                                </a>
+                                <a
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        padding: '8px',
+                                        width: '30%',
+                                    }}
+                                >
+                                    <Rectangle />
+                                    <div style={{ marginLeft: '8px' }}>&gt;</div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index 78eaae1..e52cdf1 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -28,88 +28,7 @@ const Details: React.FC<{}> = () => {
                     indicate the most popular option.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '16px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    width: '60%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        flex: 1,
-                                        flexDirection: 'column',
-                                        justifyContent: 'center',
-                                        margin: '0 8px',
-                                        padding: '16px',
-                                    }}
-                                >
-                                    <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                    <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                    <div style={{ marginBottom: '16px', width: '100%' }}>
-                                        <Block numberOfBlocks={10} />
-                                    </div>
-                                    <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        flex: 1,
-                                        flexDirection: 'column',
-                                        justifyContent: 'center',
-                                        margin: '0 8px',
-                                        padding: '16px',
-                                    }}
-                                >
-                                    <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                    <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                    <div style={{ marginBottom: '16px', width: '100%' }}>
-                                        <Block numberOfBlocks={20} />
-                                    </div>
-                                    <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                                </div>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        flex: 1,
-                                        flexDirection: 'column',
-                                        justifyContent: 'center',
-                                        margin: '0 8px',
-                                        padding: '16px',
-                                    }}
-                                >
-                                    <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                    <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                    <div style={{ marginBottom: '16px', width: '100%' }}>
-                                        <Block numberOfBlocks={10} />
-                                    </div>
-                                    <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Content is centered horizontally */
     align-items: center;
@@ -151,7 +70,88 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '16px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                width: '60%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    margin: '0 8px',
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
+                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
+                                <div style={{ marginBottom: '16px', width: '100%' }}>
+                                    <Block numberOfBlocks={10} />
+                                </div>
+                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    margin: '0 8px',
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
+                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
+                                <div style={{ marginBottom: '16px', width: '100%' }}>
+                                    <Block numberOfBlocks={20} />
+                                </div>
+                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
+                            </div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    margin: '0 8px',
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
+                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
+                                <div style={{ marginBottom: '16px', width: '100%' }}>
+                                    <Block numberOfBlocks={10} />
+                                </div>
+                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
index bc1c36f..a31c3c2 100644
--- a/client/patterns/progress-bar/Details.tsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -25,45 +25,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                    borderRadius: '9999px',
-                                    height: '16px',
-                                    width: '50%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: '#357EDD',
-                                        borderRadius: '9999px',
-                                        color: '#FFF',
-                                        display: 'flex',
-                                        fontSize: '12px',
-                                        height: '100%',
-                                        justifyContent: 'center',
-                                        padding: '4px',
-                                        width: `${progress}%`,
-                                    }}
-                                >
-                                    {progress}%
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Colors */
     background-color: rgba(0, 0, 0, .1);
@@ -92,7 +54,45 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                borderRadius: '9999px',
+                                height: '16px',
+                                width: '50%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: '#357EDD',
+                                    borderRadius: '9999px',
+                                    color: '#FFF',
+                                    display: 'flex',
+                                    fontSize: '12px',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    padding: '4px',
+                                    width: `${progress}%`,
+                                }}
+                            >
+                                {progress}%
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index ae4df78..c39ac4d 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -40,38 +40,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '40%' }}>
-                                <Item>
-                                    <dt style={{ width: '80%' }}><Rectangle /></dt>
-                                    <dd><Circle /></dd>
-                                </Item>
-                                <Item>
-                                    <dt style={{ width: '60%' }}><Rectangle /></dt>
-                                    <dd><Circle /></dd>
-                                </Item>
-                                <Item>
-                                    <dt style={{ width: '30%' }}><Rectangle /></dt>
-                                    <dd><Circle /></dd>
-                                </Item>
-                                <Item>
-                                    <dt style={{ width: '50%' }}><Rectangle /></dt>
-                                    <dd><Circle /></dd>
-                                </Item>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- A property item -->
 <dl style="
     /* Content is center horizontally */
@@ -97,7 +66,38 @@ const Details: React.FC<{}> = () => {
     <dd>...</dd>
 </dl>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '40%' }}>
+                            <Item>
+                                <dt style={{ width: '80%' }}><Rectangle /></dt>
+                                <dd><Circle /></dd>
+                            </Item>
+                            <Item>
+                                <dt style={{ width: '60%' }}><Rectangle /></dt>
+                                <dd><Circle /></dd>
+                            </Item>
+                            <Item>
+                                <dt style={{ width: '30%' }}><Rectangle /></dt>
+                                <dd><Circle /></dd>
+                            </Item>
+                            <Item>
+                                <dt style={{ width: '50%' }}><Rectangle /></dt>
+                                <dd><Circle /></dd>
+                            </Item>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <section>
                 <Heading title="Use cases" />
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index ccae2ec..8593c4b 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -60,64 +60,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '60%' }}>
-                                <div
-                                    style={{
-                                        margin: '0 auto',
-                                        paddingBottom: '24px',
-                                        width: '200px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <div
-                                    style={{
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    }}
-                                >
-                                    <Item
-                                        index={0}
-                                        title={<div style={{ width: '40%' }}><Rectangle /></div>}
-                                    >
-                                        <Block numberOfBlocks={10} />
-                                    </Item>
-                                </div>
-                                <div
-                                    style={{
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    }}
-                                >
-                                    <Item
-                                        index={1}
-                                        title={<div style={{ width: '80%' }}><Rectangle /></div>}
-                                    >
-                                        <Block numberOfBlocks={15} />
-                                    </Item>
-                                </div>
-                                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                    <Item
-                                        index={2}
-                                        title={<div style={{ width: '60%' }}><Rectangle /></div>}
-                                    >
-                                        <Block numberOfBlocks={10} />
-                                    </Item>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Each question and answer item -->
 <div style="
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
@@ -138,7 +81,64 @@ const Details: React.FC<{}> = () => {
     <!-- Answer -->
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}>
+                            <div
+                                style={{
+                                    margin: '0 auto',
+                                    paddingBottom: '24px',
+                                    width: '200px',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                            <div
+                                style={{
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                }}
+                            >
+                                <Item
+                                    index={0}
+                                    title={<div style={{ width: '40%' }}><Rectangle /></div>}
+                                >
+                                    <Block numberOfBlocks={10} />
+                                </Item>
+                            </div>
+                            <div
+                                style={{
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                }}
+                            >
+                                <Item
+                                    index={1}
+                                    title={<div style={{ width: '80%' }}><Rectangle /></div>}
+                                >
+                                    <Block numberOfBlocks={15} />
+                                </Item>
+                            </div>
+                            <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                                <Item
+                                    index={2}
+                                    title={<div style={{ width: '60%' }}><Rectangle /></div>}
+                                >
+                                    <Block numberOfBlocks={10} />
+                                </Item>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.Accordion]} />
diff --git a/client/patterns/radial-progress-bar/Details.tsx b/client/patterns/radial-progress-bar/Details.tsx
index 2043a5b..88f5c9d 100644
--- a/client/patterns/radial-progress-bar/Details.tsx
+++ b/client/patterns/radial-progress-bar/Details.tsx
@@ -80,21 +80,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
-                            <RadialProgress percentages={80} />
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     position: relative;
 ">
@@ -178,7 +164,21 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
+                        <RadialProgress percentages={80} />
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
index eade9dc..4891b41 100644
--- a/client/patterns/radio-button-group/Details.tsx
+++ b/client/patterns/radio-button-group/Details.tsx
@@ -56,39 +56,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                className="p-radio-button-group"
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                }}
-                            >
-                                <Radio value='1'>
-                                    <div style={{ width: '80px' }}><Rectangle /></div>
-                                </Radio>
-                                <Radio value='2'>
-                                    <div style={{ width: '120px' }}><Rectangle /></div>
-                                </Radio>
-                                <Radio value='3'>
-                                    <div style={{ width: '100px' }}><Rectangle /></div>
-                                </Radio>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 .p-radio-button-group label {
     border-right: 1px solid rgba(0, 0, 0, 0.3);
@@ -144,7 +112,39 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            className="p-radio-button-group"
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                height: '32px',
+                            }}
+                        >
+                            <Radio value='1'>
+                                <div style={{ width: '80px' }}><Rectangle /></div>
+                            </Radio>
+                            <Radio value='2'>
+                                <div style={{ width: '120px' }}><Rectangle /></div>
+                            </Radio>
+                            <Radio value='3'>
+                                <div style={{ width: '100px' }}><Rectangle /></div>
+                            </Radio>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index 09b6688..d0ea964 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -24,81 +24,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                    borderRadius: '9999px',
-                                    display: 'inline-flex',
-                                    padding: '4px',
-                                }}
-                            >
-                                <label
-                                    htmlFor="radio-switch-first"
-                                    style={{
-                                        backgroundColor: isFirstChecked ? '#357EDD' : '',
-                                        borderRadius: '9999px',
-                                        color: isFirstChecked ? '#FFF' : '',
-                                        cursor: 'pointer',
-                                        padding: '16px 8px',
-                                    }}
-                                >
-                                    <input
-                                        id="radio-switch-first"
-                                        type="radio"
-                                        style={{ display: 'none' }}
-                                        checked={isFirstChecked}
-                                        onChange={toggle}
-                                    />
-                                    <div
-                                        style={{
-                                            backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
-                                            borderRadius: '4px',
-                                            height: '8px',
-                                            width: '64px',
-                                        }}
-                                    />
-                                </label>
-                                <label
-                                    htmlFor="radio-switch-second"
-                                    style={{
-                                        backgroundColor: isFirstChecked ? '' : '#357EDD',
-                                        borderRadius: '9999px',
-                                        color: isFirstChecked ? '' : '#FFF',
-                                        cursor: 'pointer',
-                                        padding: '16px 8px',
-                                    }}
-                                >
-                                    <input
-                                        id="radio-switch-second"
-                                        type="radio"
-                                        style={{ display: 'none' }}
-                                        checked={!isFirstChecked}
-                                        onChange={toggle}
-                                    />
-                                    <div
-                                        style={{
-                                            backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
-                                            borderRadius: '4px',
-                                            height: '8px',
-                                            width: '64px',
-                                        }}
-                                    />
-                                </label>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Container -->
 <div style="
     background-color: rgba(0, 0, 0, .1);
@@ -126,7 +52,81 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                borderRadius: '9999px',
+                                display: 'inline-flex',
+                                padding: '4px',
+                            }}
+                        >
+                            <label
+                                htmlFor="radio-switch-first"
+                                style={{
+                                    backgroundColor: isFirstChecked ? '#357EDD' : '',
+                                    borderRadius: '9999px',
+                                    color: isFirstChecked ? '#FFF' : '',
+                                    cursor: 'pointer',
+                                    padding: '16px 8px',
+                                }}
+                            >
+                                <input
+                                    id="radio-switch-first"
+                                    type="radio"
+                                    style={{ display: 'none' }}
+                                    checked={isFirstChecked}
+                                    onChange={toggle}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
+                                        borderRadius: '4px',
+                                        height: '8px',
+                                        width: '64px',
+                                    }}
+                                />
+                            </label>
+                            <label
+                                htmlFor="radio-switch-second"
+                                style={{
+                                    backgroundColor: isFirstChecked ? '' : '#357EDD',
+                                    borderRadius: '9999px',
+                                    color: isFirstChecked ? '' : '#FFF',
+                                    cursor: 'pointer',
+                                    padding: '16px 8px',
+                                }}
+                            >
+                                <input
+                                    id="radio-switch-second"
+                                    type="radio"
+                                    style={{ display: 'none' }}
+                                    checked={!isFirstChecked}
+                                    onChange={toggle}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
+                                        borderRadius: '4px',
+                                        height: '8px',
+                                        width: '64px',
+                                    }}
+                                />
+                            </label>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <section>
                 <Heading title="Use cases" />
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index da778a6..fb384e1 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div className="p-rating">
-                                <Star isActive={false} />
-                                <Star isActive={false} />
-                                <Star isActive={false} />
-                                <Star isActive={false} />
-                                <Star isActive={true} />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 .p-rating {
     /* Center the content */
@@ -88,7 +70,25 @@ Note that we use \`flex-direction: row-reverse\` on the container
     <button class="p-rating-star">★</button>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div className="p-rating">
+                            <Star isActive={false} />
+                            <Star isActive={false} />
+                            <Star isActive={false} />
+                            <Star isActive={false} />
+                            <Star isActive={true} />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/resizable-element/Details.tsx b/client/patterns/resizable-element/Details.tsx
index d0e8844..4a9ec5d 100644
--- a/client/patterns/resizable-element/Details.tsx
+++ b/client/patterns/resizable-element/Details.tsx
@@ -23,125 +23,7 @@ const Details: React.FC<{}> = () => {
                     the cursors which indicate the associated side can be resized.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px dashed rgba(0, 0, 0, 0.3)',
-                                    height: '200px',
-                                    position: 'relative',
-                                    width: '200px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        cursor: 'nwse-resize',
-                                        height: '12px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'translate(-50%, -50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        cursor: 'ns-resize',
-                                        height: '12px',
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'translate(-50%, -50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        cursor: 'nesw-resize',
-                                        height: '12px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: 0,
-                                        transform: 'translate(50%, -50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        cursor: 'ew-resize',
-                                        height: '12px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: '50%',
-                                        transform: 'translate(50%, -50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: 0,
-                                        cursor: 'nwse-resize',
-                                        height: '12px',
-                                        position: 'absolute',
-                                        right: 0,
-                                        transform: 'translate(50%, 50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: 0,
-                                        cursor: 'ns-resize',
-                                        height: '12px',
-                                        position: 'absolute',
-                                        right: '50%',
-                                        transform: 'translate(50%, 50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        bottom: 0,
-                                        cursor: 'nesw-resize',
-                                        height: '12px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        transform: 'translate(-50%, 50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        cursor: 'ew-resize',
-                                        height: '12px',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                        width: '12px',
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Border */
     border: 1px dashed rgba(0, 0, 0, 0.3);
@@ -305,7 +187,125 @@ const Details: React.FC<{}> = () => {
     "/>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px dashed rgba(0, 0, 0, 0.3)',
+                                height: '200px',
+                                position: 'relative',
+                                width: '200px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    cursor: 'nwse-resize',
+                                    height: '12px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'translate(-50%, -50%)',
+                                    width: '12px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    cursor: 'ns-resize',
+                                    height: '12px',
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'translate(-50%, -50%)',
+                                    width: '12px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    cursor: 'nesw-resize',
+                                    height: '12px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: 0,
+                                    transform: 'translate(50%, -50%)',
+                                    width: '12px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    cursor: 'ew-resize',
+                                    height: '12px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: '50%',
+                                    transform: 'translate(50%, -50%)',
+                                    width: '12px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: 0,
+                                    cursor: 'nwse-resize',
+                                    height: '12px',
+                                    position: 'absolute',
+                                    right: 0,
+                                    transform: 'translate(50%, 50%)',
+                                    width: '12px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: 0,
+                                    cursor: 'ns-resize',
+                                    height: '12px',
+                                    position: 'absolute',
+                                    right: '50%',
+                                    transform: 'translate(50%, 50%)',
+                                    width: '12px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: 0,
+                                    cursor: 'nesw-resize',
+                                    height: '12px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    transform: 'translate(-50%, 50%)',
+                                    width: '12px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    cursor: 'ew-resize',
+                                    height: '12px',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                    width: '12px',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
index 70909f5..22513e3 100644
--- a/client/patterns/ribbon/Details.tsx
+++ b/client/patterns/ribbon/Details.tsx
@@ -21,76 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: '#BBB',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'center',
-                                    padding: '0 16px',
-                                    position: 'relative',
-                                    width: '150px',
-                                }}
-                            >
-                                <Rectangle />
-                                <div
-                                    style={{
-                                        border: '16px solid #CCC',
-                                        borderLeftColor: 'transparent',
-                                        bottom: '-8px',
-                                        left: '-24px',
-                                        position: 'absolute',
-                                        zIndex: -1,
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '8px solid transparent',
-                                        borderBottomWidth: 0,
-                                        borderRightWidth: 0,
-                                        borderTopColor: '#AAA',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: '100%',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '8px solid transparent',
-                                        borderBottomWidth: 0,
-                                        borderLeftWidth: 0,
-                                        borderTopColor: '#AAA',
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: '100%',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        border: '16px solid #CCC',
-                                        borderRightColor: 'transparent',
-                                        bottom: '-8px',
-                                        position: 'absolute',
-                                        right: '-24px',
-                                        zIndex: -1,
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -168,7 +99,76 @@ const Details: React.FC<{}> = () => {
     />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: '#BBB',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'center',
+                                padding: '0 16px',
+                                position: 'relative',
+                                width: '150px',
+                            }}
+                        >
+                            <Rectangle />
+                            <div
+                                style={{
+                                    border: '16px solid #CCC',
+                                    borderLeftColor: 'transparent',
+                                    bottom: '-8px',
+                                    left: '-24px',
+                                    position: 'absolute',
+                                    zIndex: -1,
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '8px solid transparent',
+                                    borderBottomWidth: 0,
+                                    borderRightWidth: 0,
+                                    borderTopColor: '#AAA',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '100%',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '8px solid transparent',
+                                    borderBottomWidth: 0,
+                                    borderLeftWidth: 0,
+                                    borderTopColor: '#AAA',
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: '100%',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    border: '16px solid #CCC',
+                                    borderRightColor: 'transparent',
+                                    bottom: '-8px',
+                                    position: 'absolute',
+                                    right: '-24px',
+                                    zIndex: -1,
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.CornerRibbon]} />
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
index 986ff9d..d5ed70b 100644
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -21,78 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ display: 'flex', height: '100%', width: '100%' }}>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.2)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        flex: 1,
-                                        flexDirection: 'column',
-                                        margin: '0 8px',
-                                    }}
-                                >
-                                    <Rectangle height={200} />
-                                    <div style={{ flex: 1, padding: '16px' }}>
-                                        <Block numberOfBlocks={10} />
-                                    </div>
-                                    <div style={{ padding: '16px', width: '128px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.2)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        flex: 1,
-                                        flexDirection: 'column',
-                                        margin: '0 8px',
-                                    }}
-                                >
-                                    <Rectangle height={200} />
-                                    <div style={{ flex: 1, padding: '16px' }}>
-                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
-                                        <Block numberOfBlocks={5} />
-                                    </div>
-                                    <div style={{ padding: '16px', width: '128px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.2)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        flex: 1,
-                                        flexDirection: 'column',
-                                        margin: '0 8px',
-                                    }}
-                                >
-                                    <Rectangle height={200} />
-                                    <div style={{ flex: 1, padding: '16px' }}>
-                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
-                                        <Block numberOfBlocks={10} />
-                                    </div>
-                                    <div style={{ padding: '16px', width: '128px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="display: flex;">
     <!-- Column -->
     <div style="
@@ -123,7 +52,78 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ display: 'flex', height: '100%', width: '100%' }}>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.2)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    margin: '0 8px',
+                                }}
+                            >
+                                <Rectangle height={200} />
+                                <div style={{ flex: 1, padding: '16px' }}>
+                                    <Block numberOfBlocks={10} />
+                                </div>
+                                <div style={{ padding: '16px', width: '128px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.2)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    margin: '0 8px',
+                                }}
+                            >
+                                <Rectangle height={200} />
+                                <div style={{ flex: 1, padding: '16px' }}>
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                                    <Block numberOfBlocks={5} />
+                                </div>
+                                <div style={{ padding: '16px', width: '128px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.2)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    margin: '0 8px',
+                                }}
+                            >
+                                <Rectangle height={200} />
+                                <div style={{ flex: 1, padding: '16px' }}>
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
+                                    <Block numberOfBlocks={10} />
+                                </div>
+                                <div style={{ padding: '16px', width: '128px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index f1ab7b1..d541c00 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -20,65 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '256px' }}>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '2px',
-                                        display: 'flex',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <input
-                                        type="text"
-                                        placeholder="Search"
-                                        style={{
-                                            borderColor: 'transparent',
-                                            flex: 1,
-                                            padding: '4px',
-                                        }}
-                                    />
-                                    <div style={{ padding: '8px' }}>
-                                        <Circle />
-                                    </div>
-                                </div>
-
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '2px',
-                                        display: 'flex',
-                                        flexDirection: 'row-reverse',
-                                    }}
-                                >
-                                    <input
-                                        type="text"
-                                        placeholder="Search"
-                                        style={{
-                                            borderColor: 'transparent',
-                                            flex: 1,
-                                            padding: '4px',
-                                        }}
-                                    />
-                                    <div style={{ padding: '8px' }}>
-                                        <Circle />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
 
@@ -102,7 +44,65 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '256px' }}>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '2px',
+                                    display: 'flex',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <input
+                                    type="text"
+                                    placeholder="Search"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        flex: 1,
+                                        padding: '4px',
+                                    }}
+                                />
+                                <div style={{ padding: '8px' }}>
+                                    <Circle />
+                                </div>
+                            </div>
+
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '2px',
+                                    display: 'flex',
+                                    flexDirection: 'row-reverse',
+                                }}
+                            >
+                                <input
+                                    type="text"
+                                    placeholder="Search"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        flex: 1,
+                                        padding: '4px',
+                                    }}
+                                />
+                                <div style={{ padding: '8px' }}>
+                                    <Circle />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index 2e9d8a2..b85ca4c 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    position: 'relative',
-                                    width: '60%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        left: '50%',
-                                        padding: '0 8px',
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                    }}
-                                >
-                                    <div style={{ width: '128px' }}><Rectangle height={16} /></div>
-                                </div>
-                                <div
-                                    style={{
-                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                        height: '1px',
-                                        width: '100%',
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Content is centered horizontally */
     align-items: center;
@@ -92,7 +51,48 @@ const Details: React.FC<{}> = () => {
     " />
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                position: 'relative',
+                                width: '60%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    left: '50%',
+                                    padding: '0 8px',
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                }}
+                            >
+                                <div style={{ width: '128px' }}><Rectangle height={16} /></div>
+                            </div>
+                            <div
+                                style={{
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '1px',
+                                    width: '100%',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
index 395f302..a48f08f 100644
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -21,37 +21,7 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
                 <BrowserFrame
-                    content={(
-                        <div style={{ display: 'flex', height: '100%' }}>
-                            <div
-                                style={{
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    justifyContent: 'flex-end',
-                                    padding: '16px',
-                                    width: '30%',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
-                                <div style={{ width: '80%' }}><Block numberOfBlocks={4} /></div>
-                            </div>
-                            <div
-                                style={{
-                                    flex: 1,
-                                    overflow: 'auto',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                                <div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="display: flex;">
     <!-- Sidebar -->
     <aside style="width: 30%;">
@@ -70,7 +40,37 @@ const Details: React.FC<{}> = () => {
     </main>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div style={{ display: 'flex', height: '100%' }}>
+                        <div
+                            style={{
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-end',
+                                padding: '16px',
+                                width: '30%',
+                            }}
+                        >
+                            <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
+                            <div style={{ width: '80%' }}><Block numberOfBlocks={4} /></div>
+                        </div>
+                        <div
+                            style={{
+                                flex: 1,
+                                overflow: 'auto',
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                            <div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index 55926c6..1506232 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -20,91 +20,8 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
             </Helmet>
             <div className='p-8 pb-20'>
-                <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '60%' }}>
-                                <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-
-                                <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
-                                    <div style={{ flex: '0 0 50%', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-
-                                <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-
-                                <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
-                                    <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-
-                                <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-
-                                <div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
-                                    <div style={{ flex: '0 0 25%', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '1', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                    <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
-                                        <Rectangle height={32} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+                <BrowserFrame                    
+html={`
 <!-- Row -->
 <div style="
     display: flex;
@@ -129,7 +46,90 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}>
+                            <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+
+                            <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
+                                <div style={{ flex: '0 0 50%', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+
+                            <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+
+                            <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
+                                <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+
+                            <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+
+                            <div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
+                                <div style={{ flex: '0 0 25%', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '1', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                                <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.CardLayout]} />
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index 570c081..fa43f5b 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -21,32 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '16px',
-                                    width: '256px',
-                                }}
-                            >
-                                <div style={{ width: '20%' }}><Rectangle height={2} /></div>
-                                <Circle size={32} />
-                                <div style={{ flex: 1 }}><Rectangle height={2} /></div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Content is centered horizontally */
     align-items: center;
@@ -89,7 +64,32 @@ const Details: React.FC<{}> = () => {
     "></div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '16px',
+                                width: '256px',
+                            }}
+                        >
+                            <div style={{ width: '20%' }}><Rectangle height={2} /></div>
+                            <Circle size={32} />
+                            <div style={{ flex: 1 }}><Rectangle height={2} /></div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
index 5e8c084..578d8c5 100644
--- a/client/patterns/spin-button/Details.tsx
+++ b/client/patterns/spin-button/Details.tsx
@@ -26,68 +26,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '2px',
-                                    display: 'flex',
-                                }}
-                            >
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        marginRight: '4px',
-                                        padding: '4px',
-                                        width: '100px',
-                                    }}
-                                    value={value}
-                                    onChange={change}
-                                />
-                                <div
-                                    style={{
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        justifyContent: 'center',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            borderColor: 'transparent',
-                                            cursor: 'pointer',
-                                            flex: 1,
-                                            padding: '4px 4px 2px 4px',
-                                        }}
-                                        onClick={increase}
-                                    >
-                                        <Triangle size={6} corner="t" />
-                                    </button>
-                                    <button
-                                        style={{
-                                            borderColor: 'transparent',
-                                            cursor: 'pointer',
-                                            flex: 1,
-                                            padding: '2px 4px 4px 4px',
-                                        }}
-                                        onClick={decrease}
-                                    >
-                                        <Triangle size={6} corner="b" />
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     border: 1px solid rgba(0, 0, 0, 0.3);
     border-radius: 2px;
@@ -128,7 +67,68 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '2px',
+                                display: 'flex',
+                            }}
+                        >
+                            <input
+                                type="text"
+                                style={{
+                                    borderColor: 'transparent',
+                                    marginRight: '4px',
+                                    padding: '4px',
+                                    width: '100px',
+                                }}
+                                value={value}
+                                onChange={change}
+                            />
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        borderColor: 'transparent',
+                                        cursor: 'pointer',
+                                        flex: 1,
+                                        padding: '4px 4px 2px 4px',
+                                    }}
+                                    onClick={increase}
+                                >
+                                    <Triangle size={6} corner="t" />
+                                </button>
+                                <button
+                                    style={{
+                                        borderColor: 'transparent',
+                                        cursor: 'pointer',
+                                        flex: 1,
+                                        padding: '2px 4px 4px 4px',
+                                    }}
+                                    onClick={decrease}
+                                >
+                                    <Triangle size={6} corner="b" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.StepperInput]} />
         </DetailsLayout>
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
index d83d91a..c3a678c 100644
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -21,37 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <ul
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '8px',
-                                    display: 'flex',
-                                    listStyleType: 'none',
-                                    margin: 0,
-                                    padding: '16px',
-                                    width: '60%',
-                                }}
-                            >
-                                <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
-                                <li style={{ marginRight: '4px', width: '10%' }}><Rectangle /></li>
-                                <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
-                                <li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
-                            </ul>
-                        </div>
-                    )}
-                    source={`
+html={`
 <ul style="
     /* Content is centered horizontally */
     align-items: center;
@@ -75,7 +45,37 @@ const Details: React.FC<{}> = () => {
     </li>
 </ul>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <ul
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                listStyleType: 'none',
+                                margin: 0,
+                                padding: '16px',
+                                width: '60%',
+                            }}
+                        >
+                            <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
+                            <li style={{ marginRight: '4px', width: '10%' }}><Rectangle /></li>
+                            <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
+                            <li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
+                        </ul>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
         </DetailsLayout>
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
index 31652de..065df69 100644
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -22,38 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div style={{ display: 'flex', height: '100%' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px' }}><Circle size={128} /></div>
-                                <div style={{ width: '60%' }}><Rectangle /></div>
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                }}
-                            >
-                                <div style={{ padding: '32px' }}>
-                                    <div style={{ marginBottom: '32px' }}><Rectangle /></div>
-                                    <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="display: flex;">
     <!-- Left content -->
     <div style="flex: 1;">
@@ -66,7 +35,38 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div style={{ display: 'flex', height: '100%' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div style={{ marginBottom: '16px' }}><Circle size={128} /></div>
+                            <div style={{ width: '60%' }}><Rectangle /></div>
+                        </div>
+                        <div
+                            style={{
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div style={{ padding: '32px' }}>
+                                <div style={{ marginBottom: '32px' }}><Rectangle /></div>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/stacked-cards/Details.tsx b/client/patterns/stacked-cards/Details.tsx
index 10252d2..5c591fc 100644
--- a/client/patterns/stacked-cards/Details.tsx
+++ b/client/patterns/stacked-cards/Details.tsx
@@ -20,52 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#fff',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    height: '250px',
-                                    position: 'relative',
-                                    width: '200px',
-                                }}
-                            >
-                                {
-                                    Array(5).fill(0).map((_, index) => {
-                                        return (
-                                            <div
-                                                key={index}
-                                                style={{
-                                                    backgroundColor: '#fff',
-                                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                                    borderRadius: '4px',
-                                                    height: '100%',
-                                                    left: 0,
-                                                    position: 'absolute',
-                                                    top: 0,
-                                                    transform: `rotate(${5 * (index + 1)}deg)`,
-                                                    width: '100%',
-                                                    zIndex: -1,
-                                                }}
-                                            />
-                                        );
-                                    })
-                                }
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the stacked cards */
     position: relative;
@@ -96,7 +51,52 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: '#fff',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                height: '250px',
+                                position: 'relative',
+                                width: '200px',
+                            }}
+                        >
+                            {
+                                Array(5).fill(0).map((_, index) => {
+                                    return (
+                                        <div
+                                            key={index}
+                                            style={{
+                                                backgroundColor: '#fff',
+                                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                                borderRadius: '4px',
+                                                height: '100%',
+                                                left: 0,
+                                                position: 'absolute',
+                                                top: 0,
+                                                transform: `rotate(${5 * (index + 1)}deg)`,
+                                                width: '100%',
+                                                zIndex: -1,
+                                            }}
+                                        />
+                                    );
+                                })
+                            }
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.Card]} />
diff --git a/client/patterns/stamp-border/Details.tsx b/client/patterns/stamp-border/Details.tsx
index 94c9594..2360593 100644
--- a/client/patterns/stamp-border/Details.tsx
+++ b/client/patterns/stamp-border/Details.tsx
@@ -19,39 +19,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#ccc',
-                                    backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
-                                    backgroundPosition: '-5px -5px',
-                                    backgroundRepeat: 'repeat',
-                                    backgroundSize: '10px 10px',
-                                    height: '200px',
-                                    padding: '5px',
-                                    width: '200px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: '#ccc',
-                                        height: '100%',
-                                        width: '100%',
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Background */
     background-color: #ccc;
@@ -73,7 +41,39 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: '#ccc',
+                                backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
+                                backgroundPosition: '-5px -5px',
+                                backgroundRepeat: 'repeat',
+                                backgroundSize: '10px 10px',
+                                height: '200px',
+                                padding: '5px',
+                                width: '200px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: '#ccc',
+                                    height: '100%',
+                                    width: '100%',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/statistic/Details.tsx b/client/patterns/statistic/Details.tsx
index 0a6e10c..7dbad3b 100644
--- a/client/patterns/statistic/Details.tsx
+++ b/client/patterns/statistic/Details.tsx
@@ -20,34 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    flexDirection: 'column',
-                                }}
-                            >
-                                <div style={{ fontSize: '4rem', fontWeight: 500 }}>
-                                    {random(1000, 9999).toLocaleString()}
-                                </div>
-                                <div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
-                                    stars
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -76,7 +49,34 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                                flexDirection: 'column',
+                            }}
+                        >
+                            <div style={{ fontSize: '4rem', fontWeight: 500 }}>
+                                {random(1000, 9999).toLocaleString()}
+                            </div>
+                            <div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
+                                stars
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/status-light/Details.tsx b/client/patterns/status-light/Details.tsx
index 3f06ebe..b6b33cf 100644
--- a/client/patterns/status-light/Details.tsx
+++ b/client/patterns/status-light/Details.tsx
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    width: '150px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: '#4299e1',
-                                        borderRadius: '9999px',
-                                        height: '8px',
-                                        marginRight: '8px',
-                                        width: '8px',
-                                    }}
-                                />
-
-                                <div style={{ flex: 1 }}>
-                                    <Rectangle />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -86,7 +52,41 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                                width: '150px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: '#4299e1',
+                                    borderRadius: '9999px',
+                                    height: '8px',
+                                    marginRight: '8px',
+                                    width: '8px',
+                                }}
+                            />
+
+                            <div style={{ flex: 1 }}>
+                                <Rectangle />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <section>
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index 285a09a..4b731e4 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -29,78 +29,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '8px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    width: '128px',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                        borderColor: 'transparent',
-                                        cursor: 'pointer',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        width: '32px',
-                                    }}
-                                    onClick={decrease}
-                                >
-                                    -
-                                </button>
-                                <div
-                                    style={{
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        flex: 1,
-                                        height: '100%',
-                                    }}
-                                >
-                                    <input
-                                        type="text"
-                                        style={{
-                                            borderColor: 'transparent',
-                                            height: '100%',
-                                            padding: '8px',
-                                            width: '100%',
-                                        }}
-                                        value={value}
-                                        onChange={change}
-                                    />
-                                </div>
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                        borderColor: 'transparent',
-                                        cursor: 'pointer',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        width: '32px',
-                                    }}
-                                    onClick={increase}
-                                >
-                                    +
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
 
@@ -143,7 +72,78 @@ const Details: React.FC<{}> = () => {
     ">+</button>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                height: '32px',
+                                width: '128px',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                    borderColor: 'transparent',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    width: '32px',
+                                }}
+                                onClick={decrease}
+                            >
+                                -
+                            </button>
+                            <div
+                                style={{
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    flex: 1,
+                                    height: '100%',
+                                }}
+                            >
+                                <input
+                                    type="text"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        height: '100%',
+                                        padding: '8px',
+                                        width: '100%',
+                                    }}
+                                    value={value}
+                                    onChange={change}
+                                />
+                            </div>
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                    borderColor: 'transparent',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    width: '32px',
+                                }}
+                                onClick={increase}
+                            >
+                                +
+                            </button>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.SpinButton]} />
         </DetailsLayout>
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
index 6481530..8f6dd2b 100644
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -24,38 +24,7 @@ const Details: React.FC<{}> = () => {
                     The footer always sticks to the bottom if the main content is short.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    flexShrink: 0,
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ width: '50%' }}><Rectangle /></div>
-                            </div>
-                            <div style={{ flexGrow: 1, padding: '16px' }}>
-                                <Block numberOfBlocks={20} />
-                            </div>
-                            <div
-                                style={{
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    flexShrink: 0,
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}><Rectangle /></div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -72,7 +41,38 @@ const Details: React.FC<{}> = () => {
     </footer>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                flexShrink: 0,
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ width: '50%' }}><Rectangle /></div>
+                        </div>
+                        <div style={{ flexGrow: 1, padding: '16px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div
+                            style={{
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                flexShrink: 0,
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ width: '40%' }}><Rectangle /></div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index 2e3949f..2958fff 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -25,27 +25,7 @@ const Details: React.FC<{}> = () => {
                     Try to scroll the main content to see the header sticks to the top of page.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div>
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    padding: '16px',
-                                    position: 'sticky',
-                                    top: 0,
-                                }}
-                            >
-                                <div style={{ width: '50%' }}><Rectangle /></div>
-                            </div>
-                            <div style={{ padding: '16px' }}>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={40} /></div>
-                                <div><Block numberOfBlocks={30} /></div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div>
     <header style="
         /* Stick to the top */
@@ -59,7 +39,27 @@ const Details: React.FC<{}> = () => {
     </main>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div>
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                padding: '16px',
+                                position: 'sticky',
+                                top: 0,
+                            }}
+                        >
+                            <div style={{ width: '50%' }}><Rectangle /></div>
+                        </div>
+                        <div style={{ padding: '16px' }}>
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={40} /></div>
+                            <div><Block numberOfBlocks={30} /></div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns
diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx
index 6ada06d..f0caf3e 100644
--- a/client/patterns/sticky-sections/Details.tsx
+++ b/client/patterns/sticky-sections/Details.tsx
@@ -23,43 +23,7 @@ const Details: React.FC<{}> = () => {
                     Try to scroll the main content to see each section sticks to the top of page.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                height: '100%',
-                                overflow: 'scroll',
-                            }}
-                        >
-                            <section
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                    height: '100%',
-                                    position: 'sticky',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            />
-                            <section
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '100%',
-                                    position: 'sticky',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            />
-                            <section
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                                    height: '100%',
-                                    position: 'sticky',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            />
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     height: 100%;
     overflow: scroll;
@@ -80,7 +44,43 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            height: '100%',
+                            overflow: 'scroll',
+                        }}
+                    >
+                        <section
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                height: '100%',
+                                position: 'sticky',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        />
+                        <section
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '100%',
+                                position: 'sticky',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        />
+                        <section
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                                height: '100%',
+                                position: 'sticky',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        />
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
diff --git a/client/patterns/sticky-table-column/Details.tsx b/client/patterns/sticky-table-column/Details.tsx
index 2f5ae64..726a40e 100644
--- a/client/patterns/sticky-table-column/Details.tsx
+++ b/client/patterns/sticky-table-column/Details.tsx
@@ -27,104 +27,7 @@ const Details: React.FC<{}> = () => {
                     Try to scroll the main content of table horizontally to see the first column sticks to the left.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '400px',
-                                    overflow: 'auto',
-                                    width: '60%',
-                                }}
-                            >
-                                <table
-                                    style={{
-                                        borderCollapse: 'collapse',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <thead>
-                                        <tr>
-                                            {
-                                                Array(numberOfColumns).fill(0).map((_, index) => {
-                                                    return (
-                                                        <th
-                                                            key={index}
-                                                            style={(
-                                                                index === 0
-                                                                ? {
-                                                                    backgroundColor: '#ddd',
-                                                                    left: 0,
-                                                                    padding: '16px',
-                                                                    position: 'sticky',
-                                                                }
-                                                                : {
-                                                                    padding: '16px',
-                                                                }
-                                                            )}
-                                                        >
-                                                            <div style={{ width: '200px' }}>
-                                                                {
-                                                                    index === 0
-                                                                        ? <Rectangle />
-                                                                        : <Block numberOfBlocks={3} />
-                                                                }
-                                                            </div>
-                                                        </th>
-                                                    );
-                                                })
-                                            }
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {
-                                            Array(10).fill(0).map((_, row) => {
-                                                return (
-                                                    <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                                        {
-                                                            Array(numberOfColumns).fill(0).map((__, col) => {
-                                                                return (
-                                                                    <td
-                                                                        key={col}
-                                                                        style={(
-                                                                            col === 0 ? {
-                                                                                backgroundColor: '#ddd',
-                                                                                left: 0,
-                                                                                padding: '16px',
-                                                                                position: 'sticky',
-                                                                            } : {
-                                                                                padding: '16px',
-                                                                            }
-                                                                        )}
-                                                                    >
-                                                                        {
-                                                                            col === 0
-                                                                                ? <Rectangle />
-                                                                                : <Block numberOfBlocks={3} />
-                                                                        }
-                                                                    </td>
-                                                                );
-                                                            })
-                                                        }
-                                                    </tr>
-                                                );
-                                            })
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <table>
     <thead>
         <tr>
@@ -149,7 +52,104 @@ const Details: React.FC<{}> = () => {
     </tbody>
 </table>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '400px',
+                                overflow: 'auto',
+                                width: '60%',
+                            }}
+                        >
+                            <table
+                                style={{
+                                    borderCollapse: 'collapse',
+                                    width: '100%',
+                                }}
+                            >
+                                <thead>
+                                    <tr>
+                                        {
+                                            Array(numberOfColumns).fill(0).map((_, index) => {
+                                                return (
+                                                    <th
+                                                        key={index}
+                                                        style={(
+                                                            index === 0
+                                                            ? {
+                                                                backgroundColor: '#ddd',
+                                                                left: 0,
+                                                                padding: '16px',
+                                                                position: 'sticky',
+                                                            }
+                                                            : {
+                                                                padding: '16px',
+                                                            }
+                                                        )}
+                                                    >
+                                                        <div style={{ width: '200px' }}>
+                                                            {
+                                                                index === 0
+                                                                    ? <Rectangle />
+                                                                    : <Block numberOfBlocks={3} />
+                                                            }
+                                                        </div>
+                                                    </th>
+                                                );
+                                            })
+                                        }
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {
+                                        Array(10).fill(0).map((_, row) => {
+                                            return (
+                                                <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                                                    {
+                                                        Array(numberOfColumns).fill(0).map((__, col) => {
+                                                            return (
+                                                                <td
+                                                                    key={col}
+                                                                    style={(
+                                                                        col === 0 ? {
+                                                                            backgroundColor: '#ddd',
+                                                                            left: 0,
+                                                                            padding: '16px',
+                                                                            position: 'sticky',
+                                                                        } : {
+                                                                            padding: '16px',
+                                                                        }
+                                                                    )}
+                                                                >
+                                                                    {
+                                                                        col === 0
+                                                                            ? <Rectangle />
+                                                                            : <Block numberOfBlocks={3} />
+                                                                    }
+                                                                </td>
+                                                            );
+                                                        })
+                                                    }
+                                                </tr>
+                                            );
+                                        })
+                                    }
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
index da685cc..e58eca3 100644
--- a/client/patterns/sticky-table-headers/Details.tsx
+++ b/client/patterns/sticky-table-headers/Details.tsx
@@ -25,77 +25,7 @@ const Details: React.FC<{}> = () => {
                     Try to scroll the main content of table to see the header sticks to the top.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '400px',
-                                    overflow: 'auto',
-                                    width: '60%',
-                                }}
-                            >
-                                <table
-                                    style={{
-                                        borderCollapse: 'collapse',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <thead>
-                                        <tr>
-                                            {
-                                                Array(3).fill(0).map((_, index) => {
-                                                    return (
-                                                        <th
-                                                            key={index}
-                                                            style={{
-                                                                backgroundColor: '#ddd',
-                                                                padding: '16px',
-                                                                position: 'sticky',
-                                                                top: 0,
-                                                                zIndex: 9999,
-                                                            }}
-                                                        >
-                                                            <Rectangle />
-                                                        </th>
-                                                    );
-                                                })
-                                            }
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {
-                                            Array(10).fill(0).map((_, row) => {
-                                                return (
-                                                    <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                                        {
-                                                            Array(3).fill(0).map((__, col) => {
-                                                                return (
-                                                                    <td key={col} style={{ padding: '16px' }}>
-                                                                        <Block numberOfBlocks={3} />
-                                                                    </td>
-                                                                );
-                                                            })
-                                                        }
-                                                    </tr>
-                                                );
-                                            })
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <table>
     <thead>
         <tr>
@@ -120,7 +50,77 @@ const Details: React.FC<{}> = () => {
     </tbody>
 </table>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '400px',
+                                overflow: 'auto',
+                                width: '60%',
+                            }}
+                        >
+                            <table
+                                style={{
+                                    borderCollapse: 'collapse',
+                                    width: '100%',
+                                }}
+                            >
+                                <thead>
+                                    <tr>
+                                        {
+                                            Array(3).fill(0).map((_, index) => {
+                                                return (
+                                                    <th
+                                                        key={index}
+                                                        style={{
+                                                            backgroundColor: '#ddd',
+                                                            padding: '16px',
+                                                            position: 'sticky',
+                                                            top: 0,
+                                                            zIndex: 9999,
+                                                        }}
+                                                    >
+                                                        <Rectangle />
+                                                    </th>
+                                                );
+                                            })
+                                        }
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {
+                                        Array(10).fill(0).map((_, row) => {
+                                            return (
+                                                <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                                                    {
+                                                        Array(3).fill(0).map((__, col) => {
+                                                            return (
+                                                                <td key={col} style={{ padding: '16px' }}>
+                                                                    <Block numberOfBlocks={3} />
+                                                                </td>
+                                                            );
+                                                        })
+                                                    }
+                                                </tr>
+                                            );
+                                        })
+                                    }
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index 68ecb29..c5c8042 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -27,48 +27,7 @@ const Details: React.FC<{}> = () => {
                     the checkbox will be checked even though it's hidden.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <label
-                                htmlFor="checkbox-switch"
-                                style={{
-                                    backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
-                                    border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
-                                    borderRadius: '9999px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: checked ? 'flex-end' : '',
-                                    width: '64px',
-                                }}
-                            >
-                                <input
-                                    id="checkbox-switch"
-                                    type="checkbox"
-                                    style={{ display: 'none' }}
-                                    checked={checked}
-                                    onChange={toggle}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: '#FFF',
-                                        border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '9999px',
-                                        width: '32px',
-                                    }}
-                                />
-                            </label>
-                        </div>
-                    )}
-                    source={`
+html={`
 <label style="
     display: flex;
 
@@ -107,7 +66,48 @@ const Details: React.FC<{}> = () => {
     " />
 </label>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <label
+                            htmlFor="checkbox-switch"
+                            style={{
+                                backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
+                                border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
+                                borderRadius: '9999px',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: checked ? 'flex-end' : '',
+                                width: '64px',
+                            }}
+                        >
+                            <input
+                                id="checkbox-switch"
+                                type="checkbox"
+                                style={{ display: 'none' }}
+                                checked={checked}
+                                onChange={toggle}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '9999px',
+                                    width: '32px',
+                                }}
+                            />
+                        </label>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.RadioSwitch]} />
         </DetailsLayout>
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
index 7dec1fe..1c0a857 100644
--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -46,43 +46,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                }}
-                            >
-                                <Tab tabIndex={0}>
-                                    <div style={{ width: '64px' }}>
-                                        <Rectangle height={8} />
-                                    </div>
-                                </Tab>
-                                <Tab tabIndex={1}>
-                                    <div style={{ width: '32px' }}>
-                                        <Rectangle height={8} />
-                                    </div>
-                                </Tab>
-                                <Tab tabIndex={2}>
-                                    <div style={{ width: '128px' }}>
-                                        <Rectangle height={8} />
-                                    </div>
-                                </Tab>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -112,7 +76,43 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <Tab tabIndex={0}>
+                                <div style={{ width: '64px' }}>
+                                    <Rectangle height={8} />
+                                </div>
+                            </Tab>
+                            <Tab tabIndex={1}>
+                                <div style={{ width: '32px' }}>
+                                    <Rectangle height={8} />
+                                </div>
+                            </Tab>
+                            <Tab tabIndex={2}>
+                                <div style={{ width: '128px' }}>
+                                    <Rectangle height={8} />
+                                </div>
+                            </Tab>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/teardrop/Details.tsx b/client/patterns/teardrop/Details.tsx
index 2869903..975d648 100644
--- a/client/patterns/teardrop/Details.tsx
+++ b/client/patterns/teardrop/Details.tsx
@@ -23,36 +23,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '2px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '0 50% 50% 50%',
-                                    display: 'flex',
-                                    height: '64px',
-                                    justifyContent: 'center',
-                                    transform: 'rotate(45deg)',
-                                    width: '64px',
-                                }}
-                            >
-                                <div style={{ transform: 'rotate(-45deg)' }}>
-                                    <Circle />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Center the content */
     align-items: center;
@@ -78,7 +49,36 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '2px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '0 50% 50% 50%',
+                                display: 'flex',
+                                height: '64px',
+                                justifyContent: 'center',
+                                transform: 'rotate(45deg)',
+                                width: '64px',
+                            }}
+                        >
+                            <div style={{ transform: 'rotate(-45deg)' }}>
+                                <Circle />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
index 8ccab26..7d2bf36 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/client/patterns/timeline/Details.tsx
@@ -22,77 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    position: 'relative',
-                                    width: '60%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        borderRight: '2px solid #aaa',
-                                        height: '100%',
-                                        left: '16px',
-                                        position: 'absolute',
-                                        top: 0,
-                                    }}
-                                />
-                                <ul
-                                    style={{
-                                        listStyleType: 'none',
-                                        margin: 0,
-                                        padding: 0,
-                                    }}
-                                >
-                                    <li style={{ marginBottom: '8px' }}>
-                                        <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                            <Circle backgroundColor='#aaa' size={32} />
-                                            <div style={{ flex: 1, marginLeft: '16px' }}>
-                                                <div style={{ width: '80%' }}><Rectangle /></div>
-                                            </div>
-                                        </div>
-                                        <div style={{ marginLeft: '48px' }}>
-                                            <Block numberOfBlocks={10} blockHeight={2} />
-                                        </div>
-                                    </li>
-                                    <li style={{ marginBottom: '8px' }}>
-                                        <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                            <Circle backgroundColor='#aaa' size={32} />
-                                            <div style={{ flex: 1, marginLeft: '16px' }}>
-                                                <div style={{ width: '60%' }}><Rectangle /></div>
-                                            </div>
-                                        </div>
-                                        <div style={{ marginLeft: '48px' }}>
-                                            <Block numberOfBlocks={15} blockHeight={2} />
-                                        </div>
-                                    </li>
-                                    <li style={{ marginBottom: '8px' }}>
-                                        <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                            <Circle backgroundColor='#aaa' size={32} />
-                                            <div style={{ flex: 1, marginLeft: '16px' }}>
-                                                <div style={{ width: '60%' }}><Rectangle /></div>
-                                            </div>
-                                        </div>
-                                        <div style={{ marginLeft: '48px' }}>
-                                            <Block numberOfBlocks={10} blockHeight={2} />
-                                        </div>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the left vertical line */
     position: relative;
@@ -160,7 +90,77 @@ const Details: React.FC<{}> = () => {
     </ul>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                position: 'relative',
+                                width: '60%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    borderRight: '2px solid #aaa',
+                                    height: '100%',
+                                    left: '16px',
+                                    position: 'absolute',
+                                    top: 0,
+                                }}
+                            />
+                            <ul
+                                style={{
+                                    listStyleType: 'none',
+                                    margin: 0,
+                                    padding: 0,
+                                }}
+                            >
+                                <li style={{ marginBottom: '8px' }}>
+                                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                        <Circle backgroundColor='#aaa' size={32} />
+                                        <div style={{ flex: 1, marginLeft: '16px' }}>
+                                            <div style={{ width: '80%' }}><Rectangle /></div>
+                                        </div>
+                                    </div>
+                                    <div style={{ marginLeft: '48px' }}>
+                                        <Block numberOfBlocks={10} blockHeight={2} />
+                                    </div>
+                                </li>
+                                <li style={{ marginBottom: '8px' }}>
+                                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                        <Circle backgroundColor='#aaa' size={32} />
+                                        <div style={{ flex: 1, marginLeft: '16px' }}>
+                                            <div style={{ width: '60%' }}><Rectangle /></div>
+                                        </div>
+                                    </div>
+                                    <div style={{ marginLeft: '48px' }}>
+                                        <Block numberOfBlocks={15} blockHeight={2} />
+                                    </div>
+                                </li>
+                                <li style={{ marginBottom: '8px' }}>
+                                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                        <Circle backgroundColor='#aaa' size={32} />
+                                        <div style={{ flex: 1, marginLeft: '16px' }}>
+                                            <div style={{ width: '60%' }}><Rectangle /></div>
+                                        </div>
+                                    </div>
+                                    <div style={{ marginLeft: '48px' }}>
+                                        <Block numberOfBlocks={10} blockHeight={2} />
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index 190ede8..8f58d60 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -22,65 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '256px' }}>
-                                <div
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                    }}
-                                >
-                                    <input
-                                        type={visible ? 'text' : 'password'}
-                                        autoComplete="off"
-                                        style={{
-                                            borderColor: 'transparent',
-                                            flex: 1,
-                                            marginLeft: '1px',
-                                            padding: '4px',
-                                        }}
-                                    />
-                                    <button
-                                        style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
-                                        onClick={toggle}
-                                    >
-                                        <svg
-                                            viewBox="0 0 24 24"
-                                            style={{
-                                                fill: 'none',
-                                                height: '24px',
-                                                stroke: "rgba(0, 0, 0, 0.4)",
-                                                strokeLinecap: 'round',
-                                                strokeLinejoin: 'round',
-                                                strokeWidth: 1,
-                                                width: '24px',
-                                            }}
-                                        >
-                                            <path
-                                                d={
-                                                    visible
-                                                    ? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
-                                                    : `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
-                                                }
-                                            />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
 
@@ -103,7 +45,65 @@ const Details: React.FC<{}> = () => {
     </button>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '256px' }}>
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                }}
+                            >
+                                <input
+                                    type={visible ? 'text' : 'password'}
+                                    autoComplete="off"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        flex: 1,
+                                        marginLeft: '1px',
+                                        padding: '4px',
+                                    }}
+                                />
+                                <button
+                                    style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
+                                    onClick={toggle}
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        style={{
+                                            fill: 'none',
+                                            height: '24px',
+                                            stroke: "rgba(0, 0, 0, 0.4)",
+                                            strokeLinecap: 'round',
+                                            strokeLinejoin: 'round',
+                                            strokeWidth: 1,
+                                            width: '24px',
+                                        }}
+                                    >
+                                        <path
+                                            d={
+                                                visible
+                                                ? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
+                                                : `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
+                                            }
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/tooltip/Details.tsx b/client/patterns/tooltip/Details.tsx
index c9f4a2f..a64ee6f 100644
--- a/client/patterns/tooltip/Details.tsx
+++ b/client/patterns/tooltip/Details.tsx
@@ -27,39 +27,7 @@ const Details: React.FC<{}> = () => {
                     Move the mouser over the main element to see the tooltip.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                className="p-tooltip"
-                                style={{
-                                    marginBottom: '16px',
-                                    width: '150px',
-                                }}
-                            >
-                                <div
-                                    className="p-tooltip-content"
-                                    style={{
-                                        padding: '8px',
-                                        width: '200px',
-                                    }}
-                                >
-                                    <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
-                                </div>
-                                <div className="p-tooltip-arrow" />
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <style>
 .p-tooltip {
     /* Used to position the arrow */
@@ -126,7 +94,39 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            className="p-tooltip"
+                            style={{
+                                marginBottom: '16px',
+                                width: '150px',
+                            }}
+                        >
+                            <div
+                                className="p-tooltip-content"
+                                style={{
+                                    padding: '8px',
+                                    width: '200px',
+                                }}
+                            >
+                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
+                            </div>
+                            <div className="p-tooltip-arrow" />
+                            <Rectangle height={32} />
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.PopoverArrow]} />
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
index 45cf99b..924d7fb 100644
--- a/client/patterns/triangle-buttons/Details.tsx
+++ b/client/patterns/triangle-buttons/Details.tsx
@@ -20,147 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    height: '200px',
-                                    position: 'relative',
-                                    width: '200px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: 0,
-                                        transform: 'translate(-50%, -50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div
-                                            style={{
-                                                borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
-                                                borderStyle: 'solid',
-                                                borderWidth: '0px 8px 8px 8px',
-                                                height: 0,
-                                                width: 0,
-                                            }}
-                                        />
-                                        <div style={{ marginLeft: '8px' }}>Up</div>
-                                    </button>
-                                </div>
-                                <div
-                                    style={{
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: '50%',
-                                        transform: 'translate(50%, -50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div style={{ marginRight: '8px' }}>Right</div>
-                                        <div
-                                            style={{
-                                                borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
-                                                borderStyle: 'solid',
-                                                borderWidth: '8px 0px 8px 8px',
-                                                height: 0,
-                                                width: 0,
-                                            }}
-                                        />
-                                    </button>
-                                </div>
-                                <div
-                                    style={{
-                                        bottom: 0,
-                                        left: '50%',
-                                        position: 'absolute',
-                                        transform: 'translate(-50%, 50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div
-                                            style={{
-                                                borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
-                                                borderStyle: 'solid',
-                                                borderWidth: '8px 8px 0px 8px',
-                                                height: 0,
-                                                width: 0,
-                                            }}
-                                        />
-                                        <div style={{ marginLeft: '8px' }}>Down</div>
-                                    </button>
-                                </div>
-                                <div
-                                    style={{
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                    }}
-                                >
-                                    <button
-                                        style={{
-                                            alignItems: 'center',
-                                            backgroundColor: 'transparent',
-                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            padding: '8px',
-                                        }}
-                                    >
-                                        <div
-                                            style={{
-                                                borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
-                                                borderStyle: 'solid',
-                                                borderWidth: '8px 8px 8px 0px',
-                                                height: 0,
-                                                width: 0,
-                                            }}
-                                        />
-                                        <div style={{ marginLeft: '8px' }}>Left</div>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <!-- Up triangle button -->
 <button style="
     /* Center the content */
@@ -261,7 +121,147 @@ const Details: React.FC<{}> = () => {
     ...
 </button>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                height: '200px',
+                                position: 'relative',
+                                width: '200px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: 0,
+                                    transform: 'translate(-50%, -50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                                            borderStyle: 'solid',
+                                            borderWidth: '0px 8px 8px 8px',
+                                            height: 0,
+                                            width: 0,
+                                        }}
+                                    />
+                                    <div style={{ marginLeft: '8px' }}>Up</div>
+                                </button>
+                            </div>
+                            <div
+                                style={{
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: '50%',
+                                    transform: 'translate(50%, -50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div style={{ marginRight: '8px' }}>Right</div>
+                                    <div
+                                        style={{
+                                            borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
+                                            borderStyle: 'solid',
+                                            borderWidth: '8px 0px 8px 8px',
+                                            height: 0,
+                                            width: 0,
+                                        }}
+                                    />
+                                </button>
+                            </div>
+                            <div
+                                style={{
+                                    bottom: 0,
+                                    left: '50%',
+                                    position: 'absolute',
+                                    transform: 'translate(-50%, 50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                                            borderStyle: 'solid',
+                                            borderWidth: '8px 8px 0px 8px',
+                                            height: 0,
+                                            width: 0,
+                                        }}
+                                    />
+                                    <div style={{ marginLeft: '8px' }}>Down</div>
+                                </button>
+                            </div>
+                            <div
+                                style={{
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
+                                            borderStyle: 'solid',
+                                            borderWidth: '8px 8px 8px 0px',
+                                            height: 0,
+                                            width: 0,
+                                        }}
+                                    />
+                                    <div style={{ marginLeft: '8px' }}>Left</div>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
 
             <RelatedPatterns patterns={[Pattern.ArrowButtons]} />
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
index faff09c..cdeea04 100644
--- a/client/patterns/upload-button/Details.tsx
+++ b/client/patterns/upload-button/Details.tsx
@@ -23,67 +23,7 @@ const Details: React.FC<{}> = () => {
                     You can click the button to choose a file.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ width: '128px' }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        padding: '8px',
-                                        position: 'relative',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <input
-                                        type="file"
-                                        style={{
-                                            height: '100%',
-                                            left: 0,
-                                            opacity: 0,
-                                            position: 'absolute',
-                                            top: 0,
-                                            width: '100%',
-                                        }}
-                                    />
-                                    <div style={{ marginRight: '8px' }}>
-                                        <svg
-                                            viewBox="0 0 24 24"
-                                            style={{
-                                                fill: 'none',
-                                                height: '24',
-                                                stroke: "rgba(0, 0, 0, 0.4)",
-                                                strokeLinecap: 'round',
-                                                strokeLinejoin: 'round',
-                                                strokeWidth: 1,
-                                                width: '24',
-                                            }}
-                                        >
-                                            <path
-                                                d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
-                                                c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
-                                                H18.5z
-                                                M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
-                                            />
-                                        </svg>
-                                    </div>
-                                    <Rectangle />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the input */
     position: relative;
@@ -118,7 +58,67 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ width: '128px' }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    padding: '8px',
+                                    position: 'relative',
+                                    width: '100%',
+                                }}
+                            >
+                                <input
+                                    type="file"
+                                    style={{
+                                        height: '100%',
+                                        left: 0,
+                                        opacity: 0,
+                                        position: 'absolute',
+                                        top: 0,
+                                        width: '100%',
+                                    }}
+                                />
+                                <div style={{ marginRight: '8px' }}>
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        style={{
+                                            fill: 'none',
+                                            height: '24',
+                                            stroke: "rgba(0, 0, 0, 0.4)",
+                                            strokeLinecap: 'round',
+                                            strokeLinejoin: 'round',
+                                            strokeWidth: 1,
+                                            width: '24',
+                                        }}
+                                    >
+                                        <path
+                                            d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
+                                            c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
+                                            H18.5z
+                                            M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
+                                        />
+                                    </svg>
+                                </div>
+                                <Rectangle />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx
index 310c31c..1b2d24b 100644
--- a/client/patterns/validation-icon/Details.tsx
+++ b/client/patterns/validation-icon/Details.tsx
@@ -19,103 +19,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    marginBottom: '16px',
-                                    position: 'relative',
-                                    width: '200px',
-                                }}
-                            >
-                                <input
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        height: '32px',
-                                        paddingRight: '24px',
-                                        width: '100%',
-                                    }}
-                                />
-                                <i
-                                    style={{
-                                        position: 'absolute',
-                                        right: '8px',
-                                        top: '50%',
-                                        transform: 'translate(0, -50%)',
-                                        zIndex: 10,
-                                    }}
-                                >
-                                    <svg
-                                        viewBox="0 0 24 24"
-                                        style={{
-                                            fill: 'none',
-                                            height: '16px',
-                                            stroke: "rgba(0, 0, 0, 0.5)",
-                                            strokeLinecap: 'round',
-                                            strokeLinejoin: 'round',
-                                            strokeWidth: 2,
-                                            width: '16px',
-                                        }}
-                                    >
-                                        <path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
-                                    </svg>
-                                </i>
-                            </div>
-
-                            <div
-                                style={{
-                                    marginBottom: '16px',
-                                    position: 'relative',
-                                    width: '200px',
-                                }}
-                            >
-                                <input
-                                    style={{
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        height: '32px',
-                                        paddingRight: '24px',
-                                        width: '100%',
-                                    }}
-                                />
-                                <i
-                                    style={{
-                                        position: 'absolute',
-                                        right: '8px',
-                                        top: '50%',
-                                        transform: 'translate(0, -50%)',
-                                        zIndex: 10,
-                                    }}
-                                >
-                                    <svg
-                                        viewBox="0 0 24 24"
-                                        style={{
-                                            fill: 'none',
-                                            height: '16px',
-                                            stroke: '#e7040f',
-                                            strokeLinecap: 'round',
-                                            strokeLinejoin: 'round',
-                                            strokeWidth: 2,
-                                            width: '16px',
-                                        }}
-                                    >
-                                        <path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
-                                    </svg>
-                                </i>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the validation icon */
     position: relative;
@@ -148,7 +52,103 @@ const Details: React.FC<{}> = () => {
     </i>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                marginBottom: '16px',
+                                position: 'relative',
+                                width: '200px',
+                            }}
+                        >
+                            <input
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    height: '32px',
+                                    paddingRight: '24px',
+                                    width: '100%',
+                                }}
+                            />
+                            <i
+                                style={{
+                                    position: 'absolute',
+                                    right: '8px',
+                                    top: '50%',
+                                    transform: 'translate(0, -50%)',
+                                    zIndex: 10,
+                                }}
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    style={{
+                                        fill: 'none',
+                                        height: '16px',
+                                        stroke: "rgba(0, 0, 0, 0.5)",
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
+                                        strokeWidth: 2,
+                                        width: '16px',
+                                    }}
+                                >
+                                    <path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
+                                </svg>
+                            </i>
+                        </div>
+
+                        <div
+                            style={{
+                                marginBottom: '16px',
+                                position: 'relative',
+                                width: '200px',
+                            }}
+                        >
+                            <input
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    height: '32px',
+                                    paddingRight: '24px',
+                                    width: '100%',
+                                }}
+                            />
+                            <i
+                                style={{
+                                    position: 'absolute',
+                                    right: '8px',
+                                    top: '50%',
+                                    transform: 'translate(0, -50%)',
+                                    zIndex: 10,
+                                }}
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    style={{
+                                        fill: 'none',
+                                        height: '16px',
+                                        stroke: '#e7040f',
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
+                                        strokeWidth: 2,
+                                        width: '16px',
+                                    }}
+                                >
+                                    <path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
+                                </svg>
+                            </i>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
index d0ca5f7..e20cf60 100644
--- a/client/patterns/video-background/Details.tsx
+++ b/client/patterns/video-background/Details.tsx
@@ -24,67 +24,7 @@ const Details: React.FC<{}> = () => {
                     In this pattern, the video is displayed in the background.
                 </div>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    height: '100%',
-                                    position: 'relative',
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        height: '100%',
-                                        left: 0,
-                                        overflow: 'hidden',
-                                        position: 'absolute',
-                                        top: 0,
-                                        width: '100%',
-                                    }}
-                                >
-                                    <video
-                                        style={{
-                                            objectFit: 'cover',
-                                            width: '100%',
-                                        }}
-                                        autoPlay={true}
-                                        loop={true}
-                                        muted={true}
-                                        playsInline={true}
-                                        src="/assets/video-background-demo.mp4"
-                                    />
-                                </div>
-
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        height: '100%',
-                                        justifyContent: 'center',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: 0,
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div style={{ width: '250px' }}>
-                                        <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the video and content */
     position: relative;
@@ -141,7 +81,67 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                height: '100%',
+                                position: 'relative',
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '100%',
+                                    left: 0,
+                                    overflow: 'hidden',
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            >
+                                <video
+                                    style={{
+                                        objectFit: 'cover',
+                                        width: '100%',
+                                    }}
+                                    autoPlay={true}
+                                    loop={true}
+                                    muted={true}
+                                    playsInline={true}
+                                    src="/assets/video-background-demo.mp4"
+                                />
+                            </div>
+
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ width: '250px' }}>
+                                    <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
             <RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
         </DetailsLayout>
diff --git a/client/patterns/watermark/Details.tsx b/client/patterns/watermark/Details.tsx
index c8645a4..9a8a3c1 100644
--- a/client/patterns/watermark/Details.tsx
+++ b/client/patterns/watermark/Details.tsx
@@ -20,66 +20,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    padding: '16px',
-                                    position: 'relative',
-                                    width: '300px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        height: '100%',
-                                        justifyContent: 'center',
-                                        left: 0,
-                                        position: 'absolute',
-                                        top: 0,
-                                        width: '100%',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            color: 'rgba(0, 0, 0, 0.2)',
-                                            fontSize: '3rem',
-                                            fontWeight: 'bold',
-                                            textTransform: 'uppercase',
-                                            transform: 'rotate(-45deg)',
-                                            userSelect: 'none',
-                                        }}
-                                    >
-                                        Draft
-                                    </div>
-                                </div>
-
-                                <div style={{ marginBottom: '8px' }}>
-                                    <Block numberOfBlocks={20} />
-                                </div>
-
-                                <div style={{ marginBottom: '8px' }}>
-                                    <Block numberOfBlocks={15} />
-                                </div>
-
-                                <div style={{ marginBottom: '8px' }}>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     /* Used to position the watermark */
     position: relative;
@@ -124,7 +65,66 @@ const Details: React.FC<{}> = () => {
     ...
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                padding: '16px',
+                                position: 'relative',
+                                width: '300px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        color: 'rgba(0, 0, 0, 0.2)',
+                                        fontSize: '3rem',
+                                        fontWeight: 'bold',
+                                        textTransform: 'uppercase',
+                                        transform: 'rotate(-45deg)',
+                                        userSelect: 'none',
+                                    }}
+                                >
+                                    Draft
+                                </div>
+                            </div>
+
+                            <div style={{ marginBottom: '8px' }}>
+                                <Block numberOfBlocks={20} />
+                            </div>
+
+                            <div style={{ marginBottom: '8px' }}>
+                                <Block numberOfBlocks={15} />
+                            </div>
+
+                            <div style={{ marginBottom: '8px' }}>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
index 029bdbf..c11635e 100644
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -22,100 +22,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
-                    content={(
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ display: 'flex', width: '80%' }}>
-                                <div style={{ flex: 1 }}>
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            marginBottom: '16px',
-                                        }}
-                                    >
-                                        <div style={{ flex: 1 }} />
-                                        <div
-                                            style={{
-                                                alignItems: 'center',
-                                                display: 'flex',
-                                                justifyContent: 'center',
-                                                margin: '0 4px',
-                                            }}
-                                        >
-                                            <Circle size={32} />
-                                        </div>
-                                        <div style={{ flex: 1 }}><Line /></div>
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                        <Block justify='center' numberOfBlocks={5} />
-                                    </div>
-                                </div>
-                                <div style={{ flex: 1 }}>
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            marginBottom: '16px',
-                                        }}
-                                    >
-                                        <div style={{ flex: 1 }}><Line /></div>
-                                        <div
-                                            style={{
-                                                alignItems: 'center',
-                                                display: 'flex',
-                                                justifyContent: 'center',
-                                                margin: '0 4px',
-                                            }}
-                                        >
-                                            <Circle size={32} />
-                                        </div>
-                                        <div style={{ flex: 1 }}><Line /></div>
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                        <Block justify='center' numberOfBlocks={5} />
-                                    </div>
-                                </div>
-                                <div style={{ flex: 1 }}>
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            marginBottom: '16px',
-                                        }}
-                                    >
-                                        <div style={{ flex: 1 }}><Line /></div>
-                                        <div
-                                            style={{
-                                                alignItems: 'center',
-                                                display: 'flex',
-                                                justifyContent: 'center',
-                                                margin: '0 4px',
-                                            }}
-                                        >
-                                            <Circle size={32} />
-                                        </div>
-                                        <div style={{ flex: 1 }} />
-                                    </div>
-                                    <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                        <Block justify='center' numberOfBlocks={5} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    source={`
+html={`
 <div style="
     display: flex;
 ">
@@ -180,7 +87,100 @@ const Details: React.FC<{}> = () => {
     </div>
 </div>
 `}
-                />
+css={``}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div style={{ display: 'flex', width: '80%' }}>
+                            <div style={{ flex: 1 }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        marginBottom: '16px',
+                                    }}
+                                >
+                                    <div style={{ flex: 1 }} />
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            margin: '0 4px',
+                                        }}
+                                    >
+                                        <Circle size={32} />
+                                    </div>
+                                    <div style={{ flex: 1 }}><Line /></div>
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
+                                    <Block justify='center' numberOfBlocks={5} />
+                                </div>
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        marginBottom: '16px',
+                                    }}
+                                >
+                                    <div style={{ flex: 1 }}><Line /></div>
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            margin: '0 4px',
+                                        }}
+                                    >
+                                        <Circle size={32} />
+                                    </div>
+                                    <div style={{ flex: 1 }}><Line /></div>
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
+                                    <Block justify='center' numberOfBlocks={5} />
+                                </div>
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        marginBottom: '16px',
+                                    }}
+                                >
+                                    <div style={{ flex: 1 }}><Line /></div>
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            margin: '0 4px',
+                                        }}
+                                    >
+                                        <Circle size={32} />
+                                    </div>
+                                    <div style={{ flex: 1 }} />
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
+                                    <Block justify='center' numberOfBlocks={5} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </BrowserFrame>
             </div>
         </DetailsLayout>
     );
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index af88283..da8941e 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -9,18 +9,21 @@ import SampleCode from '../components/SampleCode';
 import './browserFrame.css';
 
 interface BrowserFrameProps {
-    content: React.ReactNode;
-    source?: string;
+    css: string;
+    html: string;    
 }
 
-const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
+const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
     return (
         <div className="demo">
-            <div className="demo__source">
-                {source && <SampleCode fullHeight={true} lang="html" code={source} />}
+            <div className="demo__html">
+                <SampleCode fullHeight={true} lang="html" code={html} />
+            </div>
+            <div className="demo__css">
+                <SampleCode fullHeight={true} lang="css" code={css} />
             </div>
             <div className="demo__live">
-                {content}
+                {children}
             </div>
         </div>
     );
diff --git a/client/placeholders/browserFrame.css b/client/placeholders/browserFrame.css
index 6e79e86..79cfcef 100644
--- a/client/placeholders/browserFrame.css
+++ b/client/placeholders/browserFrame.css
@@ -7,7 +7,12 @@
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.25rem;
 }
-.demo__source,
 .demo__live {
     height: 32rem;
 }
+.demo__css,
+.demo__html {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    height: 16rem;
+    overflow: auto;
+}
\ No newline at end of file