Standard goal Page title and breadcrumb explain where the user is. Cards and sections explain what they can do next. Submit actions belong to the form they submit, not to the global page header.

Job	Preferred structure	Rule
Admin create or edit page	`wb-page-header` + `wb-card` + `wb-form-section`	Keep the page `h1` outside cards and group fields by purpose.
Detail page	`wb-detail-list` + supporting cards	Use label/value rows instead of loose paragraphs.
Index table	`wb-table` + `wb-table-actions`	Always label the final column `Actions` and let the header and buttons start at the left edge of that cell.
Destructive action	`wb-danger-zone`	Keep it in the final card with a specific consequence label.

Preferred classes	Purpose	Notes
`wb-page-header`, `wb-page-breadcrumb`, `wb-page-title`, `wb-page-description`, `wb-page-actions`	Page-level admin hierarchy	Use one page `h1` outside cards and keep only context actions here. `wb-page-breadcrumbs` remains a compatibility alias.
`wb-breadcrumb`, `wb-breadcrumb-item`, `wb-breadcrumb-link`, `wb-breadcrumb-current`	Secondary hierarchy context	Separators are CSS-owned by default. `wb-breadcrumb-separator` remains only as a manual escape hatch.
`wb-card`, `wb-card-footer`, `wb-field`, `wb-field-hint`, `wb-field-error`, `wb-action-group`, `wb-grid-2`, `wb-stack-4`	Existing card, field, action, and layout structure	Use existing primitives first. The v2.6.0 form aliases stay available for compatibility.
`wb-form-section`, `wb-form-section-header`, `wb-form-section-title`, `wb-form-section-description`, `wb-form-error-summary`, `wb-input-mono`	Admin-specific form semantics	Keep these when the markup needs explicit sectioning, whole-form validation summary, or code-like input treatment.
`wb-detail-list`, `wb-detail-row`, `wb-detail-label`, `wb-detail-value`, `wb-detail-value-mono`	Detail page label/value rows	Use monospace values for paths, tokens, commands, and URLs.
`wb-table-actions`	Explicit final action column	Pair it with a normal left-aligned `Actions` table header and left-aligned action buttons.
`wb-danger-zone`, `wb-danger-zone-title`, `wb-danger-zone-description`, `wb-danger-zone-actions`	Final destructive section	Use specific destructive labels such as `Delete CMS Installation`.

Admin page header and form cards

Add CMS Installation

Use the page header for context and navigation actions only. Keep create and save buttons inside the form footer they belong to.

Back to list View public docs

Please fix the highlighted fields.

Domain is required.
Document root must be an absolute path.

Installation identity

Short identity fields can share a two-column grid on desktop, then stack naturally on smaller screens.

Domain

Enter the production domain.

Label

Optional internal label used in admin lists.

Paths and integration values

Long values such as paths, tokens, URLs, and commands stay full-width and use monospace styling.

CMS app path

Absolute path to the CMS application root.

Document root

Use an absolute path such as /var/www/webblockscms.com/web_root/public.

Health check URL

Keep code-like and infrastructure values visually distinct from human text.

Primary action first. Cancel second.

<div class="wb-page-header">
  <div class="wb-page-header-main">
    <nav class="wb-page-breadcrumb wb-breadcrumb" aria-label="Breadcrumb">...</nav>
    <h1 class="wb-page-title">Edit CMS Installation</h1>
    <p class="wb-page-description">Short page description.</p>
  </div>
  <div class="wb-page-actions">
    <a class="wb-btn wb-btn-outline wb-btn-sm" href="#">Back to list</a>
  </div>
</div>

<section class="wb-card">
  <div class="wb-card-header">
    <h2 class="wb-card-title">Installation identity</h2>
  </div>
  <div class="wb-card-body wb-stack-5">...</div>
  <div class="wb-card-footer">
    <div class="wb-action-group">
      <button class="wb-btn wb-btn-primary">Save Changes</button>
      <button class="wb-btn wb-btn-secondary">Cancel</button>
    </div>
  </div>
</section>

Edit page with multiple cards and danger zone

Edit CMS Installation

Use separate cards for identity, runtime details, and related records so dense admin forms stay scannable.

Back to list View public page

Primary settings

Form cards stay focused by purpose instead of mixing unrelated controls.

Domain

Public hostname used by the installation.

Environment

Use a compact field for short categorical values.

Aliases

Related records can live in their own management card with explicit footer actions.

Alias	Summary	Actions
www.webblockscms.com	Redirects to the canonical production domain.	Edit
cms.webblockscms.com	Internal staff hostname for preview traffic and editor onboarding.	Edit

Danger zone

Destructive actions stay at the bottom of the page with specific labels and short consequence text.

Deleting this installation removes aliases, health history, and saved deployment references. The action cannot be undone.

Detail page with health card

Installation details

Detail pages should show label/value pairs rather than raw paragraphs.

Domain

webblocksui.com

CMS app path

/var/www/webblocksui.com/web_root

CMS public path

/var/www/webblocksui.com/web_root/public

Deploy hook

https://deploy.example.com/hooks/webblocks-ui-production

Edit CMS Installation Back to list

Health and notices

Optional notices should not automatically read as infrastructure failures.

Healthy with notices

Core checks passed. One optional integration is not configured for this installation.

Optional integration Search indexing is not enabled. This may be intentional for smaller sites and does not change the healthy base status.

Table actions

Site	Status	Summary	Actions
WebBlocks UI	Healthy	Primary production site. Queue workers, cache, and storage permissions all match the expected baseline.
Publisher	Healthy with notices	Core infrastructure is healthy. Optional outbound webhook delivery is paused until a replacement endpoint is confirmed.

Action column rule Never leave an action-only header blank. Use the explicit Actions label, keep the header left-aligned like the rest of the table, and keep row actions starting from the left edge of the action cell.

Health and notice status guidance

Do

Make the primary system state explicit, then describe secondary notices clearly.

Use labels such as Healthy with notices when required checks pass.

Let long health summaries wrap instead of clipping action-heavy rows.

Keep optional integrations visually secondary to required infrastructure state.

Avoid

Do not flatten every notice into a generic error state.

Do not mark the whole system degraded when only an optional integration is disabled.

Do not hide long summaries behind clipped one-line cells when diagnosis matters.

Do not use vague destructive labels such as just Delete.

Copy and hierarchy rules

Page titleUse one page h1 outside cards. Card titles should not replace it.

Card titlesUse h2 inside card headers. Use h3 only for nested sections inside a card.

Primary submit labelsUse Create {Resource} for create screens and Save Changes for edit screens.

Cancel orderingKeep the primary action first and the secondary or cancel action second in the same footer group.

Danger labelsUse specific labels such as Delete CMS Alias, Delete Site, or Delete User.