Velvet Blocks (.vlt)

VelvetCMS supports .vlt files with block switches for mixed content types.

Syntax #

@markdown
# Title

Paragraph with **bold** text.

@html
<div class="custom">Raw HTML</div>

@component('hero')
title: Welcome
eyebrow: Docs
@endcomponent

@text
Plain text is escaped automatically.

If no block is defined, Markdown is assumed, which makes migration from .md to .vlt straightforward.

Supported blocks #

Components #

@component() lets you drop a view partial into page content without switching to raw @include() calls inside the page body.

@component('hero')
title: Welcome to VelvetCMS
eyebrow: Docs
cta_url: /get-started
cta_label: Start here
@endcomponent

The block body is parsed as YAML and passed to the view as props.

Name resolution #

• @component('hero') resolves to the view components.hero
• @component('marketing.hero') resolves to the view marketing.hero

That means a simple component name uses the components. prefix automatically.

Example component file #

If your page uses @component('hero'), a matching template might live at:

user/views/components/hero.velvet.php

Example:

<section class="hero">
		<p>{{ $eyebrow ?? '' }}</p>
		<h1>{{ $title }}</h1>

		@if(!empty($cta_url) && !empty($cta_label))
				<p><a href="{{ $cta_url }}">{{ $cta_label }}</a></p>
		@endif
</section>

Passing props #

Use YAML in the component body:

@component('callout')
title: Important
tone: warning
items:
	- Back up before migrating
	- Rebuild the page index after bulk imports
@endcomponent

Those values are available as template variables inside the component view.

Fallback behavior #

If the body is not valid YAML, Core falls back to passing the raw body as a single content prop.

@component('notice')
This entire block becomes the `content` variable.
@endcomponent

When to use it #

Use @component() when:

• editors need reusable content blocks inside .vlt pages
• a page should pass structured props into a reusable view partial
• you want cleaner content files than embedding raw include directives

Use @html for literal markup and @markdown when the content is mostly prose.

Frontmatter #

Frontmatter works the same as Markdown files:

---
title: My Page
layout: custom
---

@markdown
# {{ title }}

Related #

• Template Syntax for the underlying @include() directive and view syntax
• ContentParser API for the parser behavior behind .vlt blocks