Catalogue: ghost-core
A tour of the core package by atomic layer, from atoms to page templates and the ELB chrome, each linking to Storybook.
Atoms
@v4/ghost-core is the shared foundation of the estate — 148 components, from atoms up
to full-page templates (66 atoms, 38 molecules, 41 organisms, 3 templates in Storybook):
buttons, forms, navigation, cards, overlays and the app shell. The three sibling packages
(ghost-content, ghost-video, ghost-basketball) compose these rather than
re-implementing them.
The tables below are a REPRESENTATIVE selection, not the full inventory. The full, live
per-component reference is in Storybook — the "Storybook" column links to each component's
autodocs page. Each id is the story file's title lower-cased with separators turned into
hyphens (Ghost-Core/Atoms/ButtonCommon → ghost-core-atoms-buttoncommon); PascalCase is
not split.
Opening Storybook
Run Storybook from the repo root and open the linked path:
pnpm --filter @v4/storybook dev # http://localhost:6006
Each link is relative to that origin — for example
http://localhost:6006/?path=/docs/ghost-core-atoms-badge--docs.
Atoms
The smallest building blocks — a single visual element with a colour-set axis and, where interactive, state variants.
| Component | What it is | Storybook |
|---|---|---|
badge |
Small status / count pill | /?path=/docs/ghost-core-atoms-badge--docs |
button-common |
The primary/secondary/tertiary CTA button | /?path=/docs/ghost-core-atoms-buttoncommon--docs |
button-icon |
Icon-only button | /?path=/docs/ghost-core-atoms-buttonicon--docs |
button-text |
Text-only button | /?path=/docs/ghost-core-atoms-buttontext--docs |
text-link |
Inline themed link | /?path=/docs/ghost-core-atoms-textlink--docs |
toggle |
On/off switch | /?path=/docs/ghost-core-atoms-toggle--docs |
progress-bar |
Determinate progress / scroll fill | /?path=/docs/ghost-core-atoms-progressbar--docs |
skeleton-loader |
Loading placeholder shimmer | /?path=/docs/ghost-core-atoms-skeletonloader--docs |
countdown |
Time-remaining display | /?path=/docs/ghost-core-atoms-countdown--docs |
card-icon |
Icon tile used inside cards and nav | /?path=/docs/ghost-core-atoms-cardicon--docs |
form-input-field |
Labelled text input field | /?path=/docs/ghost-core-atoms-forminputfield--docs |
sub-navigation-link |
One link in the ELB sub-navigation strip | /?path=/docs/ghost-core-atoms-subnavigationlink--docs |
Molecules
Molecules combine a few atoms into a self-contained unit — a card, a dropdown, a tray, a control cluster. As with the atoms, this is a representative selection; browse Storybook for the full set.
| Component | What it is | Storybook |
|---|---|---|
chip |
Removable / selectable filter chip | /?path=/docs/ghost-core-molecules-chip--docs |
tag |
Editorial tag label | /?path=/docs/ghost-core-molecules-tag--docs |
pagination |
Page-number pagination control | /?path=/docs/ghost-core-molecules-pagination--docs |
segmented-control |
Segmented multi-option toggle | /?path=/docs/ghost-core-molecules-segmentedcontrol--docs |
search-input-field |
Search box with clear / submit | /?path=/docs/ghost-core-molecules-searchinputfield--docs |
reaction-tray |
Row of reaction counters | /?path=/docs/ghost-core-molecules-reactiontray--docs |
share-tray |
Social share button cluster | /?path=/docs/ghost-core-molecules-sharetray--docs |
sub-navigation |
The ELB section sub-navigation strip (Default / Inverse ways) | /?path=/docs/ghost-core-molecules-subnavigation--docs |
navigation-list |
The header's primary navigation list | /?path=/docs/ghost-core-molecules-navigationlist--docs |
Interactive molecules ship play interactions (keyboard, click, disabled semantics) and set
parameters: { a11y: { test: "error" } }, so accessibility violations fail the browser
story tests. Their behaviour is documented on the component's accessibility.mdx page in
Storybook.
Organisms & templates
Organisms
Organisms are page-region components — the footer, the header, navigation, overlays,
carousels. They render full-width so their responsive breakpoints are real, and a named
<section>/<nav> landmark carries a distinct accessible name per instance.
| Component | What it is | Storybook |
|---|---|---|
site-header |
The primary site header | /?path=/docs/ghost-core-organisms-siteheader--docs |
global-nav |
Global navigation bar | /?path=/docs/ghost-core-organisms-globalnav--docs |
footer |
The site footer composition | /?path=/docs/ghost-core-organisms-footer--docs |
more-menu |
Overflow "more" navigation menu | /?path=/docs/ghost-core-organisms-moremenu--docs |
filter-dropdown |
Filter dropdown panel | /?path=/docs/ghost-core-organisms-filterdropdown--docs |
link-list |
Themed list of links | /?path=/docs/ghost-core-organisms-linklist--docs |
paginated-list |
List with paging navigator | /?path=/docs/ghost-core-organisms-paginatedlist--docs |
list-carousel |
Horizontally-scrolling card rail | /?path=/docs/ghost-core-organisms-listcarousel--docs |
banner-ticker |
Scrolling banner ticker | /?path=/docs/ghost-core-organisms-bannerticker--docs |
messaging-panel |
Inline messaging / alert panel | /?path=/docs/ghost-core-organisms-messagingpanel--docs |
overlay-subscription-barrier |
Subscription paywall overlay | /?path=/docs/ghost-core-organisms-overlaysubscriptionbarrier--docs |
navigation-flyout |
The ELB header's drop-down panel under a primary item | /?path=/docs/ghost-core-organisms-navigationflyout--docs |
navigation-mega-menu-mobile |
The compact header's drill-down mega menu | /?path=/docs/ghost-core-organisms-navigationmegamenumobile--docs |
brand-navigation-flyout |
The brand switcher's flyout panel | /?path=/docs/ghost-core-organisms-brandnavigationflyout--docs |
The ELB chrome (site-header, the flyouts, the mega menu, sub-navigation) is built from
ELB – Web – Core, not Ghost. Every flyout and mega-menu panel stays a light card in both of
the header's colour ways — the header's way stops at the trigger. The header hands off from
the compact (burger) layout to the full one at 1440 by design (see
Responsive rungs).
list-carousel has two declared arrangements (paddlePlacement). The default, navigation,
keeps the previous/next pair at the end of the navigation row, as most carousel bands render
today. flanking is the ELB List-Carousel frame: the paddles hang in the page margin either
side of the rail from lg and are hidden below it, and the navigation row holds only the
TabSet and an optional AddButton. A band adopts it in its own ticket; the tabbed,
news, gateway and promo carousels have.
Templates
Templates are page-level components — anything named base-page-* / page-* that composes
a FULL page: its own <h1>, its pinned child colour ways and heading levels, usually built
over an _internal/* layout. A template is the only thing that can see the whole outline, so
it PINS its children's colour sets and heading levels rather than exposing them.
| Component | What it is | Storybook |
|---|---|---|
base-page-error |
Error page template | /?path=/docs/ghost-core-templates-basepageerror--docs |
base-page-search |
Search results page template | /?path=/docs/ghost-core-templates-basepagesearch--docs |
add-to-calendar-page |
Add-to-calendar page template | /?path=/docs/ghost-core-templates-addtocalendarpage--docs |
Page CONTENT wells (*-page-content) stay organisms — the page template composes them.