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
Unlimited
Community support
Priority support
Dedicated support
Core themes
Custom themes
Custom + white-label

Element Properties Reference

Property
hero
cards
pricing
title
Required
Required
Required
text
Optional
Optional
Optional
file
Optional
Per card
No