Content Elements | PagibleAI CMS Documentation

PagibleAI CMS Content Elements

PagibleAI CMS ships with a comprehensive set of content elements that cover every common use case. Each element is a Blade partial with its own CSS — loaded only when used.

Element

CSS

Description

hero

hero.css

Full-width hero section with image and call-to-action

heading

—

Semantic h1–h6 headings

text

—

Markdown-rendered rich text blocks

image

image.css

Responsive image with automatic srcset

image-text

image-text.css

Image alongside text with configurable ratio

cards

cards.css

Grid of feature or content cards

blog

blog.css

Paginated blog post listing

article

article.css

Blog article with cover image and metadata

slideshow

slideshow.css

Animated image carousel

video

video.css

Responsive video player with poster

audio

—

Audio player with transcription support

code

prism.css

Syntax-highlighted code blocks

table

table.css

Responsive data tables

pricing

pricing.css

Pricing plan comparison

questions

questions.css

FAQ accordion with structured data

contact

contact.css

Contact form with validation

toc

toc.css

Auto-generated table of contents

file

—

Downloadable file link

html

—

Custom HTML for embeds and widgets

PagibleAI CMS Element Data Format

Every content element in PagibleAI CMS follows a clean, consistent JSON structure that makes programmatic content creation simple:

{
  "id": "abc123",
  "type": "hero",
  "group": "main",
  "data": {
    "title": "PagibleAI CMS",
    "text": "The smartest CMS for Laravel.",
    "url": "/get-started",
    "button": "Try It Free"
  }
}

Using Elements in PagibleAI CMS Pages

Add elements to a page's content array. PagibleAI CMS renders them in order, loading only the CSS required for each element type — keeping pages lightweight and fast.

Element Groups

Elements belong to named groups like main, footer, or sidebar. PagibleAI CMS renders each group in the corresponding template section.

Default Groups

The main group is rendered in the primary content area. Additional groups like footer and header map to their respective layout sections.

Custom Groups

Define custom groups in your theme layout to place elements in sidebars, modals, or any other container.

Group Priority

Elements render in array order within each group. Use this to control visual stacking.

Feature Availability by Plan

Starter

Pro

Enterprise

5 pages

Unlimited

Community support

Priority support

Dedicated support

Core themes

Custom themes

Custom + white-label

Element Properties Reference

Property

hero

cards

pricing

title

Required

text

Optional

file

Optional

Per card