Semantic theme class reference

Stable Flowershow CSS hooks grouped by the UI areas that emit them.

Flowershow themes start with custom properties, then use semantic classes when a component needs more specific treatment. This page is generated from default-theme.css and currently documents 348 styled class selectors: 346 stable semantic hooks and 2 non-contract compatibility utilities.

Stability contract

The semantic component, element, state, and variant hooks listed here are a public theme-author API. Removing or renaming one, or changing what UI element it represents, is a breaking change for themes. Adding a hook is non-breaking. State and Variant hooks are stable in name but only appear when their owning component enters that state; do not assume every page renders every hook.

The list is exhaustive for classes styled by default-theme.css. The final compatibility section is drift-checked but explicitly excluded from the public API. Emitted-only class names and raw utility classes used inside component source are not an authoring contract unless they appear in a semantic table on this page.

Structural wrappers shown in DOM sketches but absent from their accompanying tables provide nesting context only; they are not stable hooks. Structure is still controlled by Flowershow core: these hooks change presentation, not which components render or their order.

Kinds used below:

  • Hook — component or semantic element.
  • Element — BEM-style child written with __.
  • Variant — alternative treatment written with --.
  • State — conditional is-*, has-*, or no-* hook.
  • Compatibility — styled utility retained for compatibility, not public API.

Callouts use data attributes rather than classes:

  • [data-callout]
  • [data-callout-type="note"] (and other callout types)
  • [data-callout-title]
  • [data-callout-body]

Scope callout overrides below .rendered-mdx so they outrank the base attribute selectors without relying on source order.

Site layout and page shell

Top-level site grid, responsive rails, and shell variants.

DOM shape

.site-layout[.no-nav]
├─ .site-navbar (optional)
├─ .site-body (structural wrapper)
│  ├─ .site-subnav (optional)
│  ├─ .page-hero-container (optional)
│  └─ .layout-inner[.has-sidebar | .has-toc | .has-sidebar-and-toc]
│     ├─ .layout-inner-left
│     ├─ .layout-inner-center (structural wrapper)
│     │  └─ main.page-main (structural wrapper)
│     └─ .layout-inner-right
└─ .site-footer
ClassKind
.layout-innerHook
.layout-inner-leftHook
.layout-inner-rightHook
.site-bodyHook
.site-layoutHook

Desktop navbar, dropdowns, mobile navigation, theme switch, and visitor controls.

DOM shape

.site-navbar
├─ .site-navbar-inner
│  ├─ .site-navbar-site-name
│  ├─ .site-navbar-links-container
│  │  ├─ .site-navbar-link
│  │  └─ .site-navbar-dropdown
│  └─ .site-navbar-mobile-nav-button
└─ .mobile-nav
.site-navbar.site-navbar--custom (_navbar.html)
└─ .site-navbar-inner
   ├─ .site-navbar-custom
   ├─ .site-navbar-search-container (optional)
   └─ .site-navbar-theme-switch-container (optional)
ClassKind
.mobile-navHook
.mobile-nav-cta-buttonHook
.mobile-nav-dropdownHook
.mobile-nav-dropdown-iconHook
.mobile-nav-dropdown-itemHook
.mobile-nav-dropdown-panelHook
.mobile-nav-dropdown-triggerHook
.mobile-nav-linkHook
.mobile-nav-links-containerHook
.mobile-nav-social-linkHook
.mobile-nav-social-links-containerHook
.mobile-nav-treeHook
.mobile-nav-tree-containerHook
.mobile-nav-tree-item-childrenHook
.mobile-nav-tree-item-iconHook
.mobile-nav-tree-item-selfHook
.site-navbarHook
.site-navbar–customVariant
.site-navbar-cta-buttonHook
.site-navbar-customHook
.site-navbar-dropdownHook
.site-navbar-dropdown-iconHook
.site-navbar-dropdown-itemHook
.site-navbar-dropdown-panelHook
.site-navbar-dropdown-triggerHook
.site-navbar-innerHook
.site-navbar-linkHook
.site-navbar-links-containerHook
.site-navbar-mobile-nav-buttonHook
.site-navbar-mobile-nav-iconHook
.site-navbar-search-containerHook
.site-navbar-site-logoHook
.site-navbar-site-nameHook
.site-navbar-site-titleHook
.site-navbar-social-link-iconHook
.site-navbar-social-links-containerHook
.site-navbar-theme-switch-containerHook
.theme-switchHook
.theme-switch-iconHook
.visitor-logout-buttonHook
.visitor-logout-button-iconHook

