Neutral Tags

.tag (or .wm-tag) renders a muted pill with a subtle border. Use for keyword labels, technology names, skill indicators, and read-only metadata.

<span class="tag">TypeScript</span>
<span class="tag">React</span>
<span class="tag">Node.js</span>

Accent Tags

.tag-accent (or .wm-tag-accent) uses the theme's accent color for a higher-visibility pill. Use for linked project references, active filters, and selected states where you need the tag to stand out.

<span class="tag-accent">Deal Monitoring UI</span>
<span class="tag-accent">Reporting Pipeline</span>

Mixed Usage

Neutral and accent tags can coexist in the same row. The accent variant draws the eye to the most important label; neutral tags recede to supporting context.

<!-- Lead role as accent; skills as neutral -->
<span class="tag-accent">Lead Engineer</span>
<span class="tag">TypeScript</span>
<span class="tag">React</span>
<span class="tag">Redux</span>

Tags in a Card

Typical usage inside a card — role title and associated skill tags.

<div class="wm-card card" style="padding: 1rem;">
  <p style="font-weight: 600; margin: 0 0 0.25rem;">Senior Software Engineer</p>
  <p style="margin: 0 0 0.75rem;">Acme Corp · 2022 – Present</p>
  <div style="display: flex; flex-wrap: wrap; gap: 0.35rem;">
    <span class="tag-accent">Deal Monitoring</span>
    <span class="tag">TypeScript</span>
    <span class="tag">React</span>
    <span class="tag">Azure</span>
  </div>
</div>

Bullet List

.wm-list provides a styled <ul> with consistent spacing, custom bullet markers, and body text color. Use for achievement lists, feature highlights, and structured content within cards.

• Reduced average page load time by 40% through code-splitting and lazy loading.
• Designed and shipped a reusable data table component used across 8 product surfaces.
• Mentored two engineers through onboarding, cutting ramp time by 3 weeks.

<ul class="wm-list">
  <li>Achievement or bullet point one.</li>
  <li>Achievement or bullet point two.</li>
  <li>Achievement or bullet point three.</li>
</ul>

Separator

.wm-separator is a styled <hr> that uses --wm-color-border. Use to divide semantically distinct content regions within a panel or card.

<p>Content above.</p>
<hr class="wm-separator" />
<p>Content below.</p>