text-image

// src/components/patterns/text-image/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/text-image
additionalProperties: false
type: object
required:
  - image
  - text
properties:
  heading:
    type: string
    format: html
    description: patterns/heading
  image:
    type: string
    format: html
    description: elements/image
  text:
    type: string
    format: html
    description: patterns/rich-text
  cta:
    $ref: /elements/button
  reversed:
    type: boolean

// src/components/patterns/text-image/mocks.yaml

text:
  $tpl: patterns/rich-text
  content: >-
    <h2>Text image combination</h2> <p>Pariatur deserunt eu anim minim ea
    ullamco minim enim id ad. Elit ullamco cillum minim fugiat esse ea. Nostrud
    in consectetur irure eu consectetur cillum nisi nisi amet deserunt magna
    consequat cillum ad. Sit ullamco minim aliqua non ipsum dolore. Aute et
    nulla ipsum quis aute consequat ad sit. Excepteur labore culpa consequat
    sint velit cupidatat.</p>
image:
  $tpl: elements/image
  uri: src/img/dummy/coding.webp
  width: 458
  height: 485
  alt: Rotkohl
cta:
  label: A meaningful CTA
  url: url
$variants:
  - $name: Reversed
    reversed: true
    image:
      uri: src/img/dummy/team-picture.webp
      alt: Schinken, Salami, Kartoffeln und Saure Gurken
  - $name: With heading
    heading:
      $tpl: patterns/heading
      $ref: patterns/heading#h2
      heading: Text Image
    text:
      $tpl: patterns/rich-text
      content: >-
        <h3>Text image combination</h3> <p>Pariatur deserunt eu anim minim ea
        ullamco minim enim id ad. Elit ullamco cillum minim fugiat esse ea.
        Nostrud in consectetur irure eu consectetur cillum nisi nisi amet
        deserunt magna consequat cillum ad. Sit ullamco minim aliqua non ipsum
        dolore. Aute et nulla ipsum quis aute consequat ad sit. Excepteur labore
        culpa consequat sint velit cupidatat.</p>

// src/components/patterns/text-image/text-image.twig

{{ attach_library("circle_dot/pattern-text-image") }}
<div class="TextImage">
	{% if heading %}
		<div class="TextImage-heading">
			{{ heading }}
		</div>
	{% endif %}
	<div class="TextImage-content TextImage-content--{% if reversed %}reversed{% else %}default{% endif %}">
		<div class="TextImage-text">
			{{ text }}
			{% if cta %}
				<div class="TextImage-cta">
					{% include "@elements/button/button.twig" with cta|merge({
						modifiers: ["secondary"],
					}) only %}
				</div>
			{% endif %}
		</div>
		<div class="TextImage-image">
			{{ image }}
		</div>
	</div>
</div>