# Draw the credit

*nods · The package*

The credit is one line of HTML and a stylesheet. It runs no script and makes no request.

```js
import { creditHTML } from '@nodsto/credit';
import '@nodsto/credit/credit.css';

const html = creditHTML(record, {
  leading: ['© 2026 Kiln', { text: 'Privacy', href: '/privacy' }],
  join: { two: ' with ' },
  page: { text: 'Credits', href: 'https://kiln.example/credits' },
});
```

## Call creditHTML with a record.

It returns one element as a string. Import the stylesheet once and put the string in your footer.

footer.js

```
import { creditHTML } from '@nodsto/credit';
import '@nodsto/credit/credit.css';

const html = creditHTML(record);
```

html

```
<span class="nods" aria-describedby="nods-summary">
  <span class="nods-label">Designed and built by </span>
  <a
      class="nods-name"
      href="https://marigold.example"
      rel="author nofollow noopener"
      target="_blank">Marigold</a>
  <span class="nods-sep"> and </span>
  <a
      class="nods-name"
      href="https://pocketmonday.example"
      rel="author nofollow noopener"
      target="_blank">Pocket Monday</a>
  <span
      class="nods-sr"
      id="nods-summary">Kiln, 2026. Design: Marigold. Build: Pocket Monday. Made with Five colours.</span>
</span>
```

## Paste one block where there is no build.

`snippet` returns the stylesheet and the markup as one string, for Webflow, Squarespace, WordPress or a plain template. For this record the block is 1048 bytes gzipped.

build.js

```
import { snippet } from '@nodsto/credit';

const block = snippet(record);
```

## Set tokens to restyle the line.

The credit inherits the font and the colour of the footer it sits in. Every other value is a custom property with a default, so a rule of yours sets a token and never has to out-specify the stylesheet.

site.css

```
footer .nods {
  --nods-size: 0.75em;
  --nods-ink: #1a4bff;
  --nods-rule: 2px;
}
```

| Token | Default | What it sets |
|---|---|---|
| `--nods-size` | `.8125em` | The size of the credit against the footer around it. |
| `--nods-tracking` | `.01em` | Letter-spacing. |
| `--nods-muted` | `color-mix(in oklab, currentColor 72%, transparent)` | The colour of the words and separators around the names. |
| `--nods-fade` | `.18s` | How long the words around a name take to change colour. |
| `--nods-ease` | `cubic-bezier(.16, 1, .3, 1)` | The easing of both. |
| `--nods-focus-width` | `2px` | The width of the focus ring. |
| `--nods-focus-offset` | `3px` | The gap between a name and its focus ring. |
| `--nods-ink` | `inherit` | The colour of a credited name. |
| `--nods-rule` | `1px` | The weight of the line under a name. |
| `--nods-draw` | `.24s` | How long that line takes to draw under a pointer. |
| `--nods-more-gap` | `.5em` | The space before the control that opens the card. |
| `--nods-more-size` | `.92em` | The size of that control. |

## Style a part by its class.

.nods The credit.

.nods-lead Your own line before the credit, such as a copyright.

.nods-label The words of the statement around the names.

.nods-name A credited name. It is a link.

.nods-sep A separator or a joining word.

.nods-page The control after the names, which links to the record or opens the card.

.nods-sr The summary a screen reader is given. It is not drawn.

## Pass options for the words around the names.

A footer’s legal line is usually one sentence. The credit can carry the rest of it, and the settings at the head of this page pass three of these.

| Option | Default | What it sets |
|---|---|---|
| `rel` | `'author nofollow noopener'` | The rel on every credited link. |
| `target` | `'_blank'` | Where a credited link opens. |
| `tone` | `'auto'` | Forces light or dark ink where the footer sits over a picture. |
| `className` | `Unset` | A class added to the credit, which is how a line style is chosen. |
| `leading` | `[]` | Your own line before the credit. Each item is text, or text and a link. |
| `separator` | `' · '` | What stands between your line and the statement. |
| `join` | `{ two: ' and ', series: ', ', last: ' and ', more: ' and 2 others' }` | The words between names, as two, series and last. |
| `linkTo` | `'creator'` | Whether a name links to its creator or to the record. |
| `page` | `Unset` | A control after the names. With an href it is a link to the record. |
| `summary` | `true` | Whether the summary for screen readers is written. |
| `summaryId` | `'nods-summary'` | The id of that summary. Give each credit on a page its own. |
| `identity` | `Unset` | The project and installation, written on the credit as data attributes. |

## Keep the two defaults that protect a credit.

The words around a name are muted to 72% of the footer’s ink, which keeps them readable. Set `--nods-muted` lower and the contrast is yours to check.

Every credited link carries `rel="author nofollow noopener"`. A followed link repeated across every site a studio has built can read to a search engine as a link scheme, so the default asks for no ranking.

Next, [mark your name on the line](https://docs.nods.to/line-styles/).

---
https://docs.nods.to/credit/ · nods 0.1.0 · MIT