Breadcrumbs, desktop site tree, and the small-screen sidebar drawer.

DOM shape

.site-subnav
├─ .site-subnav-breadcrumbs
└─ .site-subnav-menu-button
.layout-inner-left
└─ .site-sidebar
   └─ .site-tree
body (dialog portal)
└─ .sidebar-drawer-panel
   └─ .site-tree
ClassKind
.sidebar-drawer-backdropHook
.sidebar-drawer-closeHook
.sidebar-drawer-close-iconHook
.sidebar-drawer-headerHook
.sidebar-drawer-panelHook
.site-sidebarHook
.site-subnavHook
.site-subnav-menu-buttonHook
.site-subnav-menu-iconHook
.site-treeHook
.site-tree-disclosure-panelHook
.site-tree-itemHook
.site-tree-item-childrenHook
.site-tree-item-iconHook
.site-tree-item-selfHook
.site-tree-item-textHook

Page header, hero, and rendered content

Page identity, hero content, Markdown body, code controls, images, and task-list hooks.

DOM shape

.page-hero-container
└─ .page-hero[.has-image | .image-full]
main.page-main (structural wrapper)
├─ .page-header
│  ├─ .page-header-title
│  ├─ .page-header-description
│  └─ .page-header-metadata-container
└─ .page-body (structural wrapper)
   └─ .rendered-mdx[.is-plain]
ClassKind
.contains-task-listHook
.heading-linkHook
.page-headerHook
.page-header-actionsHook
.page-header-author-avatarHook
.page-header-author-nameHook
.page-header-authors-avatars-containerHook
.page-header-authors-containerHook
.page-header-breadcrumb-itemHook
.page-header-breadcrumb-linkHook
.page-header-breadcrumb-separatorHook
.page-header-breadcrumbsHook
.page-header-breadcrumbs-listHook
.page-header-dateHook
.page-header-date-iconHook
.page-header-descriptionHook
.page-header-imageHook
.page-header-image-containerHook
.page-header-metadata-containerHook
.page-header-reading-timeHook
.page-header-reading-time-iconHook
.page-header-tagsHook
.page-header-titleHook
.page-header-title-rowHook
.page-heroHook
.page-hero-containerHook
.page-hero-contentHook
.page-hero-content-containerHook
.page-hero-ctaHook
.page-hero-ctas-containerHook
.page-hero-descriptionHook
.page-hero-imageHook
.page-hero-image-containerHook
.page-hero-titleHook
.pre-containerHook
.pre-copy-buttonHook
.pre-iconHook
.pre-srHook
.rendered-mdxHook

Post pages

Individual posts: dated pages in a blog/ or posts/ folder, pages of a folder listed by its own layout: list page that is a dated feed, or pages with layout: post. The header keeps the .page-header-* classes; tags move to the article footer. Custom properties: --post-max-width, --post-wide-max-width, --post-body-size, --post-hero-max-height, --post-hero-radius, --post-avatar-size, --post-meta-color, --post-eyebrow-color, --post-rule-color.

DOM shape

