Produto · Paper

Peças de produto.

Vivo a partir de extract-highend-ui, nos tokens do kit. Cada um com Copiar.

23 · Overlay

Overlay

Menu aberto em placa. Stagger do kit.

extract.sysmenu
  1. Overlay
  2. Form
  3. Data
  4. Toast
HTML 
<div class="ui-overlay"><header>…</header><ol><li><a href="#">Overlay</a></li></ol></div>

24 · Form

Form

Campo bezel + busca pílula. Tokens do kit.

HTML 
<div class="ui-field"><label for="nome">Nome</label><input id="nome" type="text"></div>

25 · Data

Data

Tabela do agente. Hair, não 1px cinza cru.

CampoValorEstado
HITLobrigatóriowrite
Retries3ok
Timeout12sok
HTML 
<table class="data"><thead><tr><th>Campo</th><th>Valor</th></tr></thead><tbody><tr><td>HITL</td><td>write</td></tr></tbody></table>

34 · Link + Nav

Link + Nav

Pílula compacta, links, CTA, noite, ácido.

extract.sys
extract Sistema Tokens Primário
extractNoite
extract.ui
HTML 
<nav class="ui-nav"><span class="mark">extract</span><a href="#">Sistema</a></nav>

35 · Plate / Card

Plate / Card

Bezel, métrica, quote. Casca + núcleo.

Superfície

Placa dupla.

Casca + núcleo. Sem linha cinza crua.

Bandas

5

HTML 
<article class="bezel"><div class="bezel-core"><h3>Placa dupla.</h3></div></article>

36 · Badge Banner Empty

Badge · Banner · Empty

Três estados de superfície.

kit acid noite
Kit gravado
23 tokens no canvas

Nada aqui.

Empty é uma placa. Sem ilustração inventada.

HTML 
<span class="ui-badge acid">acid</span>
<div class="ui-empty"><h3>Nada aqui.</h3></div>

37 · Textarea · Pagination · Combobox

Textarea · Pagination · Combobox

Campo longo, páginas, combo.

HTML 
<div class="ui-field"><label>Nota</label><textarea></textarea></div>
<div class="ui-pager"><button class="is-on" type="button">1</button></div>

38 · Accordion · Breadcrumb · Avatar · Skeleton · Progress

Acordeão e resto

Cinco peças no mesmo canvas.

Ler o pedido. Buscar no índice. Redigir.
HTML 
<div class="ui-acc"><button type="button" data-acc aria-expanded="true" aria-controls="acc-1">Passos</button><div id="acc-1">…</div></div>

39 · Tablist · Pills · Segmented

Tablist · Pills · Segmented

Linguagem da pílula.

Casca + núcleo.

HTML 
<div class="ui-tabs" role="tablist"><button class="ui-tab is-on" type="button">Bezel</button></div>

40 · Tooltip · Toast

Tooltip · Toast

Bezels estáticos. Sem alerta barato.

Hairline no anel. Nunca 1px cinza.
Kit gravado
23 tokens no canvas
HTML 
<div class="ui-toast"><strong>Kit gravado</strong><button type="button">Ok</button></div>