search
Buy LicenseDownload Trial

Frontmatter

Using structured data in Markdown files

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

hashtag
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.

hashtag
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:

hashtag
Use Quotes If

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

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

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

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

hashtag
Safe Rule of Thumb

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

hashtag
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")}} .

hashtag
Image Front Matter

You can define images in your front matter using nested keys. This allows you to store multiple pieces of information about an image, rather than just a single file path. The following keys are supported inside an image object:

  • src – the path or URL to the image

  • title – the image title (optional, often used for tooltips or accessibility)

  • width – the image width in pixels (optional)

  • height – the image height in pixels (optional)

  • alt – a short text description of the image, used for accessibility

The src value can point to a local file within your project or to a remote image hosted online.

You can name the image object anything you like, it doesn’t have to be called image. For example, banner:, thumbnail:, or photo: will all work the same way.

And here’s the same example using a custom key:

When you reference this data in your template, you can access each nested property directly, for example, in a custom component you could do the following:

hashtag
Defining an Array of Images

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

The following example displays as array of local images for use in a Gallery or Image Slider.

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

PreviousMarkdownNextStyling Lists

Last updated

Was this helpful?