.layout-inner-center.post-layout
└─ main.page-main
   ├─ article.post-page[data-layout="post"]
   │  ├─ header.page-header.post-header
   │  │  ├─ nav.page-header-breadcrumbs.post-eyebrow (folders above the post)
   │  │  ├─ h1.page-header-title
   │  │  ├─ p.page-header-description.post-dek
   │  │  ├─ .page-header-metadata-container.post-byline[data-avatars]
   │  │  │  ├─ .page-header-authors-container.post-byline-authors
   │  │  │  │  ├─ .page-header-authors-avatars-container.post-byline-avatars > img.page-header-author-avatar.post-byline-avatar
   │  │  │  │  └─ .page-header-authors-names-container.post-byline-names > .page-header-author-name
   │  │  │  └─ .post-byline-meta > .page-header-date > time, .page-header-reading-time
   │  │  └─ figure.post-hero > img.post-hero-img, figcaption.post-hero-caption
   │  ├─ .page-body > .rendered-mdx#mdxpage
   │  └─ footer.post-footer > .page-header-tags.post-tags > .tag-pill
   ├─ nav.post-nav > a.post-nav-link.post-nav-link--prev | --next > .post-nav-label, .post-nav-title (or .post-nav-placeholder)
   └─ section.post-read-more > h2.post-read-more-title, section.list-component.list-component--grid (the listing grid cards)
ClassKind
.post-bylineHook
.post-byline-authorsHook
.post-byline-avatarsHook
.post-byline-metaHook
.post-byline-namesHook
.post-dekHook
.post-eyebrowHook
.post-footerHook
.post-headerHook
.post-heroHook
.post-hero-captionHook
.post-hero-imgHook
.post-layoutHook
.post-navHook
.post-nav-labelHook
.post-nav-linkHook
.post-nav-link–nextVariant
.post-nav-placeholderHook
.post-nav-titleHook
.post-pageHook
.post-read-moreHook
.post-read-more-titleHook
.post-tagsHook

Table of contents

The page ToC rail and recursively nested ToC items.

DOM shape

.page-toc-container
└─ .toc
   ├─ .toc-title
   └─ .toc-item
      ├─ .toc-item-self
      └─ .toc-item-children
ClassKind
.page-toc-containerHook
.tocHook
.toc-itemHook
.toc-item-childrenHook
.toc-item-selfHook
.toc-titleHook

Lists, cards, skeletons, and pagination

Collection/blog listing cards, empty and error states, loading placeholders, and pagination controls.

DOM shape

.layout-inner-center.listing-layout[data-view] (page-level listings: the page column)
└─ main.page-main > div.listing-page[data-view] (layout: list, zero-config blog/posts)
├─ header.page-header > .page-header-title-row > h1.page-header-title, .page-header-actions > a.listing-page-feed-link > svg.listing-page-feed-icon, span.listing-page-feed-label (feed link when the site has RSS on)
└─ .page-body > .rendered-mdx#mdxpage > .listing-page-intro (the page's own text), .listing-page-listing (the rule, then the listing)
section.list-component[.list-component--list | --grid | --compact | --people | --magazine][data-view][data-media][data-media-side][data-ratio][data-listing-notes]   (div without data-view for legacy <List />)
├─ .list-component-magazine-top[data-layout=solo|pair|trio|lead-more|full] (magazine, page 1)
│  ├─ article.list-component-item.list-component-item--featured (the hero)
│  ├─ .list-component-magazine-side > article.list-component-item.list-component-item--card
│  └─ .list-component-magazine-more > h2.list-component-section-heading, article.list-component-item.list-component-item--brief
├─ .list-component-magazine-rest (magazine: the remaining rows, after h2.list-component-section-heading)
├─ h2.list-component-group-heading (optional, with group)
├─ article.list-component-item[.list-component-item--featured] / .list-component-skeleton-item (legacy only)
│  ├─ .list-component-item-media > a.list-component-item-media-link > img.list-component-item-media-img (item image or defaultImage)
│  │  | .list-component-item-media.list-component-item-media--placeholder[aria-hidden] (empty accent-tinted tile: grid card, or list/magazine row when at least half the items have an image; off with defaultImage: none)
│  │  | .list-component-item-media.list-component-item-media--placeholder[aria-hidden] > span.list-component-item-initials (people view, no photo)
│  └─ .list-component-item-content
│     ├─ .list-component-item-eyebrow > span
│     ├─ .list-component-item-headline > a.list-component-item-headline-link
│     ├─ .list-component-item-summary
│     ├─ .list-component-item-meta
│     │  ├─ time.list-component-item-date
│     │  ├─ .list-component-item-authors > .list-component-item-avatars > img.list-component-item-author-avatar, .list-component-item-author, .list-component-item-authors-more
│     │  └─ .list-component-item-meta-value[data-field]
│     └─ .list-component-item-footnote (legacy only)
└─ nav.list-component-pagination
   ├─ .list-component-pagination-nav > .list-component-pagination-button[.is-disabled]
   └─ .list-component-pagination-pages
