Translation indicators

Two components that signal translation status on non-English pages: the inline translation-badge and the page-top translation-notice banner.

≈ 2 min read 266 words Updated 2026-08-23

On this page

Two related Bifrost components surface translation status on non-English pages. They’re documented together because they share the same data source (page.extra.translation_status) and the same status taxonomy.

.translation-badge#

Small inline pill rendered next to article titles on non-English pages.

Source: themes/bifrost/sass/components/_translation-badge.scss · templates/macros/translation-badge.html

StatusAccentReading
metadata-only$yellowTitle + description translated; body is English.
machine$mauveBody auto-translated, awaiting human pass.
human$mintFull human translation.
en-onlymutedEnglish fallback — no translation exists yet.
{%/* import "macros/translation-badge.html" as t */%}
{{ t::render(status=page.extra.translation_status) }}

.translation-notice#

Glassmorphic pill that docks under the navbar at the top of non-English pages. Designed as a visual companion to the navbar — same pill geometry and glass treatment.

Source: themes/bifrost/sass/components/_translation-notice.scss · templates/partials/translation-notice.html

Critically, the notice is position: absolute (not fixed), so it scrolls with the document — slides up behind the fixed navbar as the reader scrolls down and re-appears when they return to the top. The navbar’s :has() override keeps it fixed regardless.

Live examples#

Edit this page on GitHub