story

// src/components/patterns/stories/story/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/stories/story
additionalProperties: false
type: object
properties:
  image:
    type: string
    format: html
    description: elements/image
  text:
    type: object
    properties:
      heading:
        type: string
      copy:
        type: string
      link:
        type: string
        format: html
        description: elements/link
    required:
      - heading
      - copy
      - link

// src/components/patterns/stories/story/mocks.yaml

$hidden: true
$variants:
  - $name: Image
    image:
      $tpl: elements/image
      $ref: elements/image#2x1_9x16
      picture_classes:
        - Story-picture
  - $name: Text
    text:
      heading: Das ist Finstral.
      copy: >-
        Seit unserer Gründung 1969 ist Finstral in Südtirol zuhause – und heute
        in vielen Ländern Europas präsent: als einer der führenden Hersteller
        von Fenstern, Haustüren und Glaswänden. Mit Premium-Anspruch!
      link:
        $ref: elements/link#with-icon
        $tpl: elements/link
        label: Mehr erfahren

// src/components/patterns/stories/story/story.twig

<div class="Story{% if text %} Story--withText{% endif %}">
	{% if text %}
		<div class="u-container u-grid">
			<div class="Story-textBlock">
				<h2 class="u-typo-HeadlineL Story-heading">{{ text.heading }}</h2>
				<p class="Story-copy">{{ text.copy }}</p>
				{{ text.link }}
			</div>
		</div>
	{% else %}
		{{ image|mira({
			picture_classes: ["Story-picture"]
		}) }}
	{% endif %}
</div>