Hardik
2de883c70f
Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
29 lines
2 KiB
HTML
29 lines
2 KiB
HTML
<!-- @dsCard group="Components" name="Tabs & segmented" subtitle="pill segmented control + underline tab bar" width="700" height="180" -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>PPMS · Tabs</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>tailwind.config={theme:{extend:{colors:{primary:{600:"#2563eb",700:"#1d4ed8"},neutral:{200:"#e5e5e5",500:"#737373",800:"#262626",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
|
|
<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
|
|
</head>
|
|
<body class="bg-neutral-50 p-6 text-neutral-900">
|
|
<h2 class="text-lg font-semibold">Tabs & segmented controls</h2>
|
|
<p class="mt-1 text-sm text-neutral-600">Toolbar filters use a pill segmented control; page sections use an underline tab bar.</p>
|
|
<div class="mt-4 flex flex-wrap items-center gap-6 rounded-lg border border-neutral-200 bg-white p-5">
|
|
<div class="inline-flex rounded-lg border border-neutral-200 bg-white p-0.5 text-sm">
|
|
<button class="rounded-md bg-primary-600 px-3 py-1 font-medium text-white shadow-sm">Monthly</button>
|
|
<button class="rounded-md px-3 py-1 font-medium text-neutral-500 hover:text-neutral-800">Yearly</button>
|
|
<button class="rounded-md px-3 py-1 font-medium text-neutral-500 hover:text-neutral-800">Weekly</button>
|
|
</div>
|
|
<div class="flex items-center gap-6 border-b border-neutral-200 text-sm">
|
|
<button class="-mb-px border-b-2 border-primary-600 pb-2 font-medium text-primary-700">Details</button>
|
|
<button class="-mb-px border-b-2 border-transparent pb-2 font-medium text-neutral-500 hover:text-neutral-800">Line items</button>
|
|
<button class="-mb-px border-b-2 border-transparent pb-2 font-medium text-neutral-500 hover:text-neutral-800">History</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|