Appearance
Built-in Sections
FilamentCraft ships 25 built-in content sections, registered automatically unless you opt out. Twenty-three are static BladeSection subclasses; two — Newsletter and Contact form — are interactive LivewireSections that validate input, show a success state, and dispatch a Laravel event you can listen to. Each lives under FilamentCraft\Sections\Builtin with a curated settings schema, optional repeatable blocks, and one or more ready-made presets.
Make a built-in your own
Run php artisan filamentcraft:customize-section to search this catalog and generate a safe variant or an application-wide replacement. It inherits the existing schema and behavior, and can optionally copy only the Blade view. See Customizing Built-in Sections.
| # | Section | Slug | Icon | Blocks |
|---|---|---|---|---|
| 1 | Header | header | heroicon-o-bars-3 | nav-link |
| 2 | Hero | hero | heroicon-o-sparkles | proof (limit 4) |
| 3 | Logo cloud | logo-cloud | heroicon-o-building-office-2 | logo |
| 4 | Features | features | heroicon-o-squares-2x2 | feature |
| 5 | Image with text | image-text | heroicon-o-photo | — |
| 6 | Stats | stats | heroicon-o-chart-bar | stat |
| 7 | Testimonials | testimonials | heroicon-o-chat-bubble-left-right | quote |
| 8 | Pricing | pricing | heroicon-o-credit-card | plan |
| 9 | FAQ | faq | heroicon-o-question-mark-circle | item |
| 10 | Rich text | rich-text | heroicon-o-document-text | — |
| 11 | Call to action | cta | heroicon-o-megaphone | — |
| 12 | Footer | footer | heroicon-o-bars-3-bottom-left | link |
| 13 | Newsletter | newsletter | heroicon-o-envelope | — |
| 14 | Contact form | contact | heroicon-o-chat-bubble-left-right | — |
| 15 | Team | team | heroicon-o-user-group | member |
| 16 | Gallery | gallery | heroicon-o-photo | image |
| 17 | Timeline | timeline | heroicon-o-clock | step |
| 18 | Video | video | heroicon-o-play-circle | — |
| 19 | Articles | articles | heroicon-o-newspaper | article |
| 20 | Portfolio | portfolio | heroicon-o-rectangle-group | project |
| 21 | Tabs | tabs | heroicon-o-rectangle-stack | tab (limit 6) |
| 22 | Comparison | comparison | heroicon-o-scale | row |
| 23 | Countdown | countdown | heroicon-o-clock | — |
| 24 | Locations | locations | heroicon-o-map-pin | location |
| 25 | Announcement Bar | banner | heroicon-o-megaphone | — |
Interactive sections fire events
On submit, Newsletter dispatches FilamentCraft\Events\NewsletterSubscribed and Contact form dispatches FilamentCraft\Events\ContactFormSubmitted. With no listener they're harmless no-ops (the visitor still sees the success message); add a listener to persist the subscriber, send mail, or forward to your CRM. Both carry the submitted values, the resolved Site (if any), and the section id.
Where to find them
The full registration list ships in the plugin class; each section class is in src/Sections/Builtin/. To hide or replace them, see Curating the Catalog. The same list also registers a seven-section e-commerce pack (Store hero, Category grid, Product carousel, Product listing, Product page, Cart, Checkout) whose content is driven by live product data through the Storefront contract rather than authored settings — see the E-commerce Store example; those aren't covered on this page.
Five sections share one carousel
Gallery, Team, Testimonials, Logo cloud, and the commerce pack's Product carousel all ride the same accessible carousel primitive (arrow buttons, optional dot pagination, RTL-aware scrolling, reduced-motion support). Custom sections can reuse it as the <x-filamentcraft::carousel> Blade component.
Every section below ships the same four preset families — Modern, Editorial, Bold, and Elegant — so the per-section entries list only settings and blocks. See Presets at the end of this page.
Shared style enums
Most sections expose the same four EnumButtons controls, backed by these enums (each implements HasLabel, HasColor, HasIcon and offers an ::options() helper):
| Enum | Setting | Cases |
|---|---|---|
SectionShape | shape | clean, contained, layered, wireframe |
SectionDensity | density | compact, comfortable, airy |
SectionAlignment | align / content_align | start, center |
MediaPlacement | media_mode / media_placement | none, background, start, end |
Every section also exposes a ColorScheme::make('scheme') control — see Color Inputs.
1. Header
A site header with brand, navigation links, an optional CTA, and a locale switcher.
Settings: brand_text (Text), brand_logo (Image), cta_enabled (Toggle), cta_label (Text, shown when cta_enabled), cta_url (Link, shown when cta_enabled), show_locale_switcher (Toggle), show_scheme_toggle (Toggle) + scheme_toggle_placement (Select: inline / floating) — the visitor dark-mode toggle, alignment (Select: split / centered / compact), sticky (Toggle), show_border (Toggle), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: nav-link — label (Text), url (Link).
Conditionally cached
The header's fragment cache is per locale, but host-provided locale URLs (localeUrlsUsing) can vary per path — so HeaderSection::cacheable() returns false whenever a custom locale URL resolver is registered, and the header renders fresh on every request.
2. Hero
The most-configured section, and a live demonstration of the dual-input schema (DSL settings sit next to raw Filament components like Toggle, ColorPicker, and TemplateUrlPicker).
Settings: eyebrow, heading (Text), subheading (Textarea), cta_enabled (Toggle), cta_url (TemplateUrlPicker — searches published templates), cta_label (Text), supporting_text (Text), bg_image (Image), media_mode (EnumButtons → MediaPlacement), layout (Select: spotlight / editorial / compact), content_align (EnumButtons → SectionAlignment), density (EnumButtons → SectionDensity), shape (EnumButtons → SectionShape), scheme (ColorScheme), surface_style (Select: glass / solid / none), use_accent_override (Toggle), accent_color (ColorPicker, shown when override is on).
Blocks: proof (limit 4) — value (Text), label (Text).
3. Logo cloud
Social-proof logos in a grid or single row.
Settings: eyebrow, title (Text), intro (Textarea), layout (Select: grid / row / marquee / carousel), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), tone (Select: mono / color), scheme (ColorScheme).
Blocks: logo — name (Text), logo (Image).
4. Features
A feature grid with configurable layout, column count, and per-card icon/proof.
Settings: eyebrow, title (Text), intro (Textarea), layout (Select: cards / bands / minimal), columns (Select: 2 / 3 / 4), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: feature — icon (Icon), eyebrow (Text), title (Text), description (Textarea), stat (Text), url (Link).
5. Image with text
One idea, a supporting image, and focused copy. No blocks.
Settings: eyebrow, title (Text), body (Textarea), url (Link), label (Text), image (Image), media_placement (EnumButtons → MediaPlacement), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
6. Stats
Concise metrics in a grid or band.
Settings: eyebrow, title (Text), intro (Textarea), layout (Select: grid / band), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: stat — icon (Icon), value (Text), label (Text), description (Textarea).
7. Testimonials
Customer quotes as cards, a featured quote, or a compact list.
Settings: eyebrow, title (Text), intro (Textarea), layout (Select: cards / featured / compact / carousel), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: quote — quote (Textarea), name (Text), role (Text), avatar (Image).
8. Pricing
Comparable pricing plans with a highlightable tier.
Settings: eyebrow, title (Text), intro (Textarea), billing_note (Text), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: plan — name (Text), price (Text), period (Text), description (Textarea), features (Textarea, one per line), highlighted (Toggle), url (Link), label (Text).
9. FAQ
Accessible disclosure list — no JavaScript required.
Settings: eyebrow, title (Text), intro (Textarea), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: item — question (Text), answer (Textarea).
10. Rich text
Long-form content with an article or split-with-aside layout. No blocks.
Settings: eyebrow, title (Text), body (RichText), aside_title (Text), aside_body (RichText), layout (Select: article / split), width (Select: sm / md / lg), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme), surface (Toggle — wrap content in a surface).
11. CTA
A conversion moment as a centered card, split callout, or inline banner. No blocks.
Settings: badge (Text), heading (Text), subheading (Textarea), note (Text), url (Link), label (Text), layout (Select: center / split / banner), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
12. Footer
A branded footer with a description, copyright, and grouped links.
Settings: brand (Text), description (Textarea), copyright (Textarea), show_scheme_toggle (Toggle) + scheme_toggle_placement (Select: inline / floating) — the visitor dark-mode toggle, density (EnumButtons → SectionDensity), shape (EnumButtons → SectionShape), scheme (ColorScheme).
Blocks: link — column (Text, optional grouping heading), label (Text), description (Textarea), url (Link).
13. Newsletter
An interactive email-capture form (LivewireSection). On submit it dispatches FilamentCraft\Events\NewsletterSubscribed. No blocks.
Settings: heading (Text), subheading (Textarea), placeholder (Text), button_label (Text), success_message (Text), density (EnumButtons → SectionDensity), scheme (ColorScheme).
14. Contact form
An interactive name/email/message form (LivewireSection). On submit it dispatches FilamentCraft\Events\ContactFormSubmitted. No blocks.
Settings: heading (Text), subheading (Textarea), name_label / email_label / message_label / button_label (Text), success_message (Text), density (EnumButtons → SectionDensity), scheme (ColorScheme).
15. Team
Team members as profile cards, large portraits, or a minimal list — in a grid or a carousel.
Settings: eyebrow, title (Text), intro (Textarea), layout (Select: grid / carousel), style (Select: cards / portraits / minimal), columns (Select: 2 / 3 / 4), align (EnumButtons → SectionAlignment), show_socials (Checkbox), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: member — photo (Image), name (Text), role (Text), bio (Textarea), x_url (Text), linkedin_url (Text), github_url (Text).
16. Gallery
An image gallery as a grid, a masonry wall, or a carousel, with configurable captions.
Settings: eyebrow, title (Text), intro (Textarea), layout (Select: grid / masonry / carousel), columns (Select: 2 / 3 / 4), ratio (Select: square / landscape / portrait / adapt), captions (Select: none / below / overlay), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: image — image (Image), caption (Text), url (Text).
Masonry ignores the aspect ratio
The masonry layout uses each image's natural height, so the ratio setting only applies to the grid and carousel layouts.
17. Timeline
Ordered steps as a horizontal stepper, a vertical timeline, or alternating sides — for how-it-works flows, processes, roadmaps, and company histories.
Settings: eyebrow, title (Text), intro (Textarea), style (Select: steps / vertical / alternating), marker (Select: number / icon / dot), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: step — icon (Icon), meta (Text, a date or label), title (Text), description (Textarea).
18. Video
An embedded video with a heading and optional cover image. No blocks.
Settings: eyebrow, heading (Text), description (Textarea), video_url (Text), cover (Image, optional cover shown before playback), width (Select: contained / narrow / full), ratio (Select: wide 16:9 / standard 4:3 / cinema 21:9), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Privacy-friendly embeds
VideoSection::parseVideo() accepts YouTube URLs (watch, embed, shorts, and youtu.be forms), Vimeo URLs, and direct .mp4 / .webm / .ogg file URLs. YouTube embeds go through youtube-nocookie.com; direct files render as a native <video> element with the cover as its poster. When a cover image is set, the iframe renders a lightweight srcdoc facade — the cover plus a play button — so the third-party player only loads after the visitor clicks play. Unrecognised URLs render nothing on the live site (the editor shows a placeholder instead).
19. Articles
Blog posts or changelog entries as a card grid or a featured-plus-list layout, with an optional view-all link.
Settings: eyebrow, title (Text), intro (Textarea), view_all_label (Text), view_all_url (Link), layout (Select: grid / featured), columns (Select: 2 / 3), show_meta (Checkbox), show_tags (Checkbox), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: article — image (Image), tag (Text), title (Text), excerpt (Textarea), meta (Text, e.g. Jun 12, 2026 · 6 min read), url (Link).
20. Portfolio
Projects or case studies with categories and result metrics, in a grid or with the first project featured.
Settings: eyebrow, title (Text), intro (Textarea), layout (Select: grid / featured), columns (Select: 2 / 3), show_categories (Checkbox), show_results (Checkbox), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: project — image (Image), category (Text), title (Text), summary (Textarea), result (Text, e.g. +240% signups), url (Link).
21. Tabs
Tabbed content panels — one tab per audience, discipline, or use case.
Settings: eyebrow, title (Text), intro (Textarea), tab_style (Select: underline / pills / boxed), placement (Select: top / start — tabs on top or at the side), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: tab (limit 6) — label (Text), icon (Icon), heading (Text), body (Textarea), image (Image).
Accessible tablist, graceful fallback
The markup follows the APG tabs pattern — role="tablist" / tab / tabpanel, aria-selected, roving tabindex, and Arrow / Home / End keyboard navigation (arrow keys flip in RTL). Panels are only hidden once the site JS initialises, so without JavaScript every panel renders stacked and the content stays readable.
22. Comparison
A feature-comparison table — your column against one or two competitors, with an optional CTA.
Settings: eyebrow, title (Text), intro (Textarea), our_label (Text), competitor_a_label (Text), competitor_b_label (Text, leave empty for a two-column table), highlight_ours (Checkbox), cta_label (Text), cta_url (Link), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: row — feature (Text), us (Text), competitor_a (Text), competitor_b (Text).
Cell values: yes, no, or free text
Each cell accepts yes (renders a check mark) or no (renders a muted cross with a screen-reader label) — matched case-insensitively, so Yes and NO work too — or any free text (Limited, Paid add-on, 10 minutes) rendered as-is.
23. Countdown
A live-ticking countdown to a launch, event, or deadline, with an expired state. No blocks.
Settings: eyebrow, heading (Text), subheading (Textarea), cta_label (Text), cta_url (Link), target_date (raw Filament DateTimePicker), expired_message (Text), show_labels (Checkbox), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Never cached, always current
Countdown overrides cacheable(): false, so its HTML is excluded from the page cache — the server-rendered digits are correct on every request, and the site JS ticks them every second from there. Once the target passes (server- or client-side), the tile grid is swapped for the expired_message. The tiles are aria-hidden; a visually hidden sentence announces the target date to screen readers instead.
24. Locations
Offices or stores as a live map plus contact cards. Give a location a latitude and longitude and the section draws a real slippy map around it — pannable, zoomable, numbered pins tied to the cards, no API key and no account anywhere.
Settings: eyebrow, title (Text), intro (Textarea), map_source (Select: auto / map / embed / image / none), map_zoom (Select: auto fit-all, or world → building), map_ratio (Select: wide / standard / square / tall), map_tone (Select: natural / muted / tinted / night), map_interactive (Checkbox), map_embed_url (Text), map_image (Image), layout (Select: split map + cards / cards only), columns (Select: 2 / 3), align (EnumButtons → SectionAlignment), shape + density (EnumButtons), scheme (ColorScheme).
Blocks: location — name (Text), address (Textarea), lat + lng (Text), phone (Text), email (Text), hours (Text), map_url (Link, directions link).
Coordinates
Editors rarely type coordinates. Paste anything a map hands you into either field and the section finds the pair:
48.8584, 2.2945https://www.google.com/maps/place/…/@48.8584,2.2945,17z- a Google "share" link carrying
!3d48.8584!4d2.2945 https://www.openstreetmap.org/#map=17/48.8584/2.2945https://www.openstreetmap.org/?mlat=48.8584&mlon=2.2945geo:48.8584,2.2945
A location with coordinates and no map_url gets a Get directions link built from them.
How map_source resolves
auto (the default) walks a fallback chain, so an existing site that only has an embed URL keeps rendering exactly what it rendered before:
- any location with coordinates → the tile map
- else
map_embed_url→ the iframe - else
map_image→ the static image - else nothing (a placeholder in the editor)
Pick map, embed, image, or none to force one and skip the chain.
The map itself
The server resolves the zoom that frames every pin, the tiles that cover the canvas, and where each pin lands — then emits them as percentages, so the finished map is correct before any JavaScript runs and never shifts layout. The site bundle then re-tiles at the element's real pixel width and adds drag-to-pan, zoom buttons, Ctrl/⌘ + scroll, and double-click zoom. Clicking a card's pin number centres the map on that location. Plain scrolling always scrolls the page — the map never traps it.
map_tone re-skins the raster without touching the provider: muted desaturates it, tinted duotones it into the scheme's primary and accent, night inverts it for dark schemes.
The default tile provider is fine to start with, not to scale on
Tiles come from tile.openstreetmap.org, whose usage policy serves them best-effort with no SLA and warns that commercial access "may be withdrawn at any point". That is the right trade for getting a map with zero setup — it is not the right trade for a busy storefront. Point filamentcraft.maps.tile_url at your own provider before you need to:
php
'maps' => [
'tile_url' => 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png',
'attribution' => '© Stadia Maps © OpenMapTiles © OpenStreetMap',
'attribution_url' => 'https://www.openstreetmap.org/copyright',
'max_zoom' => 20,
],The template understands {z}, {x}, {y}, {s} (subdomain) and {r} (retina). Stadia, MapTiler, and Thunderforest all serve @2x tiles, which OpenStreetMap does not. Self-hosting Protomaps removes the dependency entirely.
Attribution is not decoration — most providers, OpenStreetMap included, require it. It renders in the corner of every map and is driven by the two config keys above. Set tile_url to an empty string to turn tile maps off site-wide; coordinates then fall back to OpenStreetMap's own embed, which stays interactive but shows only one marker.
Map embeds are allowlisted
map_embed_url only renders if it starts with one of three prefixes — https://www.google.com/maps/embed, https://maps.google.com/maps, or https://www.openstreetmap.org/export/embed. Anything else is silently dropped and the static map_image (if any) is shown instead.
25. Announcement Bar
A slim site-wide announcement — a full-width bar or a floating pill — with an optional link and dismiss button. No blocks.
Settings: icon (Icon, optional emoji or heroicon name), text (Text), cta_label (Text), cta_url (Link), style (Select: bar / floating), tone (Select: brand / surface), dismissible (Checkbox), scheme (ColorScheme).
Dismissal persists per section
When a visitor dismisses the banner, the site JS stores fc-banner-dismissed-{section id} in localStorage and hides it on every future visit (editing the text won't bring it back — removing and re-adding the section will, since the id changes). In the editor's design mode the storage key is omitted, so the banner never disappears while you're editing; if localStorage is unavailable the banner simply stays visible.
Presets
A preset is a named starting point — a bundle of settings and blocks the editor can apply in one click. Every built-in section ships the same four style families — Modern (SaaS), Editorial (studio), Bold (startup), and Elegant (premium) — each with its own color scheme, rhythm, and copy. Because the four share slugs across every section, they also drive the starter-site seeder: pick a family once and a whole cohesive site is generated. Define your own on a custom section by returning Preset objects from a static presets() method.
Blocks
A block is a repeatable child item within a section (a nav link, a pricing plan, a quote). Blocks have their own settings schema and an optional limit. See Custom Sections for how to declare them.