card-service

// src/components/patterns/cloud-services/card-service/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/cloud-services/card-service
additionalProperties: false
required:
  - cta
  - description
  - heading
properties:
  cta:
    format: html
    type: string
    description: /elements/link
  description:
    type: string
  heading:
    type: string
  support_link:
    format: html
    type: string
    description: /elements/link

// src/components/patterns/cloud-services/card-service/mocks.yaml

$variants:
  - $name: default
    cta:
      $tpl: /elements/link
      $ref: /elements/link#with-icon
      label: All information
      url: /extranet
    description: Digital library of all Finstral documents.
    heading: Extranet
  - $name: With support link
    cta:
      $tpl: /elements/link
      $ref: /elements/link#with-icon
      label: Your leads
      url: /contacts
    description: Save and manage contact requests.
    heading: Contacts
    support_link:
      $tpl: /elements/link
      classes:
        - CloudServicesCardService-link
      label: Support
      size: TextM
      url: https://support.finstral.com/

// src/components/patterns/cloud-services/card-service/card-service.twig

<div class="CloudServicesCardService">
	<hgroup class="CloudServicesCardService-content">
		<h2 class="u-typo-HeadlineM">{{ heading }}</h2>
		<p class="CloudServicesCardService-description">{{ description }}</p>
	</hgroup>

	<ul class="CloudServicesCardService-links">
		<li>
      {{ cta }}
		</li>
		{% if support_link %}
			<li>
        {{ support_link|mira({
          classes: [
            "CloudServicesCardService-link",
          ]
        }) }}
			</li>
		{% endif %}
	</ul>
</div>