.list-component-empty (no matching pages)
.list-component-error[.list-component-error--block] (items failed to load / invalid block)
ClassKind
.list-componentHook
.list-component–compactVariant
.list-component–gridVariant
.list-component–listVariant
.list-component–magazineVariant
.list-component–peopleVariant
.list-component-emptyHook
.list-component-errorHook
.list-component-error–blockVariant
.list-component-error-keysHook
.list-component-error-listHook
.list-component-error-titleHook
.list-component-group-headingHook
.list-component-itemHook
.list-component-item–briefVariant
.list-component-item–cardVariant
.list-component-item–featuredVariant
.list-component-item-authorHook
.list-component-item-author-avatarHook
.list-component-item-authorsHook
.list-component-item-authors-moreHook
.list-component-item-avatarsHook
.list-component-item-contentHook
.list-component-item-dateHook
.list-component-item-eyebrowHook
.list-component-item-footnoteHook
.list-component-item-headlineHook
.list-component-item-headline-linkHook
.list-component-item-initialsHook
.list-component-item-mediaHook
.list-component-item-media–placeholderVariant
.list-component-item-media-imgHook
.list-component-item-media-linkHook
.list-component-item-metaHook
.list-component-item-meta-valueHook
.list-component-item-summaryHook
.list-component-magazine-moreHook
.list-component-magazine-restHook
.list-component-magazine-sideHook
.list-component-magazine-topHook
.list-component-paginationHook
.list-component-pagination-buttonHook
.list-component-pagination-button–nextVariant
.list-component-pagination-button–prevVariant
.list-component-pagination-button-iconHook
.list-component-pagination-button-icon–nextVariant
.list-component-pagination-button-icon–prevVariant
.list-component-pagination-ellipsisHook
.list-component-pagination-navHook
.list-component-pagination-nav–endVariant
.list-component-pagination-page-buttonHook
.list-component-pagination-page-button–currentVariant
.list-component-pagination-page-button–otherVariant
.list-component-pagination-pagesHook
.list-component-section-headingHook
.list-component-skeletonHook
.list-component-skeleton-contentHook
.list-component-skeleton-eyebrowHook
.list-component-skeleton-footnoteHook
.list-component-skeleton-headlineHook
.list-component-skeleton-itemHook
.list-component-skeleton-mediaHook
.list-component-skeleton-media-placeholderHook
.list-component-skeleton-summaryHook
.listing-layoutHook
.listing-pageHook
.listing-page-feed-iconHook
.listing-page-feed-linkHook
.listing-page-introHook
.listing-page-listingHook

Tag index and per-tag pages

Generated navigation pages for the /tags index and each /tags/{tag} listing, plus the inline tag pill emitted in rendered content.

DOM shape

.tags-page (structural wrapper)
├─ .tags-page-header
│  └─ .tags-page-title
├─ .tags-page-empty (empty state)
├─ ul.tag-index (/tags index)
│  └─ .tag-index-item
│     ├─ .tag-pill
│     └─ .tag-index-count
└─ ol.tag-page-list (/tags/{tag})
   └─ .tag-page-list-item
      └─ .tag-page-list-description
ClassKind
.tag-indexHook
.tag-index-countHook
.tag-index-itemHook
.tag-page-listHook
.tag-page-list-descriptionHook
.tag-page-list-itemHook
.tag-pillHook
.tags-page-emptyHook
.tags-page-headerHook
.tags-page-titleHook

Changelog

Built-in changelog timeline for changelog/ folders (or folders with layout: changelog), single CHANGELOG.md files (or pages with layout: changelog), and the single-entry page.

