Draw the credit

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

Your own line first

Between two names

A control after the names

The code for what is on screen

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.