The canonical inline message primitive. Every frontend notice — across the pledge form, checkout, the creator and backer dashboards, and the sign-in and registration screens — renders from this one block. Severity is carried by both color and text (never color alone): a single --igcf-notice-color custom property drives the left border, the faint background tint, and the title color together, and each severity modifier sets it once.
The same markup is produced two ways, kept in lockstep: server-side by the partials/notice template (call igcf_render_notice() in PHP), and client-side by the window.igcfNotice factory for notices injected after a page action. To restyle every notice at once, override partials/notice.php in your theme — see Template Overrides.
Some surfaces render an empty live region up front and let JavaScript inject a notice into it after an action (a validation error, a save confirmation). These slots carry a data-igcf-notice-slot attribute whose value sets the announcement politeness:
Value
Announcement
Used for
assertive
Interrupts the screen reader (paired with role="alert").
Errors and validation summaries.
polite
Announced when the user is idle (paired with role="status").
Success confirmations.
Documented slot elements in core include .igcf-campaign-form__errors, .igcf-campaign-form__success, and .igcf-pledge-form__messages, plus the sign-in screen’s own error and success regions.
The review headline’s value span, present only when a projected breakdown renders. Carries data-igcf-checkout-total so an add-on’s script can rewrite the live total in place.
The itemised “what this charge is made of” list, rendered by igcf_render_pledge_breakdown() from the partials/pledge-breakdown template. The same markup serves the checkout review step, the receipt and the backer’s pledge-detail page; the email variant emits an inline-styled table instead.
Class
Description
.igcf-pledge-breakdown
Block wrapper
.igcf-pledge-breakdown__rows
The <dl> holding the rows
.igcf-pledge-breakdown__row
One row. Carries data-component with the component’s key (pledge, tip, …).
.igcf-pledge-breakdown__row--total
The total row (data-component="total_charged")
.igcf-pledge-breakdown__value
The <dd> carrying a row’s amount
.igcf-pledge-breakdown__announce
aria-live region, present only in live (checkout) mode
In live mode a component offered at zero renders hidden rather than being omitted, so a script has a row to reveal rather than build one. In recorded mode zero rows are dropped entirely. Nothing at all is emitted when the breakdown is not renderable — a plain pledge with no contributed components, for instance.
The frontend dashboard shell (sidebar nav, account sections, and the backer pledge list) is core. The per-campaign management view is core too; the multi-campaign creator roster and its per-card action buttons come with Ignition Platform Mode.
The dashboard is wrapped in a flex container at width ≥ 601px (sidebar + content side-by-side). Below 601px the .igcf-dashboard__nav becomes an off-canvas drawer activated by the hamburger toggle.
Class
Description
.igcf-dashboard
Wrapper for the whole dashboard.
.igcf-dashboard--drawer-open
Applied to the wrapper while the off-canvas drawer is open.
.igcf-dashboard__menu-toggle
Hamburger button (visible only below 601px). Has aria-expanded and aria-controls pointing at .igcf-dashboard__nav.
.igcf-dashboard__menu-toggle-icon
The ☰ glyph inside the toggle.
.igcf-dashboard__menu-toggle-label
Active-leaf label shown next to the glyph so users see where they are.
Logout link styled as a nav item; appears at the bottom of the nav under a divider.
.igcf-dashboard__nav-subitems
Indented <ul> of child items; rendered only under the active parent.
.igcf-dashboard__nav-subitem
Nested child link.
.igcf-dashboard__nav-subitem--active
Active child link.
.igcf-dashboard__nav-divider
<hr aria-hidden="true"> separating the items from the logout link.
.igcf-dashboard__content
The content pane. Receives the inert attribute while the drawer is open.
.igcf-dashboard__scrim
Overlay behind the drawer below 601px; clicking it closes the drawer.
.igcf-no-scroll
Applied to <body> while the drawer is open to lock background scroll.
The active leaf link carries aria-current="page". Inactive parents do not render their children — the URL is the source of truth for which item is open.
Neutral variant (gray) — e.g. a canceled pledge, and the admin refund chip
.igcf-status-badge--succeeded
Succeeded status (pledge-specific)
.igcf-status-badge--pending
Pending status (pledge-specific)
.igcf-status-badge--canceled
Canceled status (pledge-specific)
.igcf-status-badge__toggle
Dropdown toggle button
.igcf-status-badge__menu
Dropdown menu container
.igcf-status-badge__item
Dropdown menu item
The pledge lifecycle uses the semantic modifiers (--success / --warning / --neutral), mapped from the status via Igcf_Pledge_Service::status_to_semantic(). A refund is rendered as a separate neutral chip beside the badge, never as a badge variant — see Refund chip and breakdown.
The frontend refund chip (“Partial Refund” / “Full Refund”) beside the dashboard status badge. (The wp-admin pledge screens reuse .igcf-status-badge--neutral for the equivalent chip.)
.igcf-dashboard__detail-amounts
The refund amounts block on the backer pledge-detail page: Pledged / Refunded / Net on a plain pledge, or Refunded / Net sitting under the pledge breakdown when the charge carried contributed components.
.igcf-dashboard__detail-amount-row
A row within the breakdown block.
.igcf-dashboard__detail-amount-row--net
The Net row modifier.
.igcf-dashboard__detail-amount-label
A label within the breakdown block.
.igcf-dashboard__campaign-refund-note
The “refunded across N pledges” note in the creator funding summary.
The two-table “what was charged, and where it went” section on the wp-admin pledge detail page, one block per succeeded payment attempt. See Managing Pledges.
Class
Description
.igcf-pledge-statement
Section wrapper
.igcf-pledge-statement__block
One attempt’s pair of tables
.igcf-pledge-statement__attempt
Per-attempt heading, present only when the pledge has more than one succeeded attempt
.igcf-pledge-statement__tables
Two-column grid holding the pair; collapses to one column below 601px
.igcf-pledge-statement__table
Either table
.igcf-pledge-statement__row--total
The total row of either table
.igcf-pledge-statement__row--other
The unexplained-difference row, shown only when the itemised parts fail to sum to the charge
.igcf-pledge-statement__destination
The muted destination parenthetical on a term — “(gateway)”, “(operator, owed)” and so on. Core’s own wording, never an add-on’s
.igcf-pledge-statement__caveat
The “processor has not reported its fee” note under Net
.igcf-pledge-statement__note
The chargeback-and-dispute-fees aside under the right-hand table
.igcf-pledge-statement__unsettled
“Not settled” message in place of the right-hand table
.igcf-pledge-statement__pending
The pending-refund line beneath a block
.igcf-pledge-statement__unsettled-refund
A refund recorded against an attempt that never succeeded
.igcf-pledge-statement__pledge-total
Cross-attempt total, present only with more than one succeeded attempt
The five account sections (Profile, Email, Password, Notifications, Privacy) render in the main dashboard content pane. The legacy .igcf-account-subnav* classes were removed in 0.11.0 — section switching is now handled by the unified dashboard nav, which renders these as children of the Account item via Igcf_Dashboard_Nav_Registry.
Body classes added by the plugin’s block templates. Themes can target these to scope width or chrome adjustments to plugin pages without touching every individual template.
Class
Applied to
Constrained width
.igcf-page--narrow
Pages assigned the igcf-page-narrow template (auth, checkout)
480px
.igcf-page--standard
Pages assigned the igcf-page-standard template (general use)
800px
.igcf-page--wide
Pages assigned the igcf-page-wide template (frontend dashboard)
1200px
The single-campaign and campaign archive views do not carry a .igcf-page--* class — they go through the PHP template hierarchy rather than the block templates.
