Data

Variants

All seven variants share the same base dimensions. Mix freely within a layout — the distinct fills create their own visual hierarchy.

Usage guidance

Choose variants by semantic meaning, not by colour preference.

One badge per item. Stacking multiple badges signals ambiguity in the data model — resolve it at the data level.

Never make badges interactive. For clickable filters or dismissible tags, use a different component. A badge communicates state; it does not change it.

Anatomy

Apply the base .badge class first, then exactly one variant modifier.

<span class="badge badge-published">Published</span>
<span class="badge badge-beta">Beta</span>

CSS reference

Shipped in dist/farn-components.css. Load alongside farn.css or farn-tokens.css.

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.badge-general   { background: var(--bm0-sand);    color: var(--in0-void); }
.badge-published { background: var(--bl3-moss);    color: var(--color-accent-text); }
.badge-draft     { background: var(--bl1-ochre);   color: var(--color-accent-text); }
.badge-archived  { background: var(--bl0-ember);   color: var(--color-accent-text); }
.badge-beta      { background: var(--bl4-heather); color: var(--color-accent-text); }
.badge-research  { background: var(--bl2-grain);   color: var(--color-accent-text); }
.badge-category  { background: var(--fo2-forest);  color: var(--color-accent-text); }

Rounded corners

overflow: hidden on a border-collapse: collapse table is cross-browser unreliable. To get rounded corners, wrap the table in a container:

<div style="border-radius: var(--table-radius); overflow: hidden">
  <table class="table">...</table>
</div>

Scroll wrapper (narrow viewports)

Wrap with an overflow-x: auto container to allow horizontal scrolling on narrow viewports without breaking the layout.

<div style="overflow-x: auto">
  <table class="table">...</table>
</div>

Both wrappers can be combined on a single div.

Anatomy

<!-- Base -->
<table class="table">
  <thead>
    <tr><th>Name</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Ada Lovelace</td><td>Engineer</td></tr>
  </tbody>
</table>

<!-- Striped + hover -->
<table class="table table-striped table-hover">...</table>

<!-- Compact -->
<table class="table table-sm">...</table>

<!-- Comfortable -->
<table class="table table-lg">...</table>

Token reference

CSS reference

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
}

.table th,
.table td {
  padding: var(--table-cell-padding);
  text-align: left;
  border-bottom: 1px solid var(--table-border);
}

.table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--table-border);
}

.table tbody tr:last-child td { border-bottom: none; }

.table-striped tbody tr:nth-child(even) td {
  background: var(--table-row-stripe-bg);
}

.table-hover tbody tr:hover td {
  background: var(--table-row-hover-bg);
  transition: background var(--duration-fast) var(--ease-out);
}

.table-sm th, .table-sm td { padding: var(--table-cell-padding-sm); }
.table-lg th, .table-lg td { padding: var(--table-cell-padding-lg); }

Anatomy

<!-- Block code -->
<pre class="code-block"><code>your code here</code></pre>

<!-- Inline code -->
<p>Set <code class="inline-code">color: var(--color-text)</code> for contrast.</p>

Copy button

The .code-copy-btn class styles an icon button absolutely positioned top-right inside a .code-block. The reference implementation injects it automatically via JS:

import { initCodeCopy } from './code-copy.js';
initCodeCopy(); // appends .code-copy-btn to every <pre> that contains <code>

The button is only added when JS runs — no-script users never see an inert element.

Token reference

To use a consistently dark code block regardless of page theme, override--code-bg and --code-text locally:

.my-editor {
  --code-bg:   var(--color-bg-code);  /* always dark */
  --code-text: var(--bm2-birch);      /* always light */
}

CSS reference

Shipped in dist/farn-components.css. Load alongside farn.css or farn-tokens.css.

.code-block {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--code-radius);
  padding: var(--space-md);
  overflow-x: auto;
  line-height: 1.6;
}

.inline-code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}