Hook reference

Every data-region, data-component, data-variant, and data-part hook Enova ships, in lookup tables — header, sidebars, posts, archives, and errors.

Every handle Enova ships, grouped by where it lives on the page. Compose them as region → component[variant] → part. New to the system? Start with the Code injection overview, and grab ready-made CSS from Common snippets.

Site-wide chrome

Hook	What it is
`[data-region="site-header"]`	The sticky top header bar
`[data-region="masthead"]`	The logo + menu-toggle cluster (left of the header)
`[data-part="wordmark"]`	The brand link wrapping the logo or site title
`[data-part="logo"]`	The brand logo image (and the text fallback when there's no logo)
`[data-component="auth-links"]`	The Sign in / Join cluster in the header
`[data-region="primary-nav"]`	The horizontal nav (Top bar navigation mode only)
`[data-region="site-footer"]`	The footer
`[data-component="footer-brand"]`	The footer brand block (logo, description, social)
`[data-region="footer-nav"]`	The footer navigation columns
`[data-region="footer-legal"]`	The copyright / colophon row
`[data-component="social-links"]`	A social-icon cluster
`[data-component="reading-progress"]`	The scroll-to-top progress button (posts)

Sidebars

Hook	What it is
`[data-region="start-sidebar"]`	The left navigation sidebar (inner content — safe to style)
`[data-region="sidebar-nav"]`	The navigation block inside the left sidebar
`[data-region="end-sidebar"]`	The right sidebar (inner content — safe to style)
`[data-component="sidebar-widget"]`	Any card in the right sidebar (see variants below)
`[data-component="sidebar-widget"][data-variant="about"]`	The publication "about" card
`…[data-variant="featured"]`	The Featured posts widget
`…[data-variant="recent"]`	The Recent posts widget
`…[data-variant="popular-tags"]`	The Popular Tags widget
`…[data-variant="top-authors"]`	The Top Authors widget
`…[data-variant="newsletter"]`	The newsletter signup widget
`…[data-variant="recommended"]`	The Recommendations widget
`…[data-variant="related"]`	The Related posts widget (posts only)
`…[data-variant="house-ad"]`	The house ad card (renders a published page slugged `house-ad`)
`…[data-variant="sponsors"]`	The sponsors logo grid (renders a published page slugged `sponsors`)
`…[data-variant="donate"]`	The reader-funded donate card (renders a published page slugged `donate`)
`[data-component="table-of-contents"][data-variant="sidebar"]`	The sticky table of contents in the right sidebar

Homepage & feeds

Hook	What it is
`[data-region="hero"]`	The homepage hero band
`[data-region="hero"][data-variant="featured"]`	Featured-posts carousel hero
`…[data-variant="email"]`	Email-subscription hero
`…[data-variant="cta"]`	Call-to-action hero
`…[data-variant="bio"]`	Author-bio hero
`[data-region="home-feed"]`	The tabbed feed wrapper on the homepage
`[data-region="post-feed"]`	The post grid/list itself

Posts & pages

Hook	What it is
`[data-region="post"]` / `[data-region="page"]`	The article root
`[data-region="post-header"]` / `[data-region="page-header"]`	The title block above the content
`[data-region="post-header"][data-variant="split-right"]`	Split hero — text left, portrait image right (opt-in with the `#hero-split-right` tag)
`[data-region="post-header"][data-variant="split-left"]`	Split hero — portrait image left, text right (`#hero-split-left`)
`[data-region="post-header"][data-variant="cinematic"]`	Cinematic hero — full-bleed image with the title overlaid in white (`#hero-cinematic`)
`[data-region="post-meta"]`	The author / date / read-time / comments bar
`[data-part="comments-count"]`	The comments count link in the post-meta bar (jumps to comments)
`[data-component="social-share"]`	The Share control in the post-meta bar
`[data-region="feature-image"]`	The post or page feature image
`[data-region="post-body"]`	The article body (also covers pages)
`[data-region="post-body"][data-variant="dropcap"]`	Lead paragraph with an enlarged serif initial (opt-in with the `#dropcap` tag)
`[data-region="comments"]`	The comments section
`[data-component="table-of-contents"][data-variant="inline"]`	The collapsible in-article table of contents
`[data-component="member-cta"][data-variant="signup"]`	The members-only paywall (signed-out)
`[data-component="member-cta"][data-variant="upgrade"]`	The members-only paywall (signed-in, needs upgrade)
`[data-component="post-nav-link"][data-variant="prev"]` / `[data-variant="next"]`	Previous / next post links
`[data-component="newsletter-cta"]`	A newsletter signup form (footer + sidebar)

Post hero layouts

Every post uses the centered header by default. You can give one post a different hero with an internal tag — #hero-split-right, #hero-split-left, or #hero-cinematic — set up in Editorial conventions. Each layout exposes a [data-region="post-header"][data-variant="…"] hook above, so you can fine-tune it from Code injection. The split layouts respond to the article column width, so they stay side-by-side on wide columns and stack neatly when a sidebar narrows the space.

Dropcap

The #dropcap internal tag opens a post or page with an elegant oversized initial on the first paragraph — set up in Editorial conventions. Fine-tune it from Code injection via the [data-region="post-body"][data-variant="dropcap"] hook above (the ::first-letter pseudo-element carries the styling).

Membership page

The dedicated Membership page (the page at slug join) ships two layouts — a comparison grid and a "Join" card — and both expose these hooks.

Hook	What it is
`[data-region="membership"]`	The membership / join page wrapper
`[data-component="membership-hero"]`	The hero — title, subtitle, billing toggle (grid layout)
`[data-component="billing-toggle"]`	The Monthly / Yearly billing toggle
`[data-component="tier-grid"]`	The tier comparison grid (grid layout)
`[data-component="tier-card"]`	A tier card — `[data-variant="free"]` / `[data-variant="paid"]`; the highlighted plan also carries `[data-featured="true"]`
`[data-component="join-card"]`	The "Join" conversion card (the `#compact-tier-picker` layout)
`[data-component="plan-row"]`	A selectable plan row in the Join card's picker — `[data-variant="free"]` / `[data-variant="paid"]`; `[data-featured="true"]` on the highlighted row
`[data-component="order-summary"]`	The live order-summary panel in the Join card
`[data-part="price"]`	A formatted tier price
`[data-part="benefits"]`	A tier's benefits list

Story previews & their parts

These repeat across cards, rails, and lists. The part names are uniform, so one rule reaches them everywhere.

Hook	What it is
`[data-component="post-card"]`	A feed post card (`[data-variant="grid"]` or `[data-variant="list"]`)
`[data-component="story-link"]`	A compact text/thumbnail row (sidebar widgets, recommendations)
`[data-component="recommendations"]`	The recommendations list
`[data-part="title"]`	The headline of any preview
`[data-part="kicker"]`	The primary-tag label above a headline
`[data-part="excerpt"]`	The summary text
`[data-part="meta"]`	The byline / date row
`[data-part="image"]`	The preview's image
`[data-part="author"]`	The author name link
`[data-part="date"]`	The published date
`[data-part="read-time"]`	The "N min read" label

Archives & errors

Hook	What it is
`[data-region="archive-header"][data-variant="tag"]`	The tag-archive header
`[data-region="archive-header"][data-variant="author"]`	The author-archive header
`[data-part="cover"]`	The archive cover image
`[data-region="error"][data-variant="404"]`	The 404 (page not found) error page body
`[data-region="error"][data-variant="generic"]`	Every other error page body (500s and friends)

Enova has no breadcrumb bar

Unlike some themes, Enova doesn't render a visible breadcrumb trail (it ships breadcrumbs as invisible SEO metadata only), so there's no breadcrumb hook to style.

Hook	What it is
`[data-region="newsletter-archive"]`	The whole archive page wrapper
`[data-region="archive-hero"]`	The archive hero
`[data-component="archive-ledger"]`	The hero's "ledger" stat card
`[data-region="archive-feed"]`	The list of issues
`[data-region="archive-empty"]`	The empty / coming-soon state
`[data-component="year-rail"]`	The floating year jump-rail
`[data-component="newsletter-card"]`	An issue card — variants `list`, `magazine`, `compact`, `timeline`, `timeline-compact`

These handles are a promise

Every hook on this page is a stable, documented API. We treat renaming or removing one as a breaking change and call it out in the changelog — so a rule you write today keeps working through theme updates.

Hook reference

On this page