Material Header

Information

Folder
src/components/patterns/material-header

Files

Schema
// src/components/patterns/material-header/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/publication-header
required:
  - headline
  - subline
  - label
properties:
  headline:
    type: string
  subline:
    type: string
  label:
    type: string
Mocks
// src/components/patterns/material-header/mocks.yaml

headline: Zum Abschminken – Plastik in Kosmetik
subline: >-
  Drei Viertel der von Greenpeace untersuchten Kosmetika sind mit Plastik
  belastet.
label: Publikationen
Template
// src/components/patterns/material-header/material-header.html.twig

<section class="MaterialHeader">
  <div class="MaterialHeader-headlines u-container u-grid">
    <h1 class="MaterialHeader-headline">{{ headline }}</h1>
    <p class="MaterialHeader-subline u-typo-big-copy-subline">{{ subline }}</p>
  </div>
  {% include "@patterns/article-meta-info/article-meta-info.html.twig" with {format: label, class: "MaterialHeader-label"} only %}
</section>

Variants

default
Open

Zum Abschminken – Plastik in Kosmetik

Drei Viertel der von Greenpeace untersuchten Kosmetika sind mit Plastik belastet.