Semantic theme class reference

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 230 styled class selectors: 228 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.

Related non-class hooks

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

Navbar and mobile navigation

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

Subnavigation, sidebar, and site tree

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

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]

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

Lists, cards, skeletons, and pagination

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

DOM shape

.list-component
├─ .list-component-item / .list-component-skeleton-item
│  ├─ *-media
│  └─ *-content
└─ .list-component-pagination
   ├─ .list-component-pagination-nav
   └─ .list-component-pagination-pages

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

Footer

Publication identity, navigation groups, social links, and copyright.

DOM shape

.site-footer
└─ .site-footer-inner
   └─ .site-footer-content-grid
      ├─ .site-footer-publication-section
      └─ .site-footer-navigation-section

Backlinks, edit controls, and comments

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

Graph, canvas, PDF, and media embeds

Graph panels/modals and document/media rendering surfaces.

DOM shape

.graph-mini-panel / .graph-modal
.canvas-node-content
.pdf-viewer
├─ .pdf-header
└─ .pdf-scroll-area
   └─ .pdf-page

Error and not-found pages

Public error cards, diagnostic stacks, and 404 presentation.

DOM shape

.error-page / .not-found
└─ *-inner
   ├─ *-title
   ├─ *-subtitle
   └─ *-description

Shared states and layout variants

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

DOM shape

Owning semantic hook
└─ .is-* / .has-* / .no-* / .image-full

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

---

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