ImBenjiandClaude Opus 5.5
b5e5ed5b75
Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the components are CSS on top of them, and the cards cover foundations, components and whole hub and Arcs & Angles screens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7
95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
<!-- @dsCard group="Components" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Properties section</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
.ds { padding: 0 var(--container-padding) var(--container-padding); }
|
|
.ds-rules { margin: 0; padding: 0 var(--gap-xs) 0 var(--gap-xl); display: flex; flex-direction: column; gap: var(--gap-xxs); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="ds">
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Properties section</div>
|
|
<div class="subtitle">A boxed card of label and value rows.</div>
|
|
</div>
|
|
|
|
<div class="properties-section">
|
|
<div class="header" role="button" aria-expanded="true">
|
|
<svg class="icon chevron" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></svg>
|
|
<span>Subscription</span>
|
|
<span class="trailing muted">Active</span>
|
|
</div>
|
|
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Plan</div>
|
|
<div class="value"><label class="field secondary readonly"><input value="Pro, monthly" readonly disabled aria-label="Plan"></label></div>
|
|
</div>
|
|
|
|
<div class="property-row">
|
|
<div class="label">Seats<span class="subtitle">People who can sign in</span></div>
|
|
<div class="value"><label class="field secondary error"><input value="0" aria-label="Seats"></label></div>
|
|
<div class="error">Needs at least one seat</div>
|
|
</div>
|
|
|
|
<div class="property-row">
|
|
<div class="label">Billing</div>
|
|
<div class="value">
|
|
<div class="select secondary" role="button">
|
|
<span>Monthly</span>
|
|
<svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg>
|
|
</div>
|
|
</div>
|
|
<div class="description">Switching takes effect from the next invoice, not this one.</div>
|
|
</div>
|
|
|
|
<div class="property-row">
|
|
<div class="label">Invoices</div>
|
|
<div class="value"><button class="btn secondary">Open billing portal</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button class="btn ghost">Reset</button>
|
|
<button class="btn ghost-destructive">Cancel plan</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">The value slot is never bare text</div>
|
|
<div class="subtitle">A read-only value is a secondary field, read only and disabled.</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Beside real fields, bare text reads as a caption and the column goes ragged.</li>
|
|
<li>A button in the value slot sits left and keeps its own width. It doesnt stretch.</li>
|
|
<li>A refused value says why in the row's error, under it. Copy about the setting goes in the description box.</li>
|
|
</ul>
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Use it for</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Inspectors, account and security pages, and lists of records, one section per record.</li>
|
|
<li>A status or count in the header's trailing slot. It stays visible when collapsed.</li>
|
|
<li>What the section can do, in the actions band under the rows.</li>
|
|
</ul>
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Dont</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Use outline fields or ghost selects in here. Controls in a section are secondary.</li>
|
|
<li>Put live data in the subtitle. No counts, dates, names or statuses.</li>
|
|
<li>Add gaps between sections. Each one carries its own margin.</li>
|
|
</ul>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|