@v4/ghost-content
@v4/ghost-content owns the editorial content estate — 72 components (plus 6 internal
layouts: article-card-by-format, article-header, article-page, carousel-block,
listing-header, listing-page): article and rich-text blocks, embeds, promos, cards, headers and the listing /
article page templates. It composes @v4/ghost-core components rather than duplicating them,
and binds its own g.components.content.* token namespace from day one.
Content components carry the same story shape as core — grouped as Ghost-Content/{Category}
in Storybook. A representative selection:
| Component |
What it is |
Storybook |
article-body |
The article body content well |
/?path=/docs/ghost-content-organisms-articlebody--docs |
content-block-rich-text |
Rich-text (RTE) block |
/?path=/docs/ghost-content-molecules-contentblockrichtext--docs |
accordion-block |
Expandable accordion block |
/?path=/docs/ghost-content-organisms-accordionblock--docs |
block-scroller |
Horizontal scroller block |
/?path=/docs/ghost-content-organisms-blockscroller--docs |
embed-video |
Embedded video block |
/?path=/docs/ghost-content-organisms-embedvideo--docs |
embed-gallery |
Image gallery embed |
/?path=/docs/ghost-content-organisms-embedgallery--docs |
embed-pull-quote |
Pull-quote embed |
/?path=/docs/ghost-content-organisms-embedpullquote--docs |
card-news-article |
News article card |
/?path=/docs/ghost-content-organisms-cardnewsarticle--docs |
card-video-article |
Video article card |
/?path=/docs/ghost-content-organisms-cardvideoarticle--docs |
news-carousel |
Carousel of article cards |
/?path=/docs/ghost-content-organisms-newscarousel--docs |
promo-block-simple |
Simple promotional block |
/?path=/docs/ghost-content-organisms-promoblocksimple--docs |
stats-block |
Editorial stats block |
/?path=/docs/ghost-content-organisms-statsblock--docs |
table-block |
Data table block |
/?path=/docs/ghost-content-organisms-tableblock--docs |
text-image-block |
Text-and-image layout block |
/?path=/docs/ghost-content-organisms-textimageblock--docs |
base-page-news-article |
Full news article page template |
/?path=/docs/ghost-content-templates-basepagenewsarticle--docs |
base-page-news-listing |
News listing page template |
/?path=/docs/ghost-content-templates-basepagenewslisting--docs |
clips-block |
The WSC Stories / Moments row's well (@v4/wsc mounts into it) |
/?path=/docs/ghost-content-organisms-clipsblock--docs |
scroller-block-navigation-panel-sidebar |
The content scroller's navigation panel |
/?path=/docs/ghost-content-molecules-scrollerblocknavigationpanelsidebar--docs |
The ELB fork
Every @v4/ghost-content component is built against ELB – Web – Content
(9iz5GeR9syO68cmPr1ppE1), ELB's fork of Ghost – Content 2.0, except clips-block,
whose bridge names the WSC Strip page of the EXT – ELB – Web – Structure file. Because the
fork preserves Ghost's node ids, a bridge still naming the Ghost file resolves perfectly and
measures the wrong design. As of 25 September 2026, 40 bridges still named Ghost – Content
and were unaudited, and seven record no node ids at all (card-gallery-article,
card-news-article, card-podcast-article, card-video-article, hero-thumbnail-card,
promo-block-full-image, scroller-block-navigation-panel-expanding). Run
/fork-status before refactoring any of them; the method is
.claude/rules/frontend/fork-refactor.md.
Two ELB-specific behaviours worth knowing:
- The content scroller renders one scroller per Content Scroller Block, its navigation
rows naming the blocks it contains, and takes ONE colour way for the whole scroller from
the block's Theme field — the contained blocks cannot deviate.
- Competition marks on cards and headers use ghost-core's
competition-marker
(/?path=/docs/ghost-core-atoms-competitionmarker--docs): EuroLeague, EuroCup or NextGen,
each in its own brand colour.
@v4/ghost-video
@v4/ghost-video owns the video domain surfaces — 27 components (plus 4 internal
layouts: video-block, video-page, video-page-details, video-panel-card): video
landing / detail / collection / playlist / match pages, the landing's blocks, video cards
and carousels. Its page templates back the @v4/video-app route factories. The
surfaces design has drawn are rebuilt against ELB's own video design rather than Ghost's.
| Component |
What it is |
Storybook |
base-page-video |
Video detail page template |
/?path=/docs/ghost-video-templates-basepagevideo--docs |
base-page-video-landing |
Video landing page template |
/?path=/docs/ghost-video-templates-basepagevideolanding--docs |
base-page-collection |
Video collection page template |
/?path=/docs/ghost-video-templates-basepagecollection--docs |
base-page-playlist |
Playlist page template |
/?path=/docs/ghost-video-templates-basepageplaylist--docs |
block-featured-video |
Featured video block |
/?path=/docs/ghost-video-organisms-blockfeaturedvideo--docs |
block-playlist |
Playlist block |
/?path=/docs/ghost-video-organisms-blockplaylist--docs |
block-related-videos |
Related-videos rail |
/?path=/docs/ghost-video-organisms-blockrelatedvideos--docs |
card-video |
Video card |
/?path=/docs/ghost-video-organisms-cardvideo--docs |
card-featured-video |
Featured video card |
/?path=/docs/ghost-video-organisms-cardfeaturedvideo--docs |
header-video-hero |
Video hero header |
/?path=/docs/ghost-video-organisms-headervideohero--docs |
livestream-frame |
Livestream well + states (code-only, ELTV) |
/?path=/docs/ghost-video-organisms-livestreamframe--docs |
overlay-availability |
"Stream starts" notice |
/?path=/docs/ghost-video-molecules-overlayavailability--docs |
base-page-match |
A game's video page template |
/?path=/docs/ghost-video-templates-basepagematch--docs |
block-category |
A category's block on the landing |
/?path=/docs/ghost-video-organisms-blockcategory--docs |
block-collections |
Rail of collection cards |
/?path=/docs/ghost-video-organisms-blockcollections--docs |
block-numbered-list |
Numbered ("top ten") rail |
/?path=/docs/ghost-video-organisms-blocknumberedlist--docs |
block-play-next |
A playlist's play-next queue |
/?path=/docs/ghost-video-organisms-blockplaynext--docs |
block-players-list |
Players rail with its tab set |
/?path=/docs/ghost-video-organisms-blockplayerslist--docs |
block-progress-list |
Rail or grid of progress or game cards |
/?path=/docs/ghost-video-organisms-blockprogresslist--docs |
card-video-category |
Category card |
/?path=/docs/ghost-video-molecules-cardvideocategory--docs |
card-video-collection |
Collection card |
/?path=/docs/ghost-video-molecules-cardvideocollection--docs |
card-video-match |
Game card with its score box |
/?path=/docs/ghost-video-organisms-cardvideomatch--docs |
card-video-numbered |
Numbered video card |
/?path=/docs/ghost-video-organisms-cardvideonumbered--docs |
card-video-player |
Player card |
/?path=/docs/ghost-video-molecules-cardvideoplayer--docs |
card-video-progress |
Video card with watch progress |
/?path=/docs/ghost-video-organisms-cardvideoprogress--docs |
video-hero-thumbnail-card |
Thumbnail tile in the hero's panel |
/?path=/docs/ghost-video-organisms-videoherothumbnailcard--docs |
video-up-next |
Panel over a playlist's player when a video ends |
/?path=/docs/ghost-video-organisms-videoupnext--docs |
Rails and playback
The rails page by a fraction of their column rather than by the card's own width, so two
cards fill a row on tablet and three on laptop — see
Responsive rungs.
The actual video PLAYBACK lives outside this package — @v4/ghost-video is the presentation
layer:
@v4/media (the only importer of the platform video SDK) owns the MediaPlayer at
@v4/media/player — Brightcove, YouTube and Mux (the hosted player.mux.com frame by the
playback's videoId) — and the VideoPreview at @v4/media/preview, a muted inline
<video> of the Mux HLS stream behind the hero's autoplay and the card's hover.@v4/eltv (EuroLeague TV) owns the livestream: its LivestreamPlayer at
@v4/eltv/player mounts the Vesper player inside the code-only livestream-frame.