Use a basic card with title and body.
使用带标题和正文的基础卡片。
LEXICON · 词典
旅程之外,这里是词典。212 条组件词走六站旅程,概念词编成了八节场景小课,都搜得到、可复制。
Use a basic card with title and body.
使用带标题和正文的基础卡片。
Use elevated cards with subtle shadows and rounded corners.
使用带轻微阴影和圆角的悬浮卡片。
Use an outlined card with a 1px border and no shadow.
使用 1px 描边、无阴影的描边卡片。
Use an interactive clickable card with hover and pressed states.
使用整卡可点、有悬停和按下态的交互卡片。
Use a selectable card with a selected treatment.
使用带选中样式的可选中卡片。
Use a metric / stat card with value, label and delta.
使用展示数值、标签和涨跌的指标卡片。
Use a media card with image on top and text below.
使用上图下文的媒体卡片。
Use a horizontal card with media on the left and content on the right.
使用左媒体右内容的横向卡片。
Use a dashboard widget card with a title and metric.
使用带标题和指标的仪表盘小部件卡片。
Build a single Underlined Tabs component, not a full page. Structure: a horizontal tab list on top and one content panel below. Default three tabs labeled Overview, Billing, and Settings, each revealing its own short panel. The active tab has a 2px underline aligned to the label width; inactive tabs have muted text, no fill, no card background, and no shared track. Interaction: click a tab to switch panels; only the active panel is visible; Left/Right keys when the list is focused. States: default, hover (slightly brighter text), selected (accent underline and stronger text), disabled (non-interactive, reduced contrast). Motion: instant panel swap is fine. Do not build pill tabs, a segmented control, or a slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
做成一个下划线标签组件,不要整页。上方横排标签、下方一块内容。默认三项 Overview、Billing、Settings,点哪项只显示对应面板。当前项是贴着文字宽度的 2px 底线;未选项弱文字、无底、无卡片、无公共轨道。支持点击和左右键。状态含默认、悬停、选中、禁用。面板切换可即时。不要做成胶囊标签、分段控制或滑块。 若项目已有设计系统,颜色跟 token,结构和交互保持不变。不要整页壳,不要 emoji。
Build a single Contained Tabs component, not a full page. Structure: tab labels Overview, Billing, Settings attached to the top edge of a bordered content panel so tabs and panel share one outline. The active tab connects visually to the panel (no gap, shared border). Interaction: click a tab to change panel content. States: default, selected (connected to panel), hover, disabled. Motion: instant or 150ms. Do not use floating pills, a segmented track, or folder-style overlapping tabs. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
做成卡片标签,不要整页。Overview、Billing、Settings 贴在带描边内容面板的上沿,标签和面板共用一圈边。当前项与面板视觉相连(无缝、共边)。点击切换内容。状态含默认、选中、悬停、禁用。不要做成悬浮胶囊、分段轨道或叠放的文件夹页签。 若项目已有设计系统,颜色跟 token,结构和交互保持不变。不要整页壳,不要 emoji。
Build a single Tooltip. Structure: a short trigger labeled Name and a tiny floating label with one line of help (Display name shown on invoices). Visual: dark or inverse small chip, no buttons inside. Interaction: show on hover and keyboard focus, hide on blur/leave; delay about 200ms. States: hidden, visible. Do not put forms or actions inside, and do not use a popover or modal. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
做成工具提示。触发器文字 Name,浮层只有一行短说明(如发票上显示的名称)。小块反色,里面不能有按钮。悬停和键盘聚焦约 200ms 后出现,离开即关。不要放表单或操作,也不要做成气泡卡片或对话框。 若项目已有设计系统,颜色跟 token,结构和交互保持不变。不要整页壳,不要 emoji。
Build a single Popover that can hold actions, not just text. Structure: a trigger button Share; the floating panel contains a short title, a compact field or two actions (Copy link, Embed). Interaction: click trigger to toggle; click outside or Escape closes; focus stays in the panel while open. States: closed, open. Do not auto-open on hover only, do not dim the whole page like a modal, and do not limit content to one tooltip sentence. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
做成可放操作的气泡卡片,不要只有一句话。触发按钮 Share;浮层里有短标题、一两个操作(Copy link、Embed)。点击开关;点外部或 Escape 关闭;打开时焦点在面板内。不要只靠悬停、不要整页遮罩(那是对话框),也不要做成纯 tooltip。 若项目已有设计系统,颜色跟 token,结构和交互保持不变。不要整页壳,不要 emoji。
Build a single Hover Card that previews a person. Structure: a text trigger (Ada Lovelace); on hover a card appears with name, role, and one action (Message). Interaction: open on hover with a short delay; keep open while moving into the card; close when leaving both. States: hidden, visible. Do not require a click to open, do not use a blocking modal, and do not use a one-line tooltip. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
做成悬停预览人物的卡片。触发文字 Ada Lovelace;悬停出现姓名、角色和操作 Message。稍延迟出现,移进卡片保持打开,都离开才关。不要靠点击才打开,不要阻断式对话框,也不要做成一行 tooltip。 若项目已有设计系统,颜色跟 token,结构和交互保持不变。不要整页壳,不要 emoji。
Use a notification card with title and body.
使用带标题和正文的通知卡片。
Use a kanban board with draggable cards across columns.
使用卡片可跨列拖动的看板。
Use pagination dots for paged cards.
使用分页指示点表示多页卡片。
Use swipeable cards with left/right actions.
使用可左右滑走的滑动卡片。