Files
HiveGrid-Wireframes/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html
T

1141 lines
34 KiB
HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>D-D0b Full Page Preview</title>
<style>
:root {
--bg: #f6f8fa;
--surface: #ffffff;
--surface-subtle: #f1f4f7;
--border: #dce3ea;
--border-strong: #b8c4cf;
--text: #172635;
--muted: #5c6f82;
--muted-2: #74879a;
--primary: #2458d3;
--danger: #b42318;
--success: #147a46;
--warning: #9a5b00;
--radius: 8px;
--control-h: 40px;
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.5;
}
button,
input,
select,
textarea {
font: inherit;
}
h1,
h2,
h3,
p {
margin: 0;
}
.preview-page {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 16px;
--preview-section-gap: 24px;
--preview-editor-pad: 16px;
--preview-shell-sidebar: 232px;
min-height: 100vh;
background: #fff;
}
.preview-page:has(#density-compact:checked) {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 12px;
--preview-section-gap: 24px;
--preview-editor-pad: 16px;
}
.preview-page:has(#density-standard:checked) {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 16px;
--preview-section-gap: 24px;
--preview-editor-pad: 16px;
}
.preview-page:has(#density-editor:checked) {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 16px;
--preview-section-gap: 24px;
--preview-editor-pad: 32px;
}
.preview-page:has(#rule-hints:not(:checked)) .rule-badge,
.preview-page:has(#rule-hints:not(:checked)) .rule-callout {
display: none;
}
.preview-config {
position: sticky;
top: 0;
z-index: 20;
display: grid;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
}
.preview-config-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.preview-config-copy {
max-width: 760px;
}
.eyebrow {
margin: 0 0 8px;
color: var(--muted-2);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.preview-config h1 {
font-size: 24px;
line-height: 1.25;
}
.section-desc {
margin-top: 6px;
color: var(--muted);
}
.preview-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.control-group {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.control-group legend {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
white-space: nowrap;
}
.segmented-option {
position: relative;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 10px;
border-radius: 6px;
color: var(--muted);
font-size: 13px;
font-weight: 650;
cursor: default;
}
.segmented-option input {
position: absolute;
inset: 0;
opacity: 0;
}
.segmented-option:has(input:checked) {
background: var(--text);
color: #fff;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--control-h);
padding: 0 16px;
border: 1px solid transparent;
border-radius: 6px;
background: var(--primary);
color: #fff;
font-weight: 650;
text-decoration: none;
cursor: default;
}
.button.secondary {
border-color: var(--border-strong);
background: #fff;
color: var(--text);
}
.button.sm {
min-height: 32px;
padding: 0 12px;
font-size: 13px;
}
.preview-values {
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-subtle);
}
.preview-values-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.small {
color: var(--muted);
font-size: 12px;
}
.value-set {
display: none;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.preview-page:has(#shell-on:checked) .values-shell-on,
.preview-page:has(#shell-off:checked) .values-shell-off,
.preview-page:has(#density-standard:checked) .values-density-standard,
.preview-page:has(#density-compact:checked) .values-density-compact,
.preview-page:has(#density-editor:checked) .values-density-editor {
display: grid;
}
.value-cell {
display: grid;
gap: 2px;
min-height: 56px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.value-cell span {
color: var(--muted);
font-size: 12px;
}
.value-cell strong {
font-size: 13px;
}
.preview-values > summary.preview-values-head {
cursor: pointer;
list-style: none;
}
.preview-values > summary.preview-values-head::-webkit-details-marker {
display: none;
}
.preview-values > summary.preview-values-head::after {
content: "Auf/zu";
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.preview-values:not([open]) {
gap: 0;
}
.preview-values:not([open]) .value-set {
display: none !important;
}
.rule-scope {
position: relative;
}
.rule-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
width: max-content;
min-height: 24px;
padding: 0 8px;
border: 1px solid #b8c7ff;
border-radius: 999px;
background: #eef3ff;
color: #2443a8;
font-size: 12px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.rule-badge::before {
content: "->";
font-size: 10px;
}
.rule-badge::after {
content: attr(data-tooltip);
position: absolute;
right: 0;
bottom: calc(100% + 8px);
z-index: 40;
display: none;
width: min(300px, 72vw);
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
box-shadow: 0 12px 32px -8px rgb(15 23 42 / 0.22);
color: var(--text);
font-size: 12px;
font-weight: 500;
line-height: 1.45;
white-space: normal;
}
.rule-badge:hover::after,
.rule-badge:focus-visible::after {
display: block;
}
.rule-anchor {
position: absolute;
top: 10px;
right: 10px;
z-index: 8;
}
.preview-page-content > .rule-anchor {
top: var(--preview-page-pad);
right: var(--preview-page-pad);
}
.rule-callout {
display: grid;
gap: 8px;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid #c7d2fe;
border-radius: 8px;
background: #f7f9ff;
color: #294268;
font-size: 12px;
line-height: 1.5;
}
.standards-drawer {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 30;
width: min(420px, calc(100vw - 40px));
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
box-shadow: 0 16px 40px -14px rgb(15 23 42 / 0.3);
overflow: hidden;
}
.standards-drawer summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 48px;
padding: 0 16px;
cursor: pointer;
font-weight: 800;
list-style: none;
}
.standards-drawer summary::-webkit-details-marker {
display: none;
}
.standards-drawer summary::after {
content: "Auf/zu";
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.standards-drawer-body {
display: grid;
gap: 12px;
max-height: min(520px, calc(100vh - 120px));
padding: 0 16px 16px;
overflow: auto;
}
.standards-drawer-note {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.standards-rule-list {
display: grid;
gap: 8px;
}
.standards-rule {
display: grid;
gap: 3px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-subtle);
color: var(--text);
text-decoration: none;
}
.standards-rule strong {
font-size: 12px;
}
.standards-rule span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.app-preview {
display: grid;
grid-template-columns: var(--preview-shell-sidebar) minmax(0, 1fr);
min-height: calc(100vh - 260px);
background: #fff;
}
.preview-page:has(#shell-off:checked) .app-preview {
grid-template-columns: minmax(0, 1fr);
}
.preview-page:has(#shell-off:checked) .preview-sidebar,
.preview-page:has(#shell-off:checked) .preview-app-topbar {
display: none;
}
.preview-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
border-right: 1px solid var(--border);
background: #f8fafc;
}
.workspace-switcher {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
}
.workspace-mark {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 8px;
background: var(--text);
color: #fff;
font-size: 12px;
font-weight: 800;
}
.workspace-copy {
display: grid;
min-width: 0;
}
.workspace-copy strong,
.workspace-copy span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-copy span {
color: var(--muted);
font-size: 12px;
}
.preview-nav {
display: grid;
gap: 4px;
}
.preview-nav a {
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 0 10px;
border-radius: 6px;
color: var(--muted);
text-decoration: none;
}
.preview-nav a.active {
background: #fff;
color: var(--text);
box-shadow: 0 0 0 1px var(--border);
}
.nav-icon {
width: 16px;
height: 16px;
border: 1px solid currentColor;
border-radius: 4px;
opacity: 0.68;
}
.preview-app-main {
min-width: 0;
background: var(--bg);
}
.preview-app-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 0 16px;
border-bottom: 1px solid var(--border);
background: #fff;
}
.preview-search {
width: min(420px, 100%);
min-height: var(--control-h);
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: #fff;
color: var(--text);
}
.preview-user-area {
display: flex;
align-items: center;
gap: 8px;
}
.avatar-dot {
width: 32px;
height: 32px;
border-radius: 999px;
background: linear-gradient(135deg, #dbe4ff, #bdd8ff);
border: 1px solid var(--border);
}
.preview-page-content {
display: grid;
gap: var(--preview-gap);
padding: var(--preview-page-pad);
}
.preview-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.preview-page-head h2 {
font-size: 24px;
line-height: 1.25;
}
.preview-page-actions,
.toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.preview-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--preview-gap);
}
.preview-card {
padding: var(--preview-card-pad);
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.preview-card h3 {
font-size: 15px;
}
.preview-editor-card {
padding: var(--preview-editor-pad);
}
.preview-meta {
color: var(--muted);
font-size: 12px;
}
.stat-value {
margin-top: 8px;
font-size: 24px;
font-weight: 750;
line-height: 1.2;
}
.preview-workspace-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
gap: var(--preview-gap);
}
.preview-list {
display: grid;
gap: 12px;
margin-top: 12px;
}
.preview-list-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 48px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.preview-list-row strong {
display: block;
}
.pill {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
background: #e8f6ee;
color: var(--success);
font-size: 12px;
font-weight: 700;
}
.pill.warning {
background: #fff2d6;
color: var(--warning);
}
.preview-table {
overflow: hidden;
margin-top: 12px;
border: 1px solid var(--border);
border-radius: 8px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
height: 52px;
padding: 0 16px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: middle;
}
th {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
tr:last-child td {
border-bottom: 0;
}
.preview-editor-body {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: var(--preview-gap);
margin-top: 12px;
}
.preview-editor-side {
display: grid;
gap: 6px;
align-content: start;
}
.preview-editor-side span {
padding: 8px 10px;
border-radius: 6px;
color: var(--muted);
}
.preview-editor-side span.active {
background: var(--surface-subtle);
color: var(--text);
font-weight: 650;
}
.form {
display: grid;
gap: 20px;
}
.field {
display: grid;
gap: 8px;
}
label {
color: var(--text);
font-size: 13px;
font-weight: 650;
}
input,
textarea {
width: 100%;
min-height: var(--control-h);
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: #fff;
color: var(--text);
}
textarea {
min-height: 88px;
padding-top: 10px;
resize: vertical;
}
@media (max-width: 980px) {
.preview-config-head,
.value-set,
.preview-stat-grid,
.preview-workspace-grid,
.preview-editor-body {
grid-template-columns: 1fr;
}
.preview-config-head {
display: grid;
}
.standards-drawer {
right: 12px;
bottom: 12px;
width: calc(100vw - 24px);
}
}
</style>
</head>
<body class="preview-page">
<section class="preview-config">
<div class="preview-config-head">
<div class="preview-config-copy">
<p class="eyebrow">Full-page preview</p>
<h1>D-D0b Preview Page</h1>
<p class="section-desc">
Eigene Full-Page-Vorschau fuer App-Shell-Breite, Page Padding,
Card Padding und Grid-Gaps. Diese Seite ist bewusst von der
D-Entscheidungsseite getrennt.
</p>
</div>
<a class="button sm secondary" href="index.html#d02">Zurueck zu D02</a>
</div>
<div class="preview-controls">
<fieldset class="control-group">
<legend>App Shell</legend>
<label class="segmented-option">
<input id="shell-on" type="radio" name="shell" checked />
Mit App Shell
</label>
<label class="segmented-option">
<input id="shell-off" type="radio" name="shell" />
Ohne App Shell
</label>
</fieldset>
<fieldset class="control-group">
<legend>Layout-Dichte</legend>
<label class="segmented-option">
<input id="density-standard" type="radio" name="density" checked />
Admin Standard
</label>
<label class="segmented-option">
<input id="density-compact" type="radio" name="density" />
Kompakt
</label>
<label class="segmented-option">
<input id="density-editor" type="radio" name="density" />
Dialog 32px
</label>
</fieldset>
<fieldset class="control-group">
<legend>Hilfen</legend>
<label class="segmented-option">
<input id="rule-hints" type="checkbox" checked />
Rule Hints
</label>
</fieldset>
</div>
<details class="preview-values">
<summary class="preview-values-head">
<strong>Aktive Layout-Daten</strong>
<span class="small">Diese Werte aendern sich durch die Umschalter.</span>
</summary>
<div class="value-set values-shell-on">
<div class="value-cell"><span>Shell</span><strong>An</strong></div>
<div class="value-cell"><span>Sidebar</span><strong>232px</strong></div>
<div class="value-cell"><span>Topbar</span><strong>56px sichtbar</strong></div>
<div class="value-cell"><span>Content-Breite</span><strong>Viewport minus 232px</strong></div>
<div class="value-cell"><span>Bewertung</span><strong>Produktansicht</strong></div>
</div>
<div class="value-set values-shell-off">
<div class="value-cell"><span>Shell</span><strong>Aus</strong></div>
<div class="value-cell"><span>Sidebar</span><strong>0px</strong></div>
<div class="value-cell"><span>Topbar</span><strong>ausgeblendet</strong></div>
<div class="value-cell"><span>Content-Breite</span><strong>volle Preview-Breite</strong></div>
<div class="value-cell"><span>Bewertung</span><strong>Canvas/Modal-Kontext</strong></div>
</div>
<div class="value-set values-density-standard">
<div class="value-cell"><span>Modus</span><strong>Admin Standard</strong></div>
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
</div>
<div class="value-set values-density-compact">
<div class="value-cell"><span>Modus</span><strong>Kompakt</strong></div>
<div class="value-cell"><span>Page Padding</span><strong>24px min</strong></div>
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
<div class="value-cell"><span>Grid/Card Gap</span><strong>12px</strong></div>
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
</div>
<div class="value-set values-density-editor">
<div class="value-cell"><span>Modus</span><strong>Dialog 32px</strong></div>
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
<div class="value-cell"><span>Dialog Padding</span><strong>32px Variante</strong></div>
</div>
</details>
</section>
<details class="standards-drawer">
<summary>Layout-Standards</summary>
<div class="standards-drawer-body">
<p class="standards-drawer-note">
Klick springt zur Regel auf der D-D0b-Entscheidungsseite. Die Badges
in der Preview zeigen, wo die Regel im Beispiel angewendet wird.
</p>
<div class="standards-rule-list">
<a class="standards-rule" href="index.html#d01">
<strong>D01 Grundraster</strong>
<span>Erlaubte Werte: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.</span>
</a>
<a class="standards-rule" href="index.html#d02">
<strong>D02 Page/Card/Grid</strong>
<span>Page 24px, Card/Surface 16px, Grid Gap 16px, kompakt lokal 12px.</span>
</a>
<a class="standards-rule" href="index.html#d03">
<strong>D03 Text-Rhythmus</strong>
<span>0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen.</span>
</a>
<a class="standards-rule" href="index.html#d04">
<strong>D04 Button Ownership</strong>
<span>Button Default/Medium/36px; Button-Padding kommt aus der Komponente.</span>
</a>
<a class="standards-rule" href="index.html#d05">
<strong>D05 Forms</strong>
<span>Komplette Field-Komponenten stehen standardmaessig 16px auseinander.</span>
</a>
<a class="standards-rule" href="index.html#d06">
<strong>D06 Table Ownership</strong>
<span>Tabellen-Dichte kommt aus der Table-Komponente; Carbon nur als Referenz.</span>
</a>
<a class="standards-rule" href="index.html#d07">
<strong>D07 Dialog Sizes</strong>
<span>XS 420, S 560, M 720, L 1200; Fullscreen max 2512px.</span>
</a>
<a class="standards-rule" href="index.html#d08">
<strong>D08 Dialog Internal Gaps</strong>
<span>Title 8px, Field 16px, Section 24px, Footer Button 8px.</span>
</a>
<a class="standards-rule" href="index.html#d09">
<strong>D09 States</strong>
<span>Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale.</span>
</a>
</div>
</div>
</details>
<div class="app-preview">
<aside class="preview-sidebar rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="Die App-Shell bleibt als Kontext sichtbar; die eigentlichen Page-Abstaende starten rechts im Content-Bereich.">Shell Kontext</a>
<div class="workspace-switcher">
<div class="workspace-mark">HG</div>
<div class="workspace-copy">
<strong>HiveGrid Demo</strong>
<span>Workspace</span>
</div>
</div>
<nav class="preview-nav" aria-label="Preview navigation">
<a href="#" class="active"><span class="nav-icon"></span>Overview</a>
<a href="#"><span class="nav-icon"></span>Customers</a>
<a href="#"><span class="nav-icon"></span>Projects</a>
<a href="#"><span class="nav-icon"></span>Tasks</a>
<a href="#"><span class="nav-icon"></span>Reports</a>
<a href="#"><span class="nav-icon"></span>Settings</a>
</nav>
</aside>
<div class="preview-app-main">
<header class="preview-app-topbar">
<input class="preview-search" value="Search anything" aria-label="Search anything" />
<div class="preview-user-area">
<span class="button sm secondary">New</span>
<span class="button sm secondary">Export</span>
<div class="avatar-dot" aria-hidden="true"></div>
</div>
</header>
<main class="preview-page-content rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Der Content nutzt mindestens 24px Page Padding. Der Wert bleibt auch in kompakten Settings gleich.">D02 Page Padding</a>
<div class="preview-page-head rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d03" data-tooltip="D03: Page Title und Beschreibung stehen ohne extra Gap zusammen; der Abstand zum ersten Content bleibt stabil.">D03 Text-Rhythmus</a>
<div>
<p class="eyebrow">Workspace overview</p>
<h2>Operations dashboard</h2>
<p class="section-desc">
Beispielseite fuer App-Shell-Breite, Page Padding,
Card-Padding und Grid-Gaps im laufenden Produktkontext.
</p>
</div>
<div class="preview-page-actions">
<a class="rule-badge" href="index.html#d04" data-tooltip="D04: Button-Hoehe und Innenpadding kommen aus der Button-Komponente. Standardaktionen nutzen Default/Medium.">D04 Buttons</a>
<span class="button secondary">Filter</span>
<span class="button">Create task</span>
</div>
</div>
<div class="preview-stat-grid rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Grid/Card Gap ist standardmaessig 16px und kann nur in kompakten Teilbereichen auf 12px reduziert werden.">D02 Grid Gap</a>
<div class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Card/Surface Padding bleibt 16px; es wird nicht pro Screen neu erfunden.">D02 Card Padding</a>
<p class="small">Open leads</p>
<div class="stat-value">128</div>
<p class="preview-meta">+12 this week</p>
</div>
<div class="preview-card">
<p class="small">Active projects</p>
<div class="stat-value">42</div>
<p class="preview-meta">8 need review</p>
</div>
<div class="preview-card">
<p class="small">Team workload</p>
<div class="stat-value">76%</div>
<p class="preview-meta">Balanced</p>
</div>
<div class="preview-card">
<p class="small">Pending approvals</p>
<div class="stat-value">9</div>
<p class="preview-meta">3 overdue</p>
</div>
</div>
<div class="preview-workspace-grid">
<section class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Auch groessere Inhaltskarten nutzen 16px Innenpadding und den globalen Grid Gap.">D02 Card</a>
<h3>Recent work</h3>
<p class="preview-meta">Tasks, customers and approvals in one dense page area.</p>
<div class="preview-list">
<div class="preview-list-row">
<div>
<strong>Review onboarding workspace</strong>
<span class="preview-meta">Assigned to Admin Team</span>
</div>
<span class="pill warning">Due today</span>
</div>
<div class="preview-list-row">
<div>
<strong>Prepare customer import</strong>
<span class="preview-meta">CRM setup</span>
</div>
<span class="pill">Active</span>
</div>
<div class="preview-list-row">
<div>
<strong>Approve role changes</strong>
<span class="preview-meta">Security settings</span>
</div>
<span class="pill warning">Review</span>
</div>
</div>
</section>
<aside class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d09" data-tooltip="D09: Empty/Error/No-Permission waeren inline States in genau diesem Inhaltsbereich, nicht automatisch ein Modal.">D09 States</a>
<h3>Workspace health</h3>
<p class="preview-meta">
Kompakte Settings- und Statusflaeche mit denselben
D02-Basiswerten wie die Standardseite.
</p>
<div class="preview-list">
<div class="preview-list-row"><span>Members</span><strong>24</strong></div>
<div class="preview-list-row"><span>2FA coverage</span><strong>91%</strong></div>
<div class="preview-list-row"><span>Open invites</span><strong>3</strong></div>
</div>
</aside>
</div>
<section class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d06" data-tooltip="D06: Tabellen-Dichte, Row Height und Zellpadding kommen aus der Table-Komponente.">D06 Table</a>
<div class="preview-page-head">
<div>
<h3>Employee access</h3>
<p class="preview-meta">Table area for judging page width inside and outside the shell.</p>
</div>
<div class="toolbar">
<input style="width: 220px" value="Search employees" />
<span class="button sm secondary">Role</span>
</div>
</div>
<div class="preview-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Department</th>
<th>Status</th>
<th style="text-align: right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Bertram</td>
<td>Admin</td>
<td>Operations</td>
<td><span class="pill">Active</span></td>
<td style="text-align: right">...</td>
</tr>
<tr>
<td>Anna Keller</td>
<td>Finance Lead</td>
<td>Finance</td>
<td><span class="pill">Active</span></td>
<td style="text-align: right">...</td>
</tr>
<tr>
<td>Max Hoffmann</td>
<td>Employee</td>
<td>Support</td>
<td><span class="pill warning">Pending</span></td>
<td style="text-align: right">...</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="preview-card preview-editor-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d07" data-tooltip="D07/D08: Diese Flaeche simuliert die groessere Dialog-Variante. 32px kommt aus der Dialog-Komponente, nicht aus frei gesetztem Screen-Padding.">D07/D08 Dialog</a>
<h3>Dialog 32px Variante</h3>
<p class="preview-meta">
Dieser Modus macht nur diese grosse Arbeitsflaeche innen
groesser. Das steht fuer die groessere Subframe-Dialog-Variante,
nicht fuer frei gesetztes Padding auf normalen Surfaces.
</p>
<div class="preview-editor-body">
<div class="preview-editor-side">
<span class="active">Role</span>
<span>Contacts</span>
<span>Projects</span>
<span>Reports</span>
</div>
<div class="form rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d05" data-tooltip="D05: Komplette Field-Komponenten stehen 16px auseinander; Label/Help/Error gehoeren in die Komponente.">D05 Field Gap</a>
<div class="field">
<label>Role name</label>
<input value="Operations Lead" />
</div>
<div class="field">
<label>Description</label>
<textarea>Can review operations, assign team tasks and manage project handoffs.</textarea>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
</body>
</html>