refrakt.mdSandbox
Render raw HTML, CSS, and JavaScript in an isolated iframe. The sandbox handles isolation and optional framework loading — useful for live examples, embedded widgets, and framework demos.
Basic usage
Write HTML directly inside the sandbox tag. The content is rendered in an iframe, completely isolated from the rest of the page.
{% sandbox %}
<style>
.badge {
display: inline-block;
padding: 4px 12px;
background: #7C3AED;
color: white;
border-radius: 9999px;
font-family: system-ui;
font-size: 14px;
}
</style>
<span class="badge">Live HTML</span>
{% /sandbox %}<div data-rune="sandbox">
<meta content="<style>
.badge {
display: inline-block;
padding: 4px 12px;
background: #7C3AED;
color: white;
border-radius: 9999px;
font-family: system-ui;
font-size: 14px;
}
</style>
<span class="badge">Live HTML</span>" data-field="content">
<meta content="" data-field="framework">
<meta content="" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><style>
.badge {
display: inline-block;
padding: 4px 12px;
background: #7C3AED;
color: white;
border-radius: 9999px;
font-family: system-ui;
font-size: 14px;
}
</style>
<span class="badge">Live HTML</span></code>
</pre>
</div><style>
.badge {
display: inline-block;
padding: 4px 12px;
background: #7C3AED;
color: white;
border-radius: 9999px;
font-family: system-ui;
font-size: 14px;
}
</style>
<span class="badge">Live HTML</span><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<style>
.badge {
display: inline-block;
padding: 4px 12px;
background: #7C3AED;
color: white;
border-radius: 9999px;
font-family: system-ui;
font-size: 14px;
}
</style>
<span class="badge">Live HTML</span>" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><style>
.badge {
display: inline-block;
padding: 4px 12px;
background: #7C3AED;
color: white;
border-radius: 9999px;
font-family: system-ui;
font-size: 14px;
}
</style>
<span class="badge">Live HTML</span></code></pre>
</template>
<template data-content="source"><style>
.badge {
display: inline-block;
padding: 4px 12px;
background: #7C3AED;
color: white;
border-radius: 9999px;
font-family: system-ui;
font-size: 14px;
}
</style>
<span class="badge">Live HTML</span></template>
</rf-sandbox>Framework presets
The framework attribute loads a CSS framework from CDN automatically.
{% sandbox framework="tailwind" %}
<div class="flex gap-3 p-4">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
Primary
</button>
<button class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Secondary
</button>
</div>
{% /sandbox %}<div data-rune="sandbox">
<meta content="<div class="flex gap-3 p-4">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
Primary
</button>
<button class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Secondary
</button>
</div>" data-field="content">
<meta content="tailwind" data-field="framework">
<meta content="" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><div class="flex gap-3 p-4">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
Primary
</button>
<button class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Secondary
</button>
</div></code>
</pre>
</div><div class="flex gap-3 p-4">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
Primary
</button>
<button class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Secondary
</button>
</div><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<div class="flex gap-3 p-4">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
Primary
</button>
<button class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Secondary
</button>
</div>" data-framework="tailwind" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><div class="flex gap-3 p-4">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
Primary
</button>
<button class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Secondary
</button>
</div></code></pre>
</template>
<template data-content="source"><div class="flex gap-3 p-4">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
Primary
</button>
<button class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Secondary
</button>
</div></template>
</rf-sandbox>Available presets:
| Preset | What's loaded |
|---|---|
tailwind | Tailwind Play CDN |
bootstrap | Bootstrap 5 CSS |
bulma | Bulma CSS |
pico | Pico CSS |
Custom dependencies
Load any script or stylesheet by URL with the dependencies attribute.
{% sandbox dependencies="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" %}
<main class="container">
<article>
<h2>Pico CSS card</h2>
<p>Loaded via the dependencies attribute.</p>
<button>Click me</button>
</article>
</main>
{% /sandbox %}<div data-rune="sandbox">
<meta content="<main class="container">
<article>
<h2>Pico CSS card</h2>
<p>Loaded via the dependencies attribute.</p>
<button>Click me</button>
</article>
</main>" data-field="content">
<meta content="" data-field="framework">
<meta content="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><main class="container">
<article>
<h2>Pico CSS card</h2>
<p>Loaded via the dependencies attribute.</p>
<button>Click me</button>
</article>
</main></code>
</pre>
</div><main class="container">
<article>
<h2>Pico CSS card</h2>
<p>Loaded via the dependencies attribute.</p>
<button>Click me</button>
</article>
</main><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<main class="container">
<article>
<h2>Pico CSS card</h2>
<p>Loaded via the dependencies attribute.</p>
<button>Click me</button>
</article>
</main>" data-dependencies="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><main class="container">
<article>
<h2>Pico CSS card</h2>
<p>Loaded via the dependencies attribute.</p>
<button>Click me</button>
</article>
</main></code></pre>
</template>
<template data-content="source"><main class="container">
<article>
<h2>Pico CSS card</h2>
<p>Loaded via the dependencies attribute.</p>
<button>Click me</button>
</article>
</main></template>
</rf-sandbox>With JavaScript
Scripts run inside the sandboxed iframe, fully isolated from the host page.
{% sandbox %}
<style>
.counter {
font-family: system-ui;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
}
.counter button {
padding: 6px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 16px;
}
.counter button:hover { background: #f3f4f6; }
.counter span { font-size: 24px; font-weight: 600; min-width: 3ch; text-align: center; }
@media (prefers-color-scheme: dark) {
.counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.counter button:hover { background: #4b5563; }
}
[data-theme="dark"] .counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
[data-theme="dark"] .counter button:hover { background: #4b5563; }
</style>
<div class="counter">
<button onclick="update(-1)">−</button>
<span id="count">0</span>
<button onclick="update(1)">+</button>
</div>
<script>
let count = 0;
function update(delta) {
count += delta;
document.getElementById('count').textContent = count;
}
</script>
{% /sandbox %}<div data-rune="sandbox">
<meta content="<style>
.counter {
font-family: system-ui;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
}
.counter button {
padding: 6px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 16px;
}
.counter button:hover { background: #f3f4f6; }
.counter span { font-size: 24px; font-weight: 600; min-width: 3ch; text-align: center; }
@media (prefers-color-scheme: dark) {
.counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.counter button:hover { background: #4b5563; }
}
[data-theme="dark"] .counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
[data-theme="dark"] .counter button:hover { background: #4b5563; }
</style>
<div class="counter">
<button onclick="update(-1)">−</button>
<span id="count">0</span>
<button onclick="update(1)">+</button>
</div>
<script>
let count = 0;
function update(delta) {
count += delta;
document.getElementById('count').textContent = count;
}
</script>" data-field="content">
<meta content="" data-field="framework">
<meta content="" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><style>
.counter {
font-family: system-ui;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
}
.counter button {
padding: 6px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 16px;
}
.counter button:hover { background: #f3f4f6; }
.counter span { font-size: 24px; font-weight: 600; min-width: 3ch; text-align: center; }
@media (prefers-color-scheme: dark) {
.counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.counter button:hover { background: #4b5563; }
}
[data-theme="dark"] .counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
[data-theme="dark"] .counter button:hover { background: #4b5563; }
</style>
<div class="counter">
<button onclick="update(-1)">−</button>
<span id="count">0</span>
<button onclick="update(1)">+</button>
</div>
<script>
let count = 0;
function update(delta) {
count += delta;
document.getElementById('count').textContent = count;
}
</script></code>
</pre>
</div><style>
.counter {
font-family: system-ui;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
}
.counter button {
padding: 6px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 16px;
}
.counter button:hover { background: #f3f4f6; }
.counter span { font-size: 24px; font-weight: 600; min-width: 3ch; text-align: center; }
@media (prefers-color-scheme: dark) {
.counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.counter button:hover { background: #4b5563; }
}
[data-theme="dark"] .counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
[data-theme="dark"] .counter button:hover { background: #4b5563; }
</style>
<div class="counter">
<button onclick="update(-1)">−</button>
<span id="count">0</span>
<button onclick="update(1)">+</button>
</div>
<script>
let count = 0;
function update(delta) {
count += delta;
document.getElementById('count').textContent = count;
}
</script><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<style>
.counter {
font-family: system-ui;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
}
.counter button {
padding: 6px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 16px;
}
.counter button:hover { background: #f3f4f6; }
.counter span { font-size: 24px; font-weight: 600; min-width: 3ch; text-align: center; }
@media (prefers-color-scheme: dark) {
.counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.counter button:hover { background: #4b5563; }
}
[data-theme="dark"] .counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
[data-theme="dark"] .counter button:hover { background: #4b5563; }
</style>
<div class="counter">
<button onclick="update(-1)">−</button>
<span id="count">0</span>
<button onclick="update(1)">+</button>
</div>
<script>
let count = 0;
function update(delta) {
count += delta;
document.getElementById('count').textContent = count;
}
</script>" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><style>
.counter {
font-family: system-ui;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
}
.counter button {
padding: 6px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 16px;
}
.counter button:hover { background: #f3f4f6; }
.counter span { font-size: 24px; font-weight: 600; min-width: 3ch; text-align: center; }
@media (prefers-color-scheme: dark) {
.counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.counter button:hover { background: #4b5563; }
}
[data-theme="dark"] .counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
[data-theme="dark"] .counter button:hover { background: #4b5563; }
</style>
<div class="counter">
<button onclick="update(-1)">−</button>
<span id="count">0</span>
<button onclick="update(1)">+</button>
</div>
<script>
let count = 0;
function update(delta) {
count += delta;
document.getElementById('count').textContent = count;
}
</script></code></pre>
</template>
<template data-content="source"><style>
.counter {
font-family: system-ui;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
}
.counter button {
padding: 6px 16px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 16px;
}
.counter button:hover { background: #f3f4f6; }
.counter span { font-size: 24px; font-weight: 600; min-width: 3ch; text-align: center; }
@media (prefers-color-scheme: dark) {
.counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.counter button:hover { background: #4b5563; }
}
[data-theme="dark"] .counter button { background: #374151; border-color: #4b5563; color: #f3f4f6; }
[data-theme="dark"] .counter button:hover { background: #4b5563; }
</style>
<div class="counter">
<button onclick="update(-1)">−</button>
<span id="count">0</span>
<button onclick="update(1)">+</button>
</div>
<script>
let count = 0;
function update(delta) {
count += delta;
document.getElementById('count').textContent = count;
}
</script></template>
</rf-sandbox>Source code panels with data-source
When used inside a preview with source=true, you can mark elements with data-source to control what appears in the source tab. Unmarked elements (scaffolding, wrappers) are excluded from the source view but still render in the preview.
{% sandbox framework="tailwind" %}
<div class="min-h-[120px] flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
<button data-source class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 font-medium transition-colors">
Click me
</button>
</div>
{% /sandbox %}<div data-rune="sandbox">
<meta content="<div class="min-h-[120px] flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
<button data-source class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 font-medium transition-colors">
Click me
</button>
</div>" data-field="content">
<meta content="tailwind" data-field="framework">
<meta content="" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><div class="min-h-[120px] flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
<button data-source class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 font-medium transition-colors">
Click me
</button>
</div></code>
</pre>
<meta data-field="source-panel" data-label="Html">
</div><div class="min-h-[120px] flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
<button data-source class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 font-medium transition-colors">
Click me
</button>
</div><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<div class="min-h-[120px] flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
<button data-source class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 font-medium transition-colors">
Click me
</button>
</div>" data-framework="tailwind" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><div class="min-h-[120px] flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
<button data-source class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 font-medium transition-colors">
Click me
</button>
</div></code></pre>
</template>
<template data-content="source"><div class="min-h-[120px] flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
<button data-source class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 font-medium transition-colors">
Click me
</button>
</div></template>
</rf-sandbox>Named data-source values create labelled tabs in the source panel.
{% sandbox %}
<style data-source="CSS">
.card {
font-family: system-ui;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 300px;
}
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) {
.card { border-color: #374151; }
.card p { color: #9ca3af; }
}
[data-theme="dark"] .card { border-color: #374151; }
[data-theme="dark"] .card p { color: #9ca3af; }
</style>
<div class="wrapper" style="padding: 24px;">
<div data-source="HTML" class="card">
<h3>Card Title</h3>
<p>Card content goes here.</p>
</div>
</div>
{% /sandbox %}<div data-rune="sandbox">
<meta content="<style data-source="CSS">
.card {
font-family: system-ui;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 300px;
}
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) {
.card { border-color: #374151; }
.card p { color: #9ca3af; }
}
[data-theme="dark"] .card { border-color: #374151; }
[data-theme="dark"] .card p { color: #9ca3af; }
</style>
<div class="wrapper" style="padding: 24px;">
<div data-source="HTML" class="card">
<h3>Card Title</h3>
<p>Card content goes here.</p>
</div>
</div>" data-field="content">
<meta content="" data-field="framework">
<meta content="" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><style data-source="CSS">
.card {
font-family: system-ui;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 300px;
}
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) {
.card { border-color: #374151; }
.card p { color: #9ca3af; }
}
[data-theme="dark"] .card { border-color: #374151; }
[data-theme="dark"] .card p { color: #9ca3af; }
</style>
<div class="wrapper" style="padding: 24px;">
<div data-source="HTML" class="card">
<h3>Card Title</h3>
<p>Card content goes here.</p>
</div>
</div></code>
</pre>
<meta data-field="source-panel" data-label="CSS">
<meta data-field="source-panel" data-label="HTML">
</div><style data-source="CSS">
.card {
font-family: system-ui;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 300px;
}
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) {
.card { border-color: #374151; }
.card p { color: #9ca3af; }
}
[data-theme="dark"] .card { border-color: #374151; }
[data-theme="dark"] .card p { color: #9ca3af; }
</style>
<div class="wrapper" style="padding: 24px;">
<div data-source="HTML" class="card">
<h3>Card Title</h3>
<p>Card content goes here.</p>
</div>
</div><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<style data-source="CSS">
.card {
font-family: system-ui;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 300px;
}
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) {
.card { border-color: #374151; }
.card p { color: #9ca3af; }
}
[data-theme="dark"] .card { border-color: #374151; }
[data-theme="dark"] .card p { color: #9ca3af; }
</style>
<div class="wrapper" style="padding: 24px;">
<div data-source="HTML" class="card">
<h3>Card Title</h3>
<p>Card content goes here.</p>
</div>
</div>" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><style data-source="CSS">
.card {
font-family: system-ui;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 300px;
}
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) {
.card { border-color: #374151; }
.card p { color: #9ca3af; }
}
[data-theme="dark"] .card { border-color: #374151; }
[data-theme="dark"] .card p { color: #9ca3af; }
</style>
<div class="wrapper" style="padding: 24px;">
<div data-source="HTML" class="card">
<h3>Card Title</h3>
<p>Card content goes here.</p>
</div>
</div></code></pre>
</template>
<template data-content="source"><style data-source="CSS">
.card {
font-family: system-ui;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 300px;
}
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) {
.card { border-color: #374151; }
.card p { color: #9ca3af; }
}
[data-theme="dark"] .card { border-color: #374151; }
[data-theme="dark"] .card p { color: #9ca3af; }
</style>
<div class="wrapper" style="padding: 24px;">
<div data-source="HTML" class="card">
<h3>Card Title</h3>
<p>Card content goes here.</p>
</div>
</div></template>
</rf-sandbox>Standalone usage
Without a preview wrapper, the sandbox renders inline with no chrome — useful for embedding a live widget in the middle of prose.
<style>
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse-dot {
width: 12px; height: 12px; border-radius: 50%;
background: #7C3AED; animation: pulse 2s infinite;
}
</style>
<div class="pulse-dot"></div>{% sandbox %}
<style>
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse-dot {
width: 12px; height: 12px; border-radius: 50%;
background: #7C3AED; animation: pulse 2s infinite;
}
</style>
<div class="pulse-dot"></div>
{% /sandbox %}
Tailwind card grid
A more complete example using Tailwind's utility classes for a responsive card layout.
{% sandbox framework="tailwind" %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Fast</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Built for speed with zero runtime overhead.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Flexible</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Works with any content structure.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Secure</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Fully isolated in a sandboxed iframe.</p>
</div>
</div>
{% /sandbox %}<div data-rune="sandbox">
<meta content="<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Fast</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Built for speed with zero runtime overhead.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Flexible</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Works with any content structure.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Secure</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Fully isolated in a sandboxed iframe.</p>
</div>
</div>" data-field="content">
<meta content="tailwind" data-field="framework">
<meta content="" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Fast</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Built for speed with zero runtime overhead.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Flexible</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Works with any content structure.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Secure</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Fully isolated in a sandboxed iframe.</p>
</div>
</div></code>
</pre>
</div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Fast</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Built for speed with zero runtime overhead.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Flexible</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Works with any content structure.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Secure</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Fully isolated in a sandboxed iframe.</p>
</div>
</div><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Fast</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Built for speed with zero runtime overhead.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Flexible</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Works with any content structure.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Secure</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Fully isolated in a sandboxed iframe.</p>
</div>
</div>" data-framework="tailwind" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Fast</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Built for speed with zero runtime overhead.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Flexible</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Works with any content structure.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Secure</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Fully isolated in a sandboxed iframe.</p>
</div>
</div></code></pre>
</template>
<template data-content="source"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Fast</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Built for speed with zero runtime overhead.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Flexible</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Works with any content structure.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Secure</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Fully isolated in a sandboxed iframe.</p>
</div>
</div></template>
</rf-sandbox>Design token context
When your site uses {% design-context %} runes to define tokens, a sandbox can receive those tokens automatically at build time. Use the context attribute to reference a named design context by its scope.
{% sandbox context="brand" %}
<div style="color: var(--color-primary); font-family: var(--font-body)">
Styled with brand tokens
</div>
{% /sandbox %}
Tokens are injected into the iframe as CSS custom properties and Google Fonts links, using the same names the design-context defines (--color-*, --font-*, --spacing-unit, --radius-*, --shadow-*). If context is omitted or no matching design context exists for the default scope, no tokens are injected.
External source files
Instead of writing HTML inline, load sandbox content from a directory of source files. The src attribute points to a named subdirectory inside your project's examples directory.
{% sandbox src="login-form" /%}
Directory structure
By default, the examples directory is ../examples relative to your content root. Each example is a subdirectory containing the files for that sandbox.
project/
├── content/
│ └── docs/
│ └── components.md
└── examples/
└── login-form/
├── index.html
├── styles.css
└── app.js
File discovery
The sandbox scans the directory and assembles content from these file types:
| Extension | Role | Behavior |
|---|---|---|
.html | HTML body | If multiple exist, index.html is preferred |
.css | Stylesheet | Multiple files concatenated alphabetically |
.js | Script | Multiple files concatenated alphabetically |
.svg | SVG asset | Injected into the HTML body |
.glsl-vert | Vertex shader | Exposed as a VERTEX_SHADER JavaScript constant |
.glsl-frag | Fragment shader | Exposed as a FRAGMENT_SHADER JavaScript constant |
Discovered content is automatically wrapped in data-source annotated elements, so source panels appear when used inside {% preview source=true %}.
Combining with frameworks
The src attribute works alongside other sandbox attributes. For example, load files from a directory and apply a CSS framework:
{% sandbox src="profile-card" framework="tailwind" /%}<div data-rune="sandbox">
<meta content="<div data-source="HTML">
<div class="min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6">
<div class="bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1">Sarah Johnson</h2>
<p class="text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">1.2k</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">842</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">94</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
</div>
</div>" data-field="content">
<meta content="tailwind" data-field="framework">
<meta content="" data-field="dependencies">
<meta content="auto" data-field="height">
<meta content="default" data-field="context">
<pre data-language="html">
<code data-language="html"><div data-source="HTML">
<div class="min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6">
<div class="bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1">Sarah Johnson</h2>
<p class="text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">1.2k</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">842</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">94</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></code>
</pre>
<meta data-field="source-panel" data-label="HTML" data-origin="profile-card/index.html">
</div><div data-source="HTML">
<div class="min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6">
<div class="bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1">Sarah Johnson</h2>
<p class="text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">1.2k</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">842</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">94</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
</div>
</div><rf-sandbox class="rf-sandbox" data-rune="sandbox" data-density="compact" data-source-content="<div data-source="HTML">
<div class="min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6">
<div class="bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1">Sarah Johnson</h2>
<p class="text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">1.2k</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">842</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">94</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
</div>
</div>" data-framework="tailwind" data-height="auto" data-design-tokens="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}" data-source-origins="HTML profile-card/index.html">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><div data-source="HTML">
<div class="min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6">
<div class="bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1">Sarah Johnson</h2>
<p class="text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">1.2k</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">842</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">94</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></code></pre>
</template>
<template data-content="source"><div data-source="HTML">
<div class="min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6">
<div class="bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1">Sarah Johnson</h2>
<p class="text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">1.2k</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">842</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]">94</div>
<div class="text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></template>
</rf-sandbox>Merging with inline content
You can combine file-sourced and inline content. Write additional HTML, CSS, or JavaScript between the tags — it merges with the file content.
{% sandbox src="login-form" %}
<style data-source="Overrides">
.form { border: 2px solid red; }
</style>
{% /sandbox %}
Error handling
If the named directory does not exist, the sandbox displays an error message in place of the preview.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
src | string | — | Name of a subdirectory in the examples directory to load files from |
framework | string | — | Framework preset to load: tailwind, bootstrap, bulma, pico |
dependencies | string | — | Comma-separated URLs of scripts/stylesheets to load |
label | string | — | Label for the sandbox (used when inside compare) |
height | number | auto | Fixed height in pixels (auto-sizes by default) |
context | string | default | Name of the design context scope to inject tokens from |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |