Content Types

18 content types for building pages. Each is a YAML block with required and optional fields.

Layout Components

Build page structure with these flexible layout types.

main
Hero sections, text blocks with images and buttons. The workhorse. Supports graphic_position (left/right), media, and CTA buttons.
grid
Multi-column layout. Nest any content types inside columns. Define column widths and gap spacing. Stacks below a breakpoint.
tabbed_content
Wraps other content types in tabs. Each tab can contain any content_item. Good for organizing dense content.

Feature Showcases

Showcase benefits, capabilities, and social proof.

feature_list
Multi-column feature cards with icons. Good for benefits, capabilities, service offerings. Supports 1-4 columns with icon + title + description.
icon_grid
Grid of icons with labels. Feature lists, tech stacks, tool showcases. Just icons and optional heading — clean and focused.
testimonial_grid
Grid of quote cards. Customer testimonials, reviews, user feedback. Supports author name, role, and optional avatar.
carousel
Image/text slideshow with autoplay. Each item has title, text, and media. Configure autoPlaySpeed and infinite looping.

Specialized Content

Purpose-built types for common patterns.

pricing_table
Pricing plan comparison cards. Define plans with name, price, interval, features list, and CTA. Mark one as highlighted.
timeline
Vertical timeline with year and event fields. Good for company history, product roadmap, milestone tracking.
faq
Expandable accordion for Q&A. Each item has question and answer. Radix Accordion under the hood.
code_block
Syntax-highlighted code with language label. Supports YAML, TypeScript, JavaScript, Bash, and more. Optional line numbers.
alert
Callout box with variants: info, warning, success, danger, note, tip. Optional title field. Good for highlighting key concepts.
contact_form_stub
Contact info with mailto link. Shows email, optional phone and address. Button text is configurable. Not a real form — just contact info.

Media & Dynamic Content

Images, video, maps, and data-driven lists.

media
Standalone image. Supports width, height, alt text, and style (contained or overflow). Use ./relative paths for co-located images.
video
Video player with multiple sources. Supports autoplay, loop, muted, controls, and poster image. Works with local or remote video files.
map
MapLibre GL interactive map. Define center coordinates, zoom level, markers, and layers. Supports map or globe view with optional terrain.
collection_list
Dynamic list from a data collection. Renders cards from YAML data files. Configure columns, limit, and href prefix for linking.

Example: Main Content Type

The most common content type. Hero sections, text + image blocks, CTAs.

yaml
1- type: main
2  label: my-section
3  heading:
4    text: "Section Title"
5    textSize: h2
6  textBlocks:
7    - text: "Your content here. Combine text, media, and buttons."
8      textSize: body1
9  buttons:
10    - text: "Call to Action"
11      variant: contained
12      href: /target
13      bgColor: accent
14  media:
15    type: image
16    src: ./hero.png
17    label: "Hero image"
18  graphic_position: right
19  background: surface

Need help composing pages?

The Otter Raft agents can build content for you. Brand discovery, theme generation, and page composition — all through conversation.