Page Builder Blocks

Retrail renders components sequentially from the blocks array in settings.json. You can arrange blocks in any order, duplicate blocks, or disable blocks with "enabled": false.

Hero Block

The introductory profile card featuring avatar, name, tagline, status indicator, and call-to-action buttons.

{
  "type": "hero",
  "enabled": true,
  "name": "Example Name",
  "headline": "Example Title & Profession",
  "bio": "Short personal bio or mission statement.",
  "avatar": "https://example.com/avatar.jpg",
  "avatarPosition": "left",
  "avatarSize": 56,
  "statusText": "Available for projects",
  "statusColor": "neon-green",
  "statusEnabled": true,
  "align": "left",
  "actions": [
    {
      "label": "Get in touch",
      "url": "mailto:example@example.com",
      "variant": "filled",
      "icon": "mail",
      "enabled": true
    }
  ]
}

Field	Type	Description
`avatarPosition`	`string`	Position of profile image: `"left"`, `"right"`, or `"top"` (default).
`avatarSize`	`number`	Size in pixels (defaults to `56` when inline, `84` when top).
`statusColor`	`string`	Color for the status badge dot (e.g. `"neon-green"`, `"teal"`).
`statusEnabled`	`boolean`	Set to `false` to hide the status indicator.
`align`	`string`	Alignment: `"left"`, `"center"`, or `"right"`.

Projects Block

A responsive showcase for projects, applications, and tools.

{
  "type": "projects",
  "enabled": true,
  "title": "Projects",
  "description": "Featured applications and tools.",
  "layout": "grid",
  "columns": 2,
  "items": [
    {
      "id": "project-1",
      "title": "Example Project",
      "description": "High-performance service with status tracking.",
      "image": "",
      "tags": ["Next.js", "Mantine", "TypeScript"],
      "featured": true,
      "enabled": true,
      "stats": [
        { "label": "Status", "value": "Online", "enabled": true }
      ],
      "links": [
        { "label": "Live Demo", "url": "https://example.com", "icon": "external", "enabled": true }
      ]
    }
  ]
}

Field	Type	Description
`layout`	`string`	`"grid"` for responsive cards or `"list"` for single-column cards.
`columns`	`number`	Grid column count: `1`, `2`, or `3`.
`featured`	`boolean`	Displays a prominent "Featured" badge on the project card.

Skills Block

Categorized skill badges with proficiency tags and icons.

{
  "type": "skills",
  "enabled": true,
  "title": "Technical Skills",
  "description": "Core competencies and tools.",
  "categories": [
    {
      "name": "Frontend",
      "enabled": true,
      "skills": [
        { "name": "React", "level": "Advanced", "icon": "code", "enabled": true },
        { "name": "TypeScript", "level": "Advanced", "icon": "terminal", "enabled": true }
      ]
    }
  ]
}

Experience Block

A career and education timeline with roles, company links, dates, and technology tags.

{
  "type": "experience",
  "enabled": true,
  "title": "Work Experience",
  "description": "Previous engineering roles.",
  "items": [
    {
      "role": "Senior Software Engineer",
      "company": "Example Company",
      "period": "2023 - Present",
      "location": "Remote",
      "description": "Architected low-latency monitoring platforms.",
      "tags": ["TypeScript", "Docker"],
      "url": "https://example.com",
      "enabled": true
    }
  ]
}

Stats Block

Highlights and metric counters displayed in equalized cards.

{
  "type": "stats",
  "enabled": true,
  "items": [
    { "label": "Experience", "value": "5+", "description": "Years active", "icon": "briefcase", "enabled": true },
    { "label": "Projects", "value": "25+", "description": "Shipped applications", "icon": "code", "enabled": true }
  ]
}

Section Block

Clean headers with titles, subtitles, and badges to organize page sections.

{
  "type": "section",
  "enabled": true,
  "title": "Section Title",
  "description": "Optional lead paragraph.",
  "badge": "Category",
  "align": "left"
}

Separator Block

Visual horizontal divider line.

{
  "type": "separator",
  "enabled": true,
  "variant": "solid",
  "label": ""
}

Field	Type	Description
`variant`	`string`	Line style: `"solid"`, `"dashed"`, or `"dotted"`.
`label`	`string`	Optional text rendered at the center of the divider.

Testimonials Block

Client quotes, endorsements, and recommendations.

{
  "type": "testimonials",
  "enabled": true,
  "title": "Client Endorsements",
  "description": "What partners say.",
  "items": [
    {
      "quote": "Consistently delivers clean, performant software.",
      "author": "Example Client",
      "role": "Product Director",
      "company": "Example Inc",
      "avatar": "",
      "enabled": true
    }
  ]
}

Contact Block

High-impact call-to-action card with a direct mail action button.

{
  "type": "contact",
  "enabled": true,
  "title": "Let's build something together",
  "description": "Feel free to reach out for project inquiries.",
  "email": "example@example.com",
  "buttonText": "Send an email",
  "badge": "Connect"
}

Socials Block

Pill buttons linking to social platforms with official brand icons.

{
  "type": "socials",
  "enabled": true,
  "align": "center",
  "items": [
    { "platform": "discord", "label": "Discord", "url": "https://example.com/discord", "enabled": true },
    { "platform": "github", "label": "GitHub", "url": "https://example.com/github", "enabled": true },
    { "platform": "x", "label": "X", "url": "https://example.com/x", "enabled": true }
  ]
}

Supported Brand Platforms

Font Awesome: discord, github, x, twitter, linkedin, youtube, twitch, bluesky, reddit, steam, spotify, instagram, tiktok.
General Lucide: globe, mail, share, user.

Image and Text Blocks

image: Displays an image banner or screenshot with optional caption, height, and border radius.
text: Custom text paragraph with customizable size ("sm", "md", "lg") and alignment ("left", "center", "right").

Page Builder Blocks

On this page