37 lines
2.5 KiB
HTML
37 lines
2.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<!-- @dsCard group="Brand" name="Brand · Iconography" subtitle="Lucide · 1.5px stroke · 16 of set" viewport="700x240" -->
|
||
|
|
<html><head>
|
||
|
|
<meta charset="utf-8"><title>Iconography — Lucide @ 1.5px</title>
|
||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
||
|
|
<style>
|
||
|
|
body { padding: 22px 32px; background: var(--paper); }
|
||
|
|
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||
|
|
.grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px 12px; }
|
||
|
|
.cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border-soft); border-radius: 2px; }
|
||
|
|
.cell svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }
|
||
|
|
.cell .n { font: 500 10px var(--ff-mono); color: var(--fg-3); letter-spacing: 0.04em; }
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div class="row-label">Lucide · stroke-width 1.5 · currentColor</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="cell"><i data-lucide="inbox"></i><span class="n">inbox</span></div>
|
||
|
|
<div class="cell"><i data-lucide="lightbulb"></i><span class="n">lightbulb</span></div>
|
||
|
|
<div class="cell"><i data-lucide="flask-conical"></i><span class="n">flask</span></div>
|
||
|
|
<div class="cell"><i data-lucide="activity"></i><span class="n">signal</span></div>
|
||
|
|
<div class="cell"><i data-lucide="users"></i><span class="n">beta</span></div>
|
||
|
|
<div class="cell"><i data-lucide="git-branch"></i><span class="n">branch</span></div>
|
||
|
|
<div class="cell"><i data-lucide="check-square"></i><span class="n">decision</span></div>
|
||
|
|
<div class="cell"><i data-lucide="archive"></i><span class="n">park</span></div>
|
||
|
|
<div class="cell"><i data-lucide="arrow-right"></i><span class="n">promote</span></div>
|
||
|
|
<div class="cell"><i data-lucide="x"></i><span class="n">reject</span></div>
|
||
|
|
<div class="cell"><i data-lucide="search"></i><span class="n">search</span></div>
|
||
|
|
<div class="cell"><i data-lucide="filter"></i><span class="n">filter</span></div>
|
||
|
|
<div class="cell"><i data-lucide="file-text"></i><span class="n">doc</span></div>
|
||
|
|
<div class="cell"><i data-lucide="folder"></i><span class="n">folder</span></div>
|
||
|
|
<div class="cell"><i data-lucide="circle-help"></i><span class="n">question</span></div>
|
||
|
|
<div class="cell"><i data-lucide="circle-alert"></i><span class="n">caveat</span></div>
|
||
|
|
</div>
|
||
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||
|
|
<script>lucide.createIcons();</script>
|
||
|
|
</body></html>
|