block · page-header

Page header

A transparent typographic page introduction with wrapping actions.

Install with npx @madojs/ui@latest add page-header.

Block

Composition

Place an eyebrow, the page heading and description in the heading group, with optional native actions in the actions group.

Public API

class mado-ui-page-header / heading / eyebrow / title / description / actions: Transparent page-introduction layout and typography.

Detected public classes

Detected public CSS properties

--mado-ui-color-text
--mado-ui-color-text-muted
--mado-ui-page-header-actions-align
--mado-ui-page-header-actions-gap
--mado-ui-page-header-align
--mado-ui-page-header-color
--mado-ui-page-header-description-color
--mado-ui-page-header-description-width
--mado-ui-page-header-eyebrow-color
--mado-ui-page-header-gap
--mado-ui-page-header-heading-gap
--mado-ui-page-header-title-size
--mado-ui-space-1
--mado-ui-space-2
--mado-ui-space-4

Accessibility contract

The application chooses the correct heading level, normally one h1 for the page.
Eyebrow and description are supporting content; actions retain native button or link semantics.

Keyboard

The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Mado UI theme theme

Resolved install order

Mado UI theme theme

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.

blocks/page-header/mado-ui-page-header.css {styles}/mado-ui-page-header.css