link-card

// src/components/elements/link-card/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/link-card
additionalProperties: false
type: object
required:
  - image
  - link
properties:
  image:
    type: string
    format: html
    description: /elements/image
  link:
    additionalProperties: false
    type: object
    required:
      - label
      - url
    properties:
      label:
        type: string
      url:
        format: uri-reference
        type: string
      target:
        type: string

// src/components/elements/link-card/mocks.yaml

$hidden: true
image:
  $tpl: /elements/image
  uri: /build/assets/img/dummy/fincl-quick-links/fincl-quick-links001.png
  width: 267
  height: 178
  alt: ''
link:
  url: /windows-range
  target: _blank
$variants:
  - $name: Extranet Category Card
    link:
      label: Marketing
  - $name: Cloud Quicklink Card
    link:
      label: Window range

// src/components/elements/link-card/link-card.twig

<a
	class="u-link u-link--neutral LinkCard"
	href="{{ link.url }}"
	{% if link.target %} target="{{ link.target }}"{% endif %}
>
	{{ image }}
	<span class="LinkCard-label">{{ link.label }}</span>
</a>