# Components

Per-component reference with props tables, type definitions, and usage examples.

| Component | Category | Description |
|-----------|----------|-------------|
| [AdSlot](./AdSlot.md) |  | — |
| [Analytics](./Analytics.md) | Components/Ads & analytics/Analytics | Initialises page analytics (Google Analytics, Chartbeat, Google Tag Manager) on mount; exports registerPageview() for client-side route changes. |
| [ArcCluster](./ArcCluster.md) | Components/Embeds/ArcCluster | A frame for iframed embeds in Reuters.com's Arc CMS, providing the light theme, Arc font, Pym.js resizing and a header/stage/footer layout. |
| [Article](./Article.md) | Components/Page layout/Article | The top-level wrapper for a graphics story, rendering <main>/<article> with configurable column widths and an embedded mode for embeds. |
| [BeforeAfter](./BeforeAfter.md) | Components/Multimedia/BeforeAfter | An image-comparison slider with a draggable, keyboard-accessible handle for revealing a before/after image pair. |
| [BioBox](./BioBox.md) | Components/Page furniture/BioBox | A bordered box of one or more author bios (rendered as Bio cards), echoing the contributor box on Reuters.com stories. |
| [Block](./Block.md) | Components/Page layout/Block | A centred layout container that constrains its children to a chosen article column width, from narrower to fluid. |
| [BlogPost](./BlogPost.md) | Components/Blog/BlogPost | A single live-blog entry — headline, authors and timestamps above slotted body content. Pairs with BlogTOC. |
| [BlogTOC](./BlogTOC.md) | Components/Blog/BlogTOC | A collapsible table of contents for a live blog, grouping posts by date with in-page anchor links. Pairs with BlogPost. |
| [BodyText](./BodyText.md) | Components/Text elements/BodyText | A body-copy block that renders a markdown string into styled article prose. |
| [Byline](./Byline.md) | Components/Text elements/Byline | An article byline and dateline: linked author names with formatted publish and update times. |
| [ClockWall](./ClockWall.md) | Components/Blog/ClockWall | A row of live analog clocks showing the current time across a list of cities or time zones. |
| [cssVariables](./cssVariables.md) |  | — |
| [DatawrapperChart](./DatawrapperChart.md) | Components/Graphics/DatawrapperChart | An embedded Datawrapper chart that auto-resizes to the height Datawrapper reports, with title, description and notes. |
| [DocumentCloud](./DocumentCloud.md) | Components/Multimedia/DocumentCloud | An embedded DocumentCloud document, referenced by slug in a sandboxed iframe and sized to a container width. |
| [EmbedMetadata](./EmbedMetadata.md) | Components/Page metadata/EmbedMetadata | Renders the minimal metadata an embed (iframe) page needs — canonical link, og:image, and a noindex, nofollow, noarchive robots tag — and mounts a Pym.js child so the embed resizes inside its parent frame. Use instead of SEO on embed pages. |
| [EmbedPreviewerLink](./EmbedPreviewerLink.md) | Components/Utilities/EmbedPreviewerLink | A dev-only floating link to the embed previewer page; renders nothing unless dev is true. |
| [EndNotes](./EndNotes.md) | Components/Text elements/EndNotes | End-of-story notes such as Sources or Edited by, rendered from an array of title and markdown pairs. |
| [FaqBox](./FaqBox.md) | Components/Text elements/FaqBox | A collapsible FAQ section built from question-and-answer pairs using native, accessible <details> disclosures. |
| [FeaturePhoto](./FeaturePhoto.md) | Components/Multimedia/FeaturePhoto | A full-width feature image with an optional caption and lazy-loading; flags a warning when alt text is missing. |
| [Framer](./Framer.md) | Components/Utilities/Framer | A dev harness that previews graphic pages in a resizable Pym.js iframe, with a picker to switch between embeds. |
| [Geocoder](./Geocoder.md) | Components/Controls/Geocoder | An accessible location search backed by the Mapbox geocoding API, debounced to limit billed calls; returns the chosen place's coordinates. |
| [GraphicBlock](./GraphicBlock.md) | Components/Graphics/GraphicBlock | A wrapper that frames a chart or graphic with an optional title, description, notes and ARIA description. |
| [Headline](./Headline.md) | Components/Text elements/Headline | A centred story headline with kicker and dek, and an embedded Byline for authors and timestamps. |
| [Headpile](./Headpile.md) | Components/Text elements/Headpile | A stacked column of people profiles — headshot, name, role and description — rendered from a figures array. |
| [HeroHeadline](./HeroHeadline.md) | Components/Text elements/HeroHeadline | A full-viewport page opener composing Headline, Byline and hero media (background image, FeaturePhoto or custom graphic). |
| [HorizontalScroller](./HorizontalScroller.md) | Components/Graphics/HorizontalScroller | A container that pans its children sideways as the reader scrolls down, with optional snap stops and easing. |
| [InfoBox](./InfoBox.md) | Components/Text elements/InfoBox | A callout aside with an optional title, markdown body and footnotes for supplementary context within article text. |
| [KinesisLogo](./KinesisLogo.md) | Components/Logos/KinesisLogo | The Kinesis dot-pattern logo as inline SVG, with configurable fill colour and width. |
| [LanguageButton](./LanguageButton.md) | Components/Text elements/LanguageButton | A toggle link that switches an article between two locales (English/Spanish by default), handling both embed and standalone URLs. |
| [Legend](./Legend.md) | Components/Graphics/Legend | A presentational legend for maps and charts in one of five modes: threshold, continuous, diverging, categorical or proportional symbols. |
| [Lottie](./Lottie.md) | Components/Multimedia/Lottie | A canvas player for Lottie/dotLottie animations, supporting autoplay, loops, segments, hover-play and scroll-driven progress. |
| [PaddingReset](./PaddingReset.md) | Components/Page layout/PaddingReset | Re-applies the article's horizontal padding to content inside a fluid, full-width Block so captions stay aligned to the text gutter. |
| [PhotoPack](./PhotoPack.md) | Components/Multimedia/PhotoPack | A responsive photo grid that arranges images into rows via breakpoint layouts, with per-image markdown captions. |
| [PymChild](./PymChild.md) | Components/Utilities/PymChild | A renderless helper that starts a Pym.js child on mount so an embed can resize its parent iframe; stores the instance in shared state. |
| [ReferralBlock](./ReferralBlock.md) | Components/Page furniture/ReferralBlock | A block of related-story cards (rendered as Referral children), fetching recent Reuters.com stories by section or taking supplied ones. |
| [resizeObserver](./resizeObserver.md) |  | — |
| [ReutersGraphicsLogo](./ReutersGraphicsLogo.md) | Components/Logos/ReutersGraphicsLogo | The Reuters Graphics logo (Kinesis mark plus wordmark) as inline SVG, with configurable colours and width. |
| [ReutersLogo](./ReutersLogo.md) | Components/Logos/ReutersLogo | The primary Reuters logo (Kinesis mark plus wordmark) as inline SVG, with configurable colours and width. |
| [Scroller](./Scroller.md) | Components/Graphics/Scroller | A scrollytelling component that drives background graphics from an array of steps with foreground text; built on ScrollerBase. |
| [ScrollerBase](./ScrollerBase.md) | Components/Graphics/ScrollerBase | The low-level scroll engine (a Svelte 5 port of svelte-scroller) exposing background/foreground slots and scroll bindings. Powers Scroller. |
| [ScrollerVideo](./ScrollerVideo.md) | Components/Graphics/ScrollerVideo | A scroll-driven video that scrubs playback by scroll position (built on scrollyvideo.js); hosts ScrollerVideoForeground overlays. |
| [SearchInput](./SearchInput.md) | Components/Controls/SearchInput | A search text box with a magnifying-glass icon and clear button, firing an onsearch callback as the query changes. |
| [SEO](./SEO.md) | Components/Page metadata/SEO | Renders the full suite of SEO and social-sharing metadata (title, description, Open Graph, Twitter cards, JSON-LD structured data) for standalone graphics pages on reuters.com. For embed/iframe pages use EmbedMetadata instead. |
| [ShareBar](./ShareBar.md) | Components/Page furniture/ShareBar | A row of social share buttons (X, Facebook, LinkedIn, email, copy link) plus an optional licensing button, mirroring Reuters.com's share toolbar. |
| [SimpleTimeline](./SimpleTimeline.md) | Components/Text elements/SimpleTimeline | A vertical dated timeline rendering an array of dates, each with events that can carry a title, link and context. |
| [SiteFooter](./SiteFooter.md) | Components/Page furniture/SiteFooter | The standard Reuters.com site footer (quick, company and legal links), fetching live footer data in production. |
| [SiteHeader](./SiteHeader.md) | Components/Page furniture/SiteHeader | The standard Reuters.com site header with logo, nav bar and mobile menu, fetching live section data in production. |
| [SiteHeadline](./SiteHeadline.md) | Components/Text elements/SiteHeadline | A story headline block with section label, byline authors and publish/update times; links author names to their Reuters author pages. |
| [Spinner](./Spinner.md) | Components/Utilities/Spinner | A CSS loading spinner (rotating ring) with configurable colour, size, thickness and speed. |
| [Table](./Table.md) | Components/Graphics/Table | A data-driven table from an array of records, with optional search, filtering, sorting, pagination and custom cell formatters. |
| [Temperature](./Temperature.md) |  | A flash-free temperature reading that shows a Celsius value in the reader's preferred unit via CSS. Pairs with TemperatureToggle. |
| [Theme](./Theme.md) | Components/Theming/Theme | A wrapper that applies a theme to its children as CSS custom properties, merging a custom theme over a light or dark base. |
| [TileMap](./TileMap.md) | Components/Graphics/TileMap | A MapLibre/PMTiles vector map (in a GraphicBlock) with configurable centre, zoom, projection and style; provides context for child layers and callouts. |
| [TileMapCallout](./TileMapCallout.md) | Components/Graphics/TileMapCallout | A MapLibre-aware callout for TileMap. Render it as a child of any TileMap, pass a longitude/latitude pair, and the component manages marker placement and lifecycle through the map context. |
| [ToolsHeader](./ToolsHeader.md) | Components/Page furniture/ToolsHeader | A lightweight header with the Reuters Graphics logo and a slot for extra content; optionally sticky. |
| [Video](./Video.md) | Components/Multimedia/Video | A GraphicBlock-wrapped HTML5 video with title, description and notes, plus optional play-when-in-view, poster and custom controls. |
| [Visible](./Visible.md) | Components/Utilities/Visible | A wrapper that tracks whether its content is in the viewport (via IntersectionObserver) and passes a visible flag to its children. |