Front Matter

Front Matter allows you to extract YAML data from specially-formatted comments at the top of your twig templates. This is especially useful for including a living pattern library inside your Craft CMS project.

Defining data

{#---
title: Link
description: >
    This is a tiny component for rendering a single link.

        {% include "_components/link" with {
            url: 'https://www.google.com',
            text: 'Google',
        } %}
variables:
    text: The text to use as the body of the link
    url: The url of the target
examples:
    - text: Craft CMS
      url: https://www.craftcms.com
    - text: Google
      url: https://www.google.com
---#}

<a href="{{ url }}">{{ text }}</a>

Accessing Data

You can access the YAML data as an array from other templates with craft.frontMatter.parse(template):

{% set component = craft.frontMatter.parse("_components/link") %}

<h2>{{ component.title }}</h2>

{{ component.description|markdown }}