Frontmatter

The Elements CMS uses YAML Frontmatter to define metadata and editable fields for your Markdown content. This is a block of structured data placed at the top of a Markdown file, enclosed by triple dashes.

Here's an example file containing frontmatter, and a paragraph of content.

sample.md

---
title: Elements CMS Example
date: 2025-08-07
author: Jonny Appleseed
tags: [introduction, getting-started]
---

## Example INtroduction
Elements CMS lets you manage content using *simple Markdown* files with frontmatter.
You can write normal Markdown below the frontmatter, and **Elements** will handle the rest.

You can learn more about defining Frontmatter here

Date Format

The YAML frontmatter date uses the following format, year-month-day in the Elements CMS.

Time is also respected for date filtering, so you can now use "2025-08-21 17:00". The time is currently in UTC, customising the timezone is not currently supported.

No Quotes Needed If

Whether or not you need to use quotes depends on what's inside the value. You can safely skip quotes for simple strings:

title: My Blog Post
date: 2025-08-06
author: Julia

---

Use Quotes If

1. The value contains special characters like :, @, #, or {}:

title: “My Favorite Tools: Tailwind, Alpine, and Elements”

1. The value **starts with a number** that might be misread (like a version number):

version: “1.0”

1. The value looks like a **boolean**, `null`, or includes **colons/time values**:

status: “false”

time: “14:30”

1. The value has **line breaks** (rare, but possible in multiline strings).

Safe Rule of Thumb

If you’re unsure, wrap it in quotes. You won’t break anything by quoting strings:

title: “I Just Used Tailwind UI in Elements – And It’s a Game Changer!”

Setting Default Frontmatter

If there is no default value the CMS will output nothing. You can set a default for any missing frontmatter properties like so {{item.missingProp|default("Default Text")}} .

Defining an Array of Images

The following example defines an array of remote images in the frontmatter for use in a photo gallery:

gallery:
- src: https://images.unsplash.com/photo-1626692987335-15dfc7a6f4b2?q=80&w=4448&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
  title: 'Chichen Itza: Ancient Precision - View 1'
  alt: 'Chichen Itza: Ancient Precision image 1'
- src: https://images.unsplash.com/photo-1544214889-03dfb1348b48?q=80&w=5184&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
  title: 'Chichen Itza: Ancient Precision - View 2'
  alt: 'Chichen Itza: Ancient Precision image 2'
- src: https://plus.unsplash.com/premium_photo-1755105194454-21564954e25e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1fHx8ZW58MHx8fHx8$0
  title: 'Chichen Itza: Ancient Precision - View 3'
  alt: 'Chichen Itza: Ancient Precision image 3'

To display the above array of images use the following code in a custom component:

@raw()
<ul class="flex gap-2">
{% for image in item.gallery %}
    <li><img src="{{ image.src }}" class="w-20 h-auto aspect-[1]" />
{% else %}
    <li>No image.
{% endfor %}
</ul>
@endraw