slide-benefits

// src/components/patterns/story-slider/slide-benefits/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/story-slider/slide-benefits
type: object
required:
  - benefits
  - color_scheme
  - title
additionalProperties: false
properties:
  color_scheme:
    type: string
    enum:
      - white
      - jakobskraut
      - terrakotta
      - schwarzesche
      - latsche
      - schlern
      - estrich
      - leinen
      - sandstein
  overline:
    type: string
  title:
    type: string
  benefits:
    type: array
    items:
      type: string
  contact:
    format: html
    type: string
    description: /elements/card-user-profile

// src/components/patterns/story-slider/slide-benefits/mocks.yaml

color_scheme: white
overline: Vorteile
title: Finstral bietet Monteuren hohe Standards
benefits:
  - Ausbildung
  - Ausstattung
  - Bezahlung
  - Arbeitsplanung
  - Qualitätsprodukte
contact:
  $ref: elements/card-user-profile#minimal
  $tpl: elements/card-user-profile
  classes:
    - StorySliderSlideBenefits-contact
$variants:
  - $name: No contact
    contact: null
    color_scheme: jakobskraut
  - $name: Short list
    benefits:
      - Ausbildung
      - Ausstattung
      - Bezahlung
    $opts:
      benefits: overwrite
    color_scheme: schlern

// src/components/patterns/story-slider/slide-benefits/slide-benefits.twig

<div class="StorySliderSlideBenefits StorySliderSlide--colorScheme{{ color_scheme|capitalize }}">
	<h2 class="StorySliderSlideBenefits-title">
		{%- if overline -%}
			<span class="StorySliderSlideBenefits-overline">{{ overline }}</span>
			<span class="visually-hidden"> : </span>
		{% endif %}

		{{ title }}
	</h2>

	<ul class="StorySliderSlideBenefits-list">
		{%- for benefit in benefits -%}
			<li class="StorySliderSlideBenefits-item">
				{% include "@elements/icon/icon.twig" with {
					classes: ["StorySliderSlideBenefits-icon"],
					name: "arrow_forward",
				} only %}
				{{ benefit }}
			</li>
		{%- endfor -%}
	</ul>

	{{ contact|mira({classes: ["StorySliderSlideBenefits-contact"]}) }}
</div>