cards-list

// src/components/patterns/cards-list/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/cards-list
additionalProperties: false
type: object
required:
  - list
  - heading
properties:
  heading:
    type: string
  hidden_heading:
    type: boolean
  list:
    type: array
    items:
      type: string
      format: html
      description: patterns/teaser-list/teaser
  classes:
    type: array
    items:
      type: string

// src/components/patterns/cards-list/mocks.yaml

list:
  - $tpl: elements/card
    $ref: elements/card#with-image
  - $tpl: elements/card
    $ref: elements/card#with-image
  - $tpl: elements/card
    $ref: elements/card#with-image
  - $tpl: elements/card
    $ref: elements/card#with-image
hidden_heading: true
heading: Cards List
$variants:
  - $name: With visible heading
    hidden_heading: false

// src/components/patterns/cards-list/cards-list.twig

{{ attach_library('finstral_global/pattern-cards-list') }}

<div class="CardsList u-container u-grid u-breakout {{ classes|join(" ") }}">
	<h2 class="CardsList-heading u-typo-HeadlineXL{% if hidden_heading %} u-hiddenVisually{% endif %}">
		{{ heading }}
	</h2>
	<ol class="CardsList-list js-CardsList-list">
		{% for item in list %}
			<li class="CardsList-item">{{ item }}</li>
		{% endfor %}
	</ol>
</div>