cards-quick-links

Information

Folder
src/components/patterns/cards-quick-links

Files

Schema 
// 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
Mocks 
// 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
      target: _blank
  - $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: Huisdeurconfigurator
      url: /huisdeurconfigurator
      target: _blank
$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
          target: _blank
      - $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
          target: _blank
      - $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
          target: _blank
  - $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
          target: _blank
      - $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
          target: _blank
      - $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
          target: _blank
      - $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: Energy savings calculator
          url: /energy_savings_calculator
          target: _blank
      - $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
          target: _blank
Template 
// 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>

Variants

default
Open
six_up
Open
eight_up
Open