Core Components

Reference for all built-in layout components and their data structures.

• Overview
• Button
• Grid
• Column Widths
• Heading
• HTML
• Image
• Link
• Markdown
• Richtext
• Section
• Spacer
• Component Structure

Overview

The values stored for each Layout field component are described by example in this section. When fetching data using Cockpit's API you'll get these values.

Button

A clickable button element.

{
  "component": "button",
  "label": "Example Button",
  "children": null,
  "data": {
    "url": "https://www.example.com",
    "caption": "Click Me",
    "target": "_self"
  }
}

Grid

A multi-column grid container.

{
  "component": "grid",
  "label": "Two Column Grid",
  "data": {
    "class": "my-grid",
    "colWidth": "1-2"
  },
  "columns": [
    { "components": [/* nested components */] },
    { "components": [/* nested components */] }
  ]
}

Column Widths

Heading

A headline element (h1-h6).

{
  "component": "heading",
  "data": {
    "text": "Welcome to Our Site",
    "level": "1"
  }
}

HTML

Raw HTML content.

{
  "component": "html",
  "data": {
    "html": "<div class=\"custom\"><b>Hello</b> world.</div>"
  }
}

Image

An image element.

{
  "component": "image",
  "data": {
    "image": {
      "_id": "asset-id",
      "path": "/storage/uploads/photo.jpg",
      "title": "Photo"
    },
    "caption": "A beautiful sunset"
  }
}

Link

A hyperlink element.

{
  "component": "link",
  "data": {
    "url": "https://www.example.com",
    "caption": "Visit Example",
    "target": "_blank"
  }
}

Markdown

Markdown content.

{
  "component": "markdown",
  "data": {
    "markdown": "## Hello World\n\nThis is **bold** and *italic* text."
  }
}

Richtext

WYSIWYG HTML content.

{
  "component": "richtext",
  "data": {
    "html": "<p>Hello <strong>world</strong>.</p><p>This is formatted content.</p>"
  }
}

Section

A container for grouping components.

{
  "component": "section",
  "data": {
    "class": "hero-section"
  },
  "children": [/* nested components */]
}

Spacer

Vertical spacing element.

{
  "component": "spacer",
  "data": {
    "size": "2"
  }
}

Component Structure

All components share a common structure:

{
  "component": "component-name",
  "label": "Optional Label",
  "id": "unique-id",
  "data": {
    // Component-specific fields
  },
  "children": [],    // For Section
  "columns": []      // For Grid
}