Layout Directives

This page demonstrates the available layout directives for structuring content.

Image Grid

A responsive grid of images. Default is 3 columns, configurable from 2 to 4.

Two-column variant:

Carousel

A horizontal slider with navigation arrows and dot indicators.

Columns

Multi-column layout. Use --- to separate columns.

Left Column

This is the left column. It supports full markdown: bold, italic, links, and more.

Right Column

This is the right column. Each column gets equal width on desktop and stacks vertically on mobile.

Three columns:

First

Column one content.

Second

Column two content.

Third

Column three content.

Callout

Highlighted boxes for tips, info, warnings, and notes.

Figure

An image with a caption below it.

Details / Accordion

A collapsible section using the native <details> element.

Click to expand

This content is hidden by default and revealed when the user clicks the summary. It supports full markdown inside: bold, italic, lists, and more.

Item one
Item two
Item three

Pre-opened variant:

Already open

This details section starts in the open state because the open attribute is present.

Tabs

Tabbed content panels. Each :::tab inside defines a panel with a label.

This is the overview tab. It shows general information about the topic.

Card

A card with an optional header image and title.

Getting Started

This card has a header image and a title extracted from the first heading. The rest of the content becomes the card body. Cards support full markdown.

Card without image:

Plain Card

A card without a header image. Just a title and body content. Cards get a subtle hover shadow effect.

Steps

A numbered step-by-step guide. Each ### heading starts a new step.

Create your project
Start by setting up a new project directory and initializing it with your preferred package manager.
Configure the theme
Edit the configuration file to set your colors, typography, and layout preferences.
Add your content
Create markdown files in the content directory. Use directives for rich layouts.
Deploy
Build and deploy your site to production using your hosting provider of choice.

YouTube

Embed a YouTube video with a responsive 16 aspect ratio.

Button

Styled link buttons with variant options.

Learn More Get in Touch Our Services

Spacer

Invisible spacing between content sections.

Content before spacer.

Content after a large spacer.

Divider

Decorative horizontal rules with different styles.

Default divider:

Dots variant:

Gradient variant:

Fade variant:

Wave variant:

Inline / Text Directives

These directives work inline within text, using single-colon syntax.

Highlight

This sentence has important text highlighted in yellow. You can also use green highlight or blue highlight or pink highlight.

Badge

Status indicators: Published Draft Archived Featured Default

Kbd

Press Cmd+S to save, Cmd+Shift+P for the command palette, or just Enter to confirm.

Abbr

The CAF is Steff's core model. She works with AI adoption and NLP techniques.