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
75 lines
2.8 KiB
HTML
75 lines
2.8 KiB
HTML
<!-- @dsCard group="Components" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Settings list</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">Product</div>
|
|
<div class="subtitle">What people see at checkout</div>
|
|
</div>
|
|
|
|
<div class="settings-list">
|
|
<div class="settings-row">
|
|
<div class="label">Name<span class="tag">Required</span><span class="subtitle">Shown on receipts</span></div>
|
|
<div class="field-slot"><label class="field"><input value="Pro plan" aria-label="Name"></label></div>
|
|
</div>
|
|
|
|
<div class="settings-row">
|
|
<div class="label">Billing<span class="subtitle">How often it charges</span></div>
|
|
<div class="field-slot">
|
|
<div class="select ghost" 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>
|
|
|
|
<div class="settings-row">
|
|
<div class="label">Checkout link</div>
|
|
<div class="field-slot">
|
|
<button class="btn ghost"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>Copy link</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-row">
|
|
<div class="label">Price<span class="tag">Required</span></div>
|
|
<div class="field-slot"><label class="field error"><input value="0.00" aria-label="Price"><span class="unit">GBP</span></label></div>
|
|
<div class="error">A paid product needs a price above zero</div>
|
|
<div class="description">Buyers see this converted to their own currency at checkout.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Use it for</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Forms on the page ground: products, coupons, clients.</li>
|
|
<li>Selects, buttons and icon buttons are ghost. Text fields are outline, read-only ones too.</li>
|
|
<li>"Required" goes in the row's action slot, beside the label.</li>
|
|
<li>Why a value was refused goes in the row's error slot, under the row.</li>
|
|
</ul>
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Dont</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Use secondary fields here. With no card behind them, filled controls float.</li>
|
|
<li>Stretch a select or a button to a column. They keep their own width - only a text field fills its slot.</li>
|
|
<li>Write a sentence in the subtitle. That goes in the description.</li>
|
|
</ul>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|