src/components/elements/page-title
// src/components/elements/page-title/schema.yaml
$schema: http://json-schema.org/draft-07/schema
$id: /elements/page-title
type: object
required:
- title
additionalProperties: false
properties:
heading_id:
type: string
help_text:
type: string
title:
type: string
title_size:
type: string
enum:
- HeadlineXXL
- HeadlineXL
- HeadlineL
- HeadlineM
- HeadlineS
sub_text:
type: string
// src/components/elements/page-title/mocks.yaml
title: Feasible? Possible? Ask us!
$variants:
- $name: With sub-text
sub_text: Always quick help.
- $name: With help text
help_text: '* Please complete all required fields.'
- $name: With sub and help text
help_text: '* Please complete all required fields.'
sub_text: Always quick help.
// src/components/elements/page-title/page-title.twig
<hgroup class="PageTitle">
<h1 class="u-typo-{{ title_size|default('HeadlineXXL') }} PageTitle-title"
{% if heading_id %} id="{{ heading_id }}"{% endif %}>
{{ title }}
</h1>
{%- if sub_text -%}
<p class="u-typo-TextM PageTitle-subText">{{ sub_text }}</p>
{%- endif -%}
{%- if help_text -%}
<p class="u-typo-TextM PageTitle-helpText">{{ help_text }}</p>
{%- endif -%}
</hgroup>
With sub-text mock data
title: Feasible? Possible? Ask us!
sub_text: Always quick help.
Always quick help.
With help text mock data
title: Feasible? Possible? Ask us!
help_text: '* Please complete all required fields.'
* Please complete all required fields.
With sub and help text mock data
title: Feasible? Possible? Ask us!
help_text: '* Please complete all required fields.'
sub_text: Always quick help.
Always quick help.
* Please complete all required fields.