Translating content...
Translating content...
This page demonstrates the available layout directives for structuring content.
A responsive grid of images. Default is 3 columns, configurable from 2 to 4.
Two-column variant:
A horizontal slider with navigation arrows and dot indicators.
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.
Highlighted boxes for tips, info, warnings, and notes.
An image with a caption below it.
A beautiful sunset over a calm landscape.
A collapsible section using the native <details> element.
This content is hidden by default and revealed when the user clicks the summary. It supports full markdown inside: bold, italic, lists, and more.
Pre-opened variant:
This details section starts in the open state because the open attribute is present.
Tabbed content panels. Each :::tab inside defines a panel with a label.
This is the overview tab. It shows general information about the topic.
A card with an optional header image and title.
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:
A card without a header image. Just a title and body content. Cards get a subtle hover shadow effect.
A numbered step-by-step guide. Each ### heading starts a new step.
Start by setting up a new project directory and initializing it with your preferred package manager.
Edit the configuration file to set your colors, typography, and layout preferences.
Create markdown files in the content directory. Use directives for rich layouts.
Build and deploy your site to production using your hosting provider of choice.
Embed a YouTube video with a responsive 16 aspect ratio.
Styled link buttons with variant options.
Learn More Get in Touch Our ServicesInvisible spacing between content sections.
Content before spacer.
Content after a large spacer.
Decorative horizontal rules with different styles.
Default divider:
Dots variant:
Gradient variant:
Fade variant:
Wave variant:
These directives work inline within text, using single-colon syntax.
This sentence has important text highlighted in yellow. You can also use green highlight or blue highlight or pink highlight.
Status indicators: Published Draft Archived Featured Default
Press Cmd+S to save, Cmd+Shift+P for the command palette, or just Enter to confirm.
The CAF is Steff's core model. She works with AI adoption and NLP techniques.