// src/components/patterns/hero/schema.yaml

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

// src/components/patterns/hero/mocks.yaml

sub_heading: Finstral Handbooks
heading: Contacts
copy: >-
  <p>Proident quis adipisicing ut consectetur non pariatur consequat. Est tempor
  nostrud anim fugiat laboris sit ut elit ex deserunt reprehenderit. Quis sunt
  consequat non ea cillum est labore velit mollit cupidatat id ex aliquip. Est
  fugiat mollit cillum exercitation excepteur adipisicing sunt.</p>
image:
  $tpl: elements/image
  uri: src/img/dummy/hero.webp
$variants:
  - $name: video
    image:
      $tpl: elements/video
      $ref: elements/video

// src/components/patterns/hero/hero.twig

<div class="Hero">
	<div class="Hero-content u-container">
		<div class="Hero-contentInner">
			<h1>
				<span class="Hero-kicker">{{ sub_heading|raw }}</span><span class="u-hiddenVisually">:</span>
				<span class="Hero-heading">{{ heading|raw }}</span>
			</h1>
			{% if copy %}
				<div class="Hero-copy">
					{{ copy|raw }}
				</div>
			{% endif %}
		</div>
	</div>
	<div class="Hero-media">
		{{ image|raw }}
	</div>
</div>