The HEADLINE component provides styled text headings within forms to organize content into sections. Supports h1, h2, and h3 heading levels, with h1 optionally including a subline.
🛝 Use the Dynamic Form Playground to see the Headline component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type | 'HEADLINE' | Yes | Specifies the field type as HEADLINE. |
id | string | Yes | Unique identifier for the field. |
renderName | string | No | Optional name added as data-render-name attribute to locate the rendered element in the DOM. |
label | string | Yes | The headline text content. Supports translation and string interpolation. |
testId | string | No | Test identifier for automated testing. Set as data-testid attribute. |
acl | array | No | Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression). |
columnSpan | number | No | Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width). See Overriding the number of grid columns when using --df-custom-columns. Only effective when headlineWidthMatchesLayoutType is set to true in the form layout; otherwise the headline always spans the full width regardless. |
spacing | string | No | Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
| Property | Type | Required | Description |
|---|---|---|---|
headerType | string | Yes | Defines the level of the HTML heading element and the visual appearance of the headline. |
subline | string | No | An optional subline only for headlines with headerType h1 |
{
"id": "headline-h1-subline",
"type": "HEADLINE",
"label": "Insurance Application",
"headerType": "h1",
"subline": "Complete the form below to apply for coverage"
}{
"id": "headline-h2-section",
"type": "HEADLINE",
"label": "Personal Information",
"headerType": "h2"
}{
"id": "headline-h3-subsection",
"type": "HEADLINE",
"label": "Contact Details",
"headerType": "h3"
}For complete API documentation, see DfHeadlineConfig.
For Aquila component documentation and design guidelines, see Headline - Aquila Design System.