DOM shape

.changelog
├─ .changelog-header
│  ├─ .changelog-title
│  └─ .changelog-intro
├─ ol.changelog-entries
│  └─ li.changelog-entry[.is-unreleased]
│     ├─ .changelog-entry-meta
│     │  └─ .changelog-entry-meta-inner
│     │     ├─ .changelog-entry-date
│     │     ├─ .changelog-entry-compare (CHANGELOG.md)
│     │     ├─ .changelog-entry-version
│     │     └─ .changelog-entry-authors
│     │        └─ .changelog-entry-author
│     └─ .changelog-entry-content
│        ├─ .changelog-entry-title
│        ├─ .changelog-entry-description
│        ├─ .changelog-entry-media
│        └─ .changelog-entry-body.rendered-mdx
└─ .changelog-pagination
   └─ .changelog-pagination-inner
      └─ .changelog-pagination-count
article.changelog-single (entry page)
├─ .changelog-back
├─ .changelog-entry-meta
└─ .changelog-entry-title … .changelog-entry-body
.changelog-entry-nav
├─ .changelog-entry-nav-older
└─ .changelog-entry-nav-newer
ClassKind
.changelogHook
.changelog-backHook
.changelog-entriesHook
.changelog-entryHook
.changelog-entry-authorHook
.changelog-entry-authorsHook
.changelog-entry-bodyHook
.changelog-entry-compareHook
.changelog-entry-contentHook
.changelog-entry-dateHook
.changelog-entry-descriptionHook
.changelog-entry-mediaHook
.changelog-entry-metaHook
.changelog-entry-meta-innerHook
.changelog-entry-navHook
.changelog-entry-nav-newerHook
.changelog-entry-titleHook
.changelog-entry-versionHook
.changelog-headerHook
.changelog-introHook
.changelog-paginationHook
.changelog-pagination-countHook
.changelog-pagination-innerHook
.changelog-singleHook
.changelog-titleHook

Search button and modal

Search launch control, modal shell, result states, and hit content.

DOM shape

.search-button
.search-modal
├─ .search-modal-backdrop
└─ .search-modal-card-container
   └─ .search-modal-card
      ├─ .search-modal-input-container
      └─ .search-modal-results
ClassKind
.search-buttonHook
.search-iconHook
.search-modalHook
.search-modal-backdropHook
.search-modal-cardHook
.search-modal-card-containerHook
.search-modal-close-buttonHook
.search-modal-close-iconHook
.search-modal-error-iconHook
.search-modal-error-icon-textHook
.search-modal-highlightHook
.search-modal-hit-contentHook
.search-modal-hit-linkHook
.search-modal-hit-titleHook
.search-modal-hits-itemHook
.search-modal-hits-listHook
.search-modal-inputHook
.search-modal-input-containerHook
.search-modal-loading-spinnerHook
.search-modal-resultsHook
.search-modal-results-containerHook
.search-modal-stalled-spinnerHook
.search-modal-status-containerHook
.search-modal-status-contentHook
.search-modal-status-iconHook
.search-modal-status-messageHook
.search-modal-status-submessageHook
.search-placeholderHook
.search-shortcut-hintHook

Publication identity, navigation groups, social links, and copyright, or a custom footer rendered from _footer.html (Premium).

DOM shape

.site-footer
└─ .site-footer-inner
   └─ .site-footer-content-grid
      ├─ .site-footer-publication-section
      └─ .site-footer-navigation-section
.site-footer.site-footer--custom (_footer.html)
└─ .site-footer-inner
   └─ .site-footer-custom
ClassKind
.site-footerHook
.site-footer-content-gridHook
.site-footer-copyrightHook
.site-footer-customHook
.site-footer-innerHook
.site-footer-navigation-gridHook
.site-footer-navigation-groupHook
.site-footer-navigation-linkHook
.site-footer-navigation-listHook
.site-footer-navigation-sectionHook
.site-footer-navigation-titleHook
.site-footer-publication-nameHook
.site-footer-publication-sectionHook
.site-footer-social-iconHook
.site-footer-social-linkHook
.site-footer-social-linksHook

Blocks rendered after the main page content.

DOM shape

.layout-inner-center (structural wrapper)
├─ main.page-main (structural wrapper)
├─ .page-edit-button-container
├─ .page-backlinks-container
│  └─ .page-backlinks-list
└─ .page-comments-container
ClassKind
.page-backlinks-containerHook
.page-backlinks-itemHook
.page-backlinks-listHook
.page-backlinks-titleHook
.page-comments-containerHook
.page-edit-buttonHook
.page-edit-button-containerHook

Graph, canvas, PDF, image lightbox, and media embeds

Graph panels/modals and document/media rendering surfaces.

DOM shape

.graph-mini-panel / .graph-modal
.canvas-node-content
.image-lightbox-trigger (zoomable image)
.image-lightbox (dialog)
.pdf-viewer
├─ .pdf-header
└─ .pdf-scroll-area
   └─ .pdf-page
ClassKind
.canvas-control-btnHook
.canvas-controlsHook
.canvas-fullwidthHook
.canvas-nodeHook
.canvas-node-contentHook
.canvas-pageHook
.canvas-worldHook
.graph-mini-panelHook
.graph-mini-panel__action-btnElement
.graph-mini-panel__actionsElement
.graph-mini-panel__labelElement
.graph-mini-panel–loadingVariant
.graph-modalHook
.graph-modal__closeElement
.graph-modal__headerElement
.graph-modal__innerElement
.graph-modal__titleElement
.image-lightboxHook
.image-lightbox-spinnerHook
.image-lightbox-triggerHook
.pdf-errorHook
.pdf-filenameHook
.pdf-headerHook
.pdf-loadingHook
.pdf-pageHook
.pdf-page-countHook
.pdf-scroll-areaHook
.pdf-viewerHook

Error and not-found pages

Public error cards, diagnostic stacks, and 404 presentation.

DOM shape

.error-page / .not-found
└─ *-inner
   ├─ *-title
   ├─ *-subtitle
   └─ *-description
ClassKind
.error-cardHook
.error-card-iconHook
.error-card-linkHook
.error-card-messageHook
.error-card-stackHook
.error-card-titleHook
.error-pageHook
.error-page-descriptionHook
.error-page-innerHook
.error-page-subtitleHook
.error-page-titleHook
.not-foundHook
.not-found-descriptionHook
.not-found-hintHook
.not-found-innerHook
.not-found-subtitleHook
.not-found-titleHook

Shared states and layout variants

Conditional presence, open/current, image, and layout modifiers.

DOM shape

Owning semantic hook
└─ .is-* / .has-* / .no-* / .image-full
ClassKindOwner
.has-imageState.page-hero
.has-sidebarState.layout-inner
.has-sidebar-and-tocState.layout-inner
.has-tocState.layout-inner
.image-fullVariant.page-hero
.is-canvasStateundefined
.is-collapsibleState.site-tree-item-self / .mobile-nav-tree-item-self
.is-currentState.site-tree-item-self / .mobile-nav-tree-item-self
.is-disabledState.list-component-pagination-button
.is-openStatenavigation dropdowns and collapsible tree items
.is-plainState.rendered-mdx
.is-scrolledState.site-navbar
.is-unreleasedState.changelog-entry
.no-navState.site-layout

Compatibility utilities (not public API)

Selectors retained for exhaustive drift tracking but excluded from the semantic theme-author contract.

CSS layer

@layer utilities
├─ .prose
└─ .overflow-hidden
ClassKind
.overflow-hiddenCompatibility
.proseCompatibility

Generated by node scripts/theme-class-reference.mjs --write. Run pnpm docs:theme-classes:check to verify that this page matches the current stylesheet.

Edit this page View raw markdown

Links to this page:

  1. Changelog
  2. Footer configuration
  3. List component
  4. Listing pages
  5. Navbar configuration
  6. Page headers
  7. Tags
Built with LogoFlowershow