page-title

Information

Folder
src/components/elements/page-title

Files

Schema
// 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
Mocks
// 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.
Template
// 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>

Variants

default
Open

Feasible? Possible? Ask us!

With sub-text
Open

Feasible? Possible? Ask us!

Always quick help.

With help text
Open

Feasible? Possible? Ask us!

* Please complete all required fields.

With sub and help text
Open

Feasible? Possible? Ask us!

Always quick help.

* Please complete all required fields.