Headline Component

1. Overview
2. Key Features
3. Configuration Properties
- Base Properties
- Component Specific Properties
4. Configuration Examples
5. API Reference

1. Overview

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

2. Key Features

Three heading levels: h1, h2, and h3
Optional subline text for h1 headings only
Translation and string interpolation support
Semantic HTML structure for accessibility

3. Configuration Properties

Base Properties

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).
`spacing`	`string`	No	Margin spacing before next field: `'NONE'` (0px), `'XS'` (8px), `'S'` (16px), `'M'` (24px), `'L'` (32px), `'XL'` (48px), `'XXL'` (64px).

Component Specific Properties

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

4. Configuration Examples

H1 with Subline

{
  "id": "headline-h1-subline",
  "type": "HEADLINE",
  "label": "Insurance Application",
  "headerType": "h1",
  "subline": "Complete the form below to apply for coverage"
}

H2 Section Heading

{
  "id": "headline-h2-section",
  "type": "HEADLINE",
  "label": "Personal Information",
  "headerType": "h2"
}

H3 Subsection Heading

{
  "id": "headline-h3-subsection",
  "type": "HEADLINE",
  "label": "Contact Details",
  "headerType": "h3"
}

5. API Reference

For complete API documentation, see DfHeadlineConfig.

For Aquila component documentation and design guidelines, see Headline - Aquila Design System.