text-image

Information

Folder: src/components/patterns/text-image

Files

Schema

// 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

Mocks

// 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: patterns/image
  image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog_image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog: true,
  dialog_title: Dialog title
cta:
  label: A meaningful CTA
  url: url
$variants:
  - $name: Reversed
    reversed: true
    image:
      $tpl: patterns/image
      image:
        uri: src/img/dummy/team-picture.webp
        alt: Schinken, Salami, Kartoffeln und Saure Gurken
      dialog_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>
  - $name: Video
    image:
      $tpl: elements/video
      $ref: elements/video

Template

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

<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">
			{% include "@patterns/rich-text/rich-text.twig" with {content: text} only %}
			{% if cta %}
				<div class="TextImage-cta">
					{% include "@elements/button/button.twig" with cta|merge({
						modifiers: ["secondary"],
					}) only %}
				</div>
			{% endif %}
		</div>
		<div class="TextImage-media">
			{{ image|raw }}
			{{ caption }}
		</div>
	</div>
</div>

Variants

default

Open

default mock data

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: patterns/image
  image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog_image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog: true,
  dialog_title: Dialog title
cta:
  label: A meaningful CTA
  url: url

Text image combination

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.

A meaningful CTA

Reversed

Open

Reversed mock data

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: patterns/image
  image:
    uri: src/img/dummy/team-picture.webp
    width: 458
    height: 305
    alt: Schinken, Salami, Kartoffeln und Saure Gurken
  dialog_image:
    uri: src/img/dummy/team-picture.webp
    width: 458
    height: 305
    alt: Schinken, Salami, Kartoffeln und Saure Gurken
  dialog: true,
  dialog_title: Dialog title
cta:
  label: A meaningful CTA
  url: url
reversed: true

Text image combination

A meaningful CTA

With heading

Open

With heading mock data

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>
image:
  $tpl: patterns/image
  image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog_image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog: true,
  dialog_title: Dialog title
cta:
  label: A meaningful CTA
  url: url
heading:
  $tpl: patterns/heading
  $ref: patterns/heading#h2
  heading: Text Image

Text Image

Text image combination

A meaningful CTA

Video

Open

Video mock data

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/video
  image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog_image:
    uri: src/img/dummy/coding.webp
    width: 458
    height: 305
    alt: Rotkohl
  dialog: true,
  dialog_title: Dialog title
  $ref: elements/video
cta:
  label: A meaningful CTA
  url: url

Text image combination

A meaningful CTA

iPhone X
Please accept marketing cookies to play this video.