cards-quick-links

// src/components/patterns/cards-quick-links/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/cards-quick-links
additionalProperties: false
type: object
required:
  - heading
  - items
properties:
  heading:
    type: string
  items:
    type: array
    links:
      type: string
      format: html
      description: patterns/cards-quick-links/link

// src/components/patterns/cards-quick-links/mocks.yaml

heading: Quick links
items:
  - $tpl: patterns/cards-quick-links/link
    $ref: patterns/cards-quick-links/link#window_range
  - $tpl: patterns/cards-quick-links/link
    $ref: patterns/cards-quick-links/link
    image:
      uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links002.png
    link:
      label: Fenster-Planer
      url: /fenster-planer
  - $tpl: patterns/cards-quick-links/link
    $ref: patterns/cards-quick-links/link
    image:
      uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links003.png
    link:
      label: Huisdeurconfigurator
      url: /huisdeurconfigurator
$variants:
  - $name: six_up
    items:
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links004.png
        link:
          label: References
          url: /references
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links005.png
        link:
          label: Complaints
          url: /complaints
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links006.png
        link:
          label: Distribution network
          url: /distribution_network
  - $name: eight_up
    items:
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links004.png
        link:
          label: References
          url: /references
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links005.png
        link:
          label: Complaints
          url: /complaints
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links006.png
        link:
          label: Distribution network
          url: /distribution_network
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links007.png
        link:
          label: Energy savings calculator
          url: /energy_savings_calculator
      - $tpl: patterns/cards-quick-links/link
        $ref: patterns/cards-quick-links/link
        image:
          uri: build/assets/img/dummy/fincl-quick-links/fincl-quick-links008.png
        link:
          label: Barcode scan rental objects Studio
          url: /barcode_scan_studio

// src/components/patterns/cards-quick-links/cards-quick-links.twig

{{ attach_library('finstral_global/pattern-card-quick-links') }}

{% set heading_id = "card-quick-links-" ~ random() ~ "-heading" %}

<section aria-labelledby="{{ heading_id }}" class="u-container u-breakout CardsQuickLinks">
    <h2 class="u-typo-HeadlineL CardsQuickLinks-heading" id="{{ heading_id }}">{{ heading }}</h2>
    <ul class="CardsQuickLinks-list">
        {% for item in items %}
            <li class="CardsQuickLinks-listItem">{{ item }}</li>
        {% endfor %}
    </ul>
</section>