Chrome

Page-structural UI in Bifrost: breadcrumbs, claim badges, dispatch chips, section marks, translation indicators, figures, focus styles, back-to-top.

9 pages in this section

Chrome components are the structural UI Bifrost wraps around content: breadcrumbs at the top of every page, claim-type and translation indicators next to titles, section marks for category identity, back-to-top affordances. They share a deliberately quiet visual register so they don’t compete with the article body.

  • Breadcrumbs The hierarchical navigation row at the top of every interior page — Home > Section > Category > Current Page.
  • Claim badge Epistemic-status pill set sitting beside page titles — direct, framework, inferred, speculative. The page's own claim_type is highlighted; siblings collapse to one character.
  • Dispatch chip The mint pill labelling content as a Newsroom Dispatch. Distinct from claim-badge and section accents.
  • Section mark Section identity glyph — sits next to an h1 in overview headers and next to card titles for subcategory marks. Sized in em so it scales with the heading.
  • Translation indicators Two components that signal translation status on non-English pages: the inline translation-badge and the page-top translation-notice banner.
  • Figure Centred image block with caption — the styling target of the `figure` shortcode.
  • Back-to-top The fixed-position glass button bottom-right of long pages, jumps back to the page top on click.
  • Focus indicators Global keyboard-focus styles. `:focus-visible` driven so the ring shows for keyboard users only, not on mouse click.
  • Footer Social Icons The footer's social-icon row and Social Media column, and how to add a new platform — the partials/social pattern, the include, and the optional brand-color hover.

Edit this page on GitHub