Highlight

Information

Folder: src/components/patterns/highlight

Files

Schema

// src/components/patterns/highlight/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/highlight
additionalProperties: false
required:
  - text
properties:
  headline:
    type: string
  headline_background:
    type: string
    enum:
      - marker
      - zigzag
      - squiggle
  media:
    $ref: /elements/media-template
  text:
    type: string
  textblock_align:
    type: string
    enum:
      - left
      - right
  button:
    $ref: /elements/button
  background:
    type: string
    enum:
      - natural
      - white
      - texture

Mocks

// src/components/patterns/highlight/mocks.yaml

$hidden: true
text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
$variants:
  - $name: with natural bg
    background: natural
  - $name: with texture bg
    background: texture
  - $name: with white bg
    background: white
  - $name: with headline
    headline: Das ist eine Headline
    background: natural
  - $name: with marker headline
    headline: Das ist eine Headline
    background: natural
    headline_background: marker
  - $name: with long marker headline
    headline: Das ist eine Highlight Headline mit vier Zeilen
    background: natural
    headline_background: marker
  - $name: with zigzag headline
    headline: Das ist eine Headline
    background: natural
    headline_background: zigzag
  - $name: with long zigzag headline
    headline: Das ist eine Highlight Headline mit vier Zeilen
    background: natural
    headline_background: zigzag
  - $name: with squiggle headline
    headline: Das ist eine Headline
    background: natural
    headline_background: squiggle
  - $name: with long squiggle headline
    headline: Das ist eine Highlight Headline mit vier Zeilen
    background: natural
    headline_background: squiggle
  - $name: with headline and button
    headline: Das ist eine Headline
    background: natural
    button:
      $ref: /elements/button#default-link
  - $name: with headline and donation button
    headline: Das ist eine Headline
    background: natural
    button:
      $ref: /elements/button#default-link
      mutation: donation
  - $name: with media
    background: natural
    media:
      $ref: /elements/media-template#landscape-image-full
  - $name: with media and button
    background: natural
    button:
      $ref: /elements/button#default-link
    media:
      $ref: /elements/media-template#landscape-image-full
  - $name: with media and textblock align left
    background: natural
    button:
      $ref: /elements/button#default-link
    media:
      $ref: /elements/media-template#landscape-image-full
    textblock_align: left
  - $name: with long marker headline and textblock align left
    background: natural
    button:
      $ref: /elements/button#default-link
    headline: Das ist eine Highlight Headline mit vier Zeilen
    textblock_align: left
    headline_background: marker
  - $name: with long zigzag headline and textblock align left
    background: natural
    button:
      $ref: /elements/button#default-link
    headline: Das ist eine Highlight Headline mit vier Zeilen
    textblock_align: left
    headline_background: zigzag
  - $name: with long squiggle headline and textblock align left
    background: natural
    button:
      $ref: /elements/button#default-link
    headline: Das ist eine Highlight Headline mit vier Zeilen
    textblock_align: left
    headline_background: squiggle

Template

// src/components/patterns/highlight/highlight.html.twig

<div class="Highlight{% if textblock_align %} Highlight--{{ textblock_align }}{% endif %}{% if media %} Highlight--media{% endif %}{% if background %} Highlight--{{ background }}{% endif %}">
  <div class="Highlight-inner u-grid u-container">
    {% if headline %}
      <h2 class="Highlight-headline{% if headline_background %} Highlight-headline--{{ headline_background }}{% endif %}">{{ headline }}</h2>
    {% endif %}
    {% if media %}
      {% include "@elements/media-template/media-template.html.twig" with media|merge({class: "Highlight-media"}) only %}
    {% endif %}
    <div class="Highlight-content">
      <p class="Highlight-text u-typo-big-copy-subline">{{ text }}</p>
      {% if button %}
        {% include "@elements/button/button.html.twig" with button|merge({class: "Highlight-button Tracking--highlight-button"}) only %}
      {% endif %}
    </div>
  </div>
</div>

Variants

with natural bg

Open

with natural bg mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: natural

Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.

with texture bg

Open

with texture bg mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: texture

with white bg

Open

with white bg mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: white

with headline

Open

with headline mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Headline
background: natural

Das ist eine Headline

with marker headline

Open

with marker headline mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Headline
background: natural
headline_background: marker

Das ist eine Headline

with long marker headline

Open

with long marker headline mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Highlight Headline mit vier Zeilen
background: natural
headline_background: marker

Das ist eine Highlight Headline mit vier Zeilen

with zigzag headline

Open

with zigzag headline mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Headline
background: natural
headline_background: zigzag

Das ist eine Headline

with long zigzag headline

Open

with long zigzag headline mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Highlight Headline mit vier Zeilen
background: natural
headline_background: zigzag

Das ist eine Highlight Headline mit vier Zeilen

with squiggle headline

Open

with squiggle headline mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Headline
background: natural
headline_background: squiggle

Das ist eine Headline

with long squiggle headline

Open

with long squiggle headline mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Highlight Headline mit vier Zeilen
background: natural
headline_background: squiggle

Das ist eine Highlight Headline mit vier Zeilen

with headline and button

Open

with headline and button mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Headline
background: natural
button:
  $ref: /elements/button#default-link

Das ist eine Headline

Label Link

with headline and donation button

Open

with headline and donation button mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
headline: Das ist eine Headline
background: natural
button:
  $ref: /elements/button#default-link
  mutation: donation

Das ist eine Headline

Label Link

with media

Open

with media mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: natural
media:
  $ref: /elements/media-template#landscape-image-full

Alternative text — © Marina Musterfrau | Musterland und Musterthema

Mit einer Höhe von 654 px für das Seitenverhältnis 3:2 wird angestrebt, dass das gesamte Bild innerhalb des Viewports betrachtet werden kann.

with media and button

Open

with media and button mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: natural
button:
  $ref: /elements/button#default-link
media:
  $ref: /elements/media-template#landscape-image-full

Label Link

with media and textblock align left

Open

with media and textblock align left mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: natural
button:
  $ref: /elements/button#default-link
media:
  $ref: /elements/media-template#landscape-image-full
textblock_align: left

Label Link

with long marker headline and textblock align left

Open

with long marker headline and textblock align left mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: natural
button:
  $ref: /elements/button#default-link
headline: Das ist eine Highlight Headline mit vier Zeilen
textblock_align: left
headline_background: marker

Das ist eine Highlight Headline mit vier Zeilen

Label Link

with long zigzag headline and textblock align left

Open

with long zigzag headline and textblock align left mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: natural
button:
  $ref: /elements/button#default-link
headline: Das ist eine Highlight Headline mit vier Zeilen
textblock_align: left
headline_background: zigzag

Das ist eine Highlight Headline mit vier Zeilen

Label Link

with long squiggle headline and textblock align left

Open

with long squiggle headline and textblock align left mock data

text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig
  dargestellt werden.
background: natural
button:
  $ref: /elements/button#default-link
headline: Das ist eine Highlight Headline mit vier Zeilen
textblock_align: left
headline_background: squiggle

Das ist eine Highlight Headline mit vier Zeilen

Label Link