Layouts

Complete patterns for websites, components, plugins and modules.

These are practical compositions built from the same FG UI components. Use them as starting structures, not separate themes.

Administrator dashboard

Dashboard hero, product actions, status and operational cards.

Dashboard

Product administration

Health, actions and product status in one consistent surface.

FG
24
Items
100%
Ready
0
Errors

Administrator list manager

For records, users, content, logs, transactions or any component list view.

Records

Manage items

Search, filter and act on records without changing the page language.

NameStatusUpdated
Primary recordPublishedToday
Secondary recordReviewYesterday
2 records

Administrator edit / settings

Main form with a compact metadata and actions sidebar.

Enable feature
Use the shared switch and settings-row pattern.

Component workspace

Useful for large Joomla components with their own internal navigation.

Component

Workspace title

One consistent component shell for multiple internal views.

Recent activity

Item updated2 minutes ago
Done
Sync queued5 minutes ago
Queued

Quick actions

Plugin configuration

Simple settings page for a plugin without inventing a different interface.

Plugin

Integration settings

Configure behaviour using standard FG UI fields and settings rows.

Run automatically
Perform the task when the relevant event occurs.

Module editor + live preview

Configuration on one side and the actual frontend module pattern on the other.

Module settings

Show footer link
Display a call to action below the items.

Latest updates

Live
First updateToday
Second updateYesterday

Frontend landing page

Hero, proof, features and call to action without a separate theme system.

Product

Build consistent interfaces faster.

Use the same FG UI foundation for a public website, application and Joomla administration.

FG

Consistent

Shared tokens and components.

Responsive

Designed for phone through desktop.

Independent

No outside UI framework.

Frontend content + sidebar

For articles, documentation, Bible readers, blogs and knowledge bases.

Guide

Long-form content title

A comfortable content width using the same typography and spacing system.

Section heading

Content can contain links, quotes, lists, images and embedded modules while retaining FG UI rhythm.

Important information can be highlighted without inventing another visual language.

Directory / search results

Suitable for users, products, extensions, articles or any searchable directory.

CT

Result one

Category · Active

Short description of the result.

FG

Result two

Category · Featured

Short description of the result.

Account / profile settings

Profile navigation with a settings workspace.

Profile settings

Show online status
Allow other members to see when you are active.

Authentication

Login and registration patterns use the same form system.

FG

Sign in

Use your account details to continue.

Three-column application

Navigation, working area and contextual inspector for larger tools.

Working area

Main application content
+

Choose an item

The centre pane can hold an editor, builder, table, canvas or workflow.

Frontend footer composition

A full-width footer pattern using FG UI tokens without external template styling.

Layouts should stay composable.

Use these as starting patterns. If a product needs a genuinely new structure, add the smallest reusable layout primitive to FG UI rather than creating a new theme.

Browse components