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.
Content Elements | PagibleAI CMS Documentation
PagibleAI CMS Content Elements
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