tags

// src/components/patterns/tags/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tags
additionalProperties: false
type: object
required:
  - tags
properties:
  heading:
    type: string
    format: html
    description: patterns/heading
  tags:
    type: array
    items:
      $ref: /patterns/tags/tag

// src/components/patterns/tags/mocks.yaml

tags:
  - $ref: patterns/tags/tag
  - label: Another tag
  - $ref: patterns/tags/tag#with-link
  - $ref: patterns/tags/tag
  - label: Another tag
  - $ref: patterns/tags/tag#with-link
  - $ref: patterns/tags/tag
  - label: Another tag
  - $ref: patterns/tags/tag#with-link
  - $ref: patterns/tags/tag
  - label: Another tag
  - $ref: patterns/tags/tag#with-link
  - $ref: patterns/tags/tag
  - label: Another tag
  - $ref: patterns/tags/tag#with-link
  - $ref: patterns/tags/tag
  - label: Another tag
  - $ref: patterns/tags/tag#with-link
$variants:
  - $name: With heading
    heading:
      $tpl: patterns/heading
      $ref: patterns/heading#h2
      heading: Tags

// src/components/patterns/tags/tags.twig

<div class="Tags">
	{% if heading %}
		<div class="Tags-heading">
			{{ heading }}
		</div>
	{% endif %}
	<ul class="Tags-list">
		{% for tag in tags %}
			<li>
				{% include "@patterns/tags/tag/tag.twig" with tag only %}
			</li>
		{% endfor %}
	</ul>
</div>