Chatbot Teaser

// src/components/patterns/chatbot-teaser/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/chatbot-teaser
additionalProperties: false
required:
  - text
  - headline
  - button
properties:
  headline:
    type: string
  text:
    type: string
  button:
    $ref: /elements/button

// src/components/patterns/chatbot-teaser/mocks.yaml

headline: Hi, du hast eine fixe Frage?
text: >-
  Ein wichtiges aber schwierig zu integrierendes Feld sind
  OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können
  eingebaute Kapitälchen.
button:
  $ref: /elements/button

// src/components/patterns/chatbot-teaser/chatbot-teaser.html.twig

{% set image_url = asset_path().toString() ~ "images/chatbot.svg" %}

<div class="ChatbotTeaser js-ChatbotTeaser u-grid u-container">
  <div class="ChatbotTeaser-imageContainer">
    <img class="ChatbotTeaser-image" aria-hidden="true" src="{{ image_url }}" alt="Chatbot Avatar">
  </div>
  <div class="ChatbotTeaser-content">
    <h2 class="ChatbotTeaser-headline">{{ headline }}</h2>
    <p class="ChatbotTeaser-text u-typo-big-copy-subline">{{ text }}</p>
    {% include "@elements/button/button.html.twig" with button|merge({class: "ChatbotTeaser-button js-ChatbotTeaser-button"}) only %}
  </div>
</div>