FG UI DEV | Components

457Core component families

223Basic components

234Combined components

800Core icons

What is counted?A reusable FG UI Core family with a genuinely distinct responsibility.

Not counted:Renamed domain-specific uses of existing buttons, badges, fields, links, statuses or other Basics; variants; child classes; spacing utilities; DEV helpers; or marketing-site-only shell classes.

FG UI 1.2 changes

Filter the complete component inventory by release status. Release badges are documentation metadata and are not built into the component itself.

1.2 RC2

457 of 457 components shown

NEWFirst introduced in FG UI 1.1.UPDATEDExisted in 1.0.2 and received a meaningful Core change in 1.1. Minor documentation-only edits do not receive an UPDATED badge.

Basic components

Actions & branding

6 real FG UI Core component families in this group.

6 components

Basic

Button

.fgui-btn

Basic

Button group

.fgui-btn-group

Basic

Icon button

.fgui-icon-btn

Basic

Icon

.fgui-icon

Basic

Brand mark

.fgui-brand-mark

FG UI

Basic

Brand lockup

.fgui-brand-lockup

FG UI

FG ToolsForGoodTools

Basic components

Cards & identity

11 real FG UI Core component families in this group.

11 components

Basic

Card

.fgui-card

Standard card

Reusable FG UI content surface.

Basic

Avatar

.fgui-avatar

CT

Basic

Avatar group

.fgui-avatar-group

CTLSFG

Basic

Media card

.fgui-media-card

IMG

Media title

Image or file preview

Basic

File

.fgui-file

PDF

guide.pdf

1.8 MB

Basic

Status

.fgui-status

DefaultSuccessWarningDanger

Basic

Tag

.fgui-tag

FG UIJoomla

Basic

Presence

.fgui-presence

CT

Basic

Counter

.fgui-counter

12

Basic

Rating

.fgui-rating

★★★★☆

Basic

Meter

.fgui-meter

Profile complete72%

Basic components

Layout primitives

7 stable structural primitives promoted from the existing Core layout layer.

7 components

Basic

Container

.fgui-container

Contained content

Centred with a stable maximum width.

Basic

Section

.fgui-section

Section spacing

Basic

Stack

.fgui-stack

FirstSecondThird

Basic

Cluster

.fgui-cluster

DesignJoomlaCommunity

Basic

Responsive grid

.fgui-grid

One

Two

Three

Basic

Split layout

.fgui-split

Main content

Side panel

Basic

Sidebar layout

.fgui-sidebar-layout

Basic components

Forms & controls

25 real FG UI Core component families in this group.

25 components

Basic

Field

.fgui-field

NameStandard field grouping.

Basic

Input

.fgui-input

Basic

Textarea

.fgui-textarea

Basic

Select

.fgui-select

Basic

Custom select

.fgui-custom-select

Basic

Search

.fgui-search

Basic

Input group

.fgui-input-group

Basic

Input affix

.fgui-input-affix

Websitehttps://

Basic

Checkbox

.fgui-check

Remember me

Basic

Radio

.fgui-radio

Option one Option two

Basic

Switch

.fgui-switch

Enabled

Basic

Range

.fgui-range

Basic

Dropzone

.fgui-dropzone

Drop files hereor choose a file

Basic

Password field

.fgui-password

Basic

Password strength

.fgui-password-strength

Strong password

Basic

OTP input

.fgui-otp

Basic

Tag input

.fgui-tag-input

FG UI Joomla

Basic

Mention picker

.fgui-mention-picker

CT

Christopher Taylor@christopher

FG

ForGoodTools@forgoodtools

Basic

Inline edit

.fgui-inline-edit

Site title

ForGoodTools

Basic

Media picker

.fgui-media-picker

Selected image

Basic

Upload queue

.fgui-upload-queue

PNG

hero.png

78%

Basic

Date picker

.fgui-date-picker

Basic

Time picker

.fgui-time-picker

Basic

Month picker

.fgui-month-picker

Basic

Colour picker

.fgui-color-picker

Basic components

Navigation & choice

13 real FG UI Core component families in this group.

13 components

Basic

Breadcrumbs

.fgui-breadcrumbs

Basic

Tabs

.fgui-tabs

Basic

Segmented control

.fgui-segmented

Basic

Side navigation

.fgui-side-nav

Basic

Toolbar

.fgui-toolbar

Basic

Pagination

.fgui-pagination

Basic

Stepper

.fgui-stepper

✓Account

2Profile

3Done

Basic

Chip

.fgui-chip

Basic

Keyboard key

.fgui-kbd

Ctrl+K

Basic

Navigation count link

.fgui-nav-count-link

Messages3

Basic

Count badge

.fgui-count-badge

4122

Basic

Navigation section

.fgui-nav-section

Basic

Authentication switch

.fgui-auth-switch

Don't have an account?

Basic components

Feedback & loading

9 real FG UI Core component families in this group.

9 components

Basic

Alert

.fgui-alert

i

Information

FG UI alert message.

Basic

Note

.fgui-note

Note:This is a reusable information note.

Basic

Spinner

.fgui-spinner

Basic

Progress

.fgui-progress

Basic

Loader

.fgui-loader

Loading content

Please wait

Basic

Skeleton

.fgui-skeleton

Basic

Empty state

.fgui-empty-state

?

No items yet

Create your first item to get started.

Basic

Tooltip

.fgui-tooltip

Basic

Toast

.fgui-toast

Saved

Your changes were saved.

Basic components

Disclosure & overlays

6 real FG UI Core component families in this group.

6 components

Basic

Accordion

.fgui-accordion

A reusable interface system from ForGoodTools.

Second panel.

Basic

Modal

.fgui-modal

Basic

Drawer

.fgui-drawer

Basic

Popover

.fgui-popover

Basic

Lightbox

.fgui-lightbox

Basic components

Data & structure

12 real FG UI Core component families in this group.

12 components

Basic

Table

.fgui-table

Name	Status
FG UI	Active
FG Bible	Ready

Basic

List

.fgui-list

First item

Supporting text

Second item

Supporting text

Basic

Statistic

.fgui-stat

457

Components

223 basic + 234 combined

Basic

Key/value

.fgui-kv

Version: 1.0.2-rc.1
Icons: 800

Basic

Tree

.fgui-tree

▾ Components

Buttons

Cards

Basic

Timeline

.fgui-timeline

1

Created

Today

2

Reviewed

Next step

Basic

Calendar

.fgui-calendar

September 2026

M

T

W

T

F

S

1

2

3

4

5

6

7

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

Basic

Reorder list

.fgui-reorder-list

NavigationFirst item

HeroSecond item

Basic

Value stack

.fgui-value-stack

Expected today£3,840£1,210 already paid

Basic

Inline statistic

.fgui-inline-stat

28bookings3overdue

Basic

Value delta

.fgui-value-delta

+12%-£240No change

Basic

Summary row

.fgui-summary-row

Outstanding balance£240

Next appointment14 Oct

Basic components

Media & charts

10 real FG UI Core component families in this group.

10 components

Basic

Mini chart

.fgui-mini-chart

Visitors+12%

Basic

Bar chart

.fgui-bar-chart

Basic

Donut chart

.fgui-donut

72%Complete

Basic

Sparkline

.fgui-sparkline

Growth

Basic

Carousel

.fgui-carousel

1

Slide one

FG UI carousel

Reusable sliding content.

2

Responsive by default

Second slide checks switching behaviour.

3

One consistent system

Third slide checks the full control set.

Basic

Countdown

.fgui-countdown

01Days

05Hours

04Minutes

19Seconds

Basic

Media frame

.fgui-media-frame

VIDEO

Basic

Hotspot

.fgui-hotspot

Interactive image area

Basic

Gallery

.fgui-gallery

Image 1

Basic

Back to top

.fgui-back-to-top

Basic components

Website content & identity

15 real FG UI Core component families in this group.

15 components

Basic

Content rule

.fgui-content-rule

OR

Basic

Heading group

.fgui-heading-group

Featured

Clear section heading

Supporting text stays visually connected to the heading.

Basic

Icon label

.fgui-icon-label

Southport, UK

Basic

Logo tile

.fgui-logo-tile

FORGOODTOOLS

Basic

Contact line

.fgui-contact-line

Call us01704 000000

Basic

Social link

.fgui-social-link

Basic

Address block

.fgui-address-block

Angel Lengths123 Example StreetSouthport PR8 1AA

Basic

Media object

.fgui-media-object

FG

Media object

Small media and content pattern.

Basic

Figure

.fgui-figure

IMAGE

Example image caption

Basic

Pull quote

.fgui-pullquote

A strong quotation can break up long-form content.

Basic

Byline

.fgui-byline

CTBy Chris Taylor

Basic

Metadata row

.fgui-meta-row

22 Sep 2026 6 min 1.2k

Basic

Citation

.fgui-citation

1

Source title

Publisher · 2026

Basic

Inline code

.fgui-inline-code

.fgui-btn--primary

Basic

Metadata list

.fgui-meta-list

14 Oct 2026
Southport
Lisa

Basic components

Forms & interaction

15 real FG UI Core component families in this group.

15 components

Basic

Fieldset

.fgui-fieldset

Contact preferences Email updates SMS updates

Basic

Choice card

.fgui-choice-card

Standard delivery2–3 working days

Basic

Rating input

.fgui-rating-input

Basic

Number stepper

.fgui-number-stepper

Basic

Currency input

.fgui-currency-input

£

Basic

Phone input

.fgui-phone-input

+44

Basic

URL input

.fgui-url-input

https://

Basic

Date range

.fgui-date-range

to

Basic

Search suggestion

.fgui-search-suggestion

FG UI components

Documentation

↵

Basic

Form actions

.fgui-form-actions

Basic

Donation choice

.fgui-donation-choice

£25

Basic

Vote control

.fgui-vote-control

24

Basic

Reaction button

.fgui-reaction-button

Basic

Consent row

.fgui-consent-row

Basic

Copy field

.fgui-copy-field

Basic components

Advanced form controls

5 distinct controls that add behaviour not covered cleanly by existing Basics.

5 components

Basic

Combobox / autocomplete

.fgui-combobox

Basic

Dual range

.fgui-dual-range

Min 20Max 80

Basic

Character counter

.fgui-character-counter

0/ 120

Basic

Duration input

.fgui-duration-input

DaysHoursMinutes

Basic

Tree select

.fgui-tree-select

Basic components

Navigation & discovery

7 real FG UI Core component families in this group.

7 components

Basic

Skip link

.fgui-skip-link

Press Tab to reveal the skip link at the top-left of the page.

Basic

Anchor navigation

.fgui-anchor-nav

Basic

Link list

.fgui-link-list

Basic

Page dots

.fgui-page-dots

Basic

Jump link

.fgui-jump-link

Jump to pricing

Basic

Alphabet index

.fgui-alpha-index

Basic

Pagination summary

.fgui-pagination-summary

Showing 1–20 of 128Page 1 of 7

Basic components

Commerce & checkout

12 real FG UI Core component families in this group.

12 components

Basic

Price

.fgui-price

£29/ month

Basic

Price range

.fgui-price-range

From£25–£60

Basic

Stock

.fgui-stock

In stock

Basic

SKU

.fgui-sku

SKU FG-001

Basic

Quantity selector

.fgui-quantity

Basic

Product swatch

.fgui-product-swatch

Basic

Option tile

.fgui-option-tile

Basic

Shipping estimate

.fgui-shipping-estimate

Free delivery
Arrives Thursday

Basic

Payment method

.fgui-payment-method

VISAVisa ending 4242

Basic

Discount

.fgui-discount

Save 20%

Basic

Tax note

.fgui-tax-note

VAT included where applicable.

Basic

Delivery slot

.fgui-delivery-slot

Tomorrow10:00–12:00

Basic components

Publishing, learning & giving

18 real FG UI Core component families in this group.

18 components

Basic

Reading time

.fgui-reading-time

6 min read

Basic

Dateline

.fgui-dateline

22 September 2026

Basic

Topic label

.fgui-topic-label

Technology

Basic

Thumbnail

.fgui-thumbnail

IMG

Basic

Audio player

.fgui-audio-player

3:42

Basic

Video player

.fgui-video-player

12:08

Basic

Download link

.fgui-download-link

Download guidePDF · 2.4 MB

Basic

Resource link

.fgui-resource-link

Course handbookOpen →

Basic

Footnote

.fgui-footnote

1Supporting note or source detail for long-form content.

Basic

Image stack

.fgui-image-stack

ABC

Basic

Opening hours

.fgui-opening-hours

Monday09:00–17:00

Saturday10:00–14:00

Basic

Appointment slot

.fgui-appointment-slot

Basic

Event date

.fgui-event-date

SEP28

Basic

Score

.fgui-score

92%

Basic

Quiz option

.fgui-quiz-option

World English Bible

Basic

Answer feedback

.fgui-answer-feedback

Correct. Nice work.

Basic

Progress ring

.fgui-progress-ring

72%

Basic

Donation amount

.fgui-donation-amount

£1,240raised

Basic components

Specialized controls

Only genuinely distinct primitives retained from the 450-component review.

2 components

Basic

Typing indicator

.fgui-typing-indicator

Basic

Repeatable field

.fgui-repeatable

Combined components

App, admin & workflow

15 real FG UI Core component families in this group.

15 components

Combined

Admin page hero

.fgui-admin-page-hero

Administrator

Users

Manage site users and permissions.

Combined

App shell

.fgui-app-shell

Application content

Main workspace inside the shell.

Combined

Filter bar

.fgui-filterbar

24 results

Combined

Command palette

.fgui-command

Open dashboardEnter

Search usersS

Combined

Kanban board

.fgui-kanban

To do2

Build componentFG UI

Doing1

Test layouts

Done3

Component auditComplete

Icon reviewComplete

Combined

Frontend context header

.fgui-frontend-context-header

Guide

Getting started

Frontend content context.

Combined

Previous / next navigation

.fgui-prev-next

Combined

Summary

.fgui-summary

457Components

800Icons

0Dependencies

Combined

Danger zone

.fgui-danger-zone

Danger zone

Destructive actions are grouped clearly.

Combined

Split view

.fgui-split-view

General settings

Name

Combined

Table toolbar

.fgui-table-toolbar

Example row

Active

Combined

Rich editor

.fgui-editor

Article title

Edit rich content here.

Combined

Settings group

.fgui-settings-group

Email notificationsReceive important updates.

Public profileAllow other users to find you.

Combined

Save bar

.fgui-save-bar

Unsaved changesSave before leaving this page.

Combined

Permission table

.fgui-permission-table

PermissionViewEditDelete

Articles✓✓−

Users✓−−

Combined components

Joomla, admin & data workflows

16 repeatable finished patterns assembled from existing FG UI Basics.

16 components

Combined

Admin dashboard overview

.fgui-admin-dashboard

Healthy

Extension dashboard

Overview of the extension and its local data.

12

Items

4

Modules

100%

Ready

Combined

Admin list view

.fgui-admin-list-view

Articles

Manage extension records.

Title	Status
Welcome	Published

Combined

Admin edit view

.fgui-admin-edit-view

Edit article

Main edit form plus publishing controls.

TitleContent

PublishingPublished

Public · All languages

Combined

Admin configuration view

.fgui-admin-config-view

Configuration

Tabbed global extension settings.

GeneralItems per page

Changes apply across the extension.

Combined

Data table

.fgui-data-table

Users

	Name	State
	Chris	Enabled
	Alex	Pending

1–2 of 2

Combined

Advanced filter builder

.fgui-filter-builder

Match all rules

Combined

Saved views

.fgui-saved-views

Combined

Bulk action bar

.fgui-bulk-actions

3 items selected

Combined

Publishing panel

.fgui-publishing-panel

PublishingPublished

AccessLanguageStartFinish

Combined

Menu assignment

.fgui-menu-assignment

Combined

Batch actions

.fgui-batch-actions

Batch process

Apply changes to the selected records.

Move to categoryAccess

Combined

Permissions editor

.fgui-permissions-editor

Permissions

Configure actions for this group.

Configure

Create

Combined

Extension status

.fgui-extension-status

Extension statusReady

DatabaseConnected

Version1.0.2

UpdatesNone

Combined

Entity picker

.fgui-entity-picker

CT

Chris Taylor

User

A

Welcome article

Article

Combined

Media library

.fgui-media-library

Media library

hero.jpg

logo.svg

team.jpg

Combined

Audit log

.fgui-audit-log

Activity logToday

09:42

Article updated

Homepage intro was edited.

Chris

08:10

Settings saved

Global configuration changed.

Admin

Combined components

Community & content

13 real FG UI Core component families in this group.

13 components

Combined

User card

.fgui-user-card

CT

Christopher Taylor

ForGoodTools

Combined

Post composer

.fgui-composer

CT

Combined

Social post

.fgui-post

CT

Christopher Taylor

Just now

FG UI makes reusable interfaces faster to build.

POST MEDIA

Combined

Activity feed

.fgui-activity

✓

Build completed

2 minutes ago

+

User added

10 minutes ago

Combined

Chat

.fgui-chat

FG

How can we help?

CT

I am testing FG UI.

Combined

Notification

.fgui-notification

FG

New update available

FG UI development build

New

Combined

Comment thread

.fgui-comment-thread

CT

Christopher

This is a comment.

FG

ForGoodTools

And this is a reply.

Combined

Notification centre

.fgui-notification-centre

Notifications2 unread

FG

New message

Just now

CT

Profile updated

Yesterday

Combined

Bottom navigation

.fgui-bottom-nav

This Core component is intentionally shown by FG UI only in its responsive/mobile navigation context.

Combined

Search result

.fgui-result

FG

FG UI documentation

Search result with supporting content and metadata.

Open result

Combined

Profile header

.fgui-profile-header

CT

Christopher Taylor

ForGoodToolsUnited KingdomJoined 2026

FG UIJoomla

Combined

Article card

.fgui-article-card

ARTICLE

Guide

Reusable UI components

A reusable article-card pattern.

Read article

Combined

Long-form article

.fgui-article

Guide

Building with FG UI

Long-form article typography gives content a readable measure and consistent rhythm.

Reusable components keep interfaces consistent.

Component system

Use the existing FG UI component that matches the job.

Combined components

Community workflows

8 reusable social/community patterns built from existing Basics.

8 components

Combined

Community group

.fgui-community-group

Open group

FG UI Builders

Share components, patterns and Joomla ideas.

248 membersDesign systemsJoomla

Combined

Group header

.fgui-group-header

FG

FG UI Builders

Active now248 members

Combined

Conversation list

.fgui-conversation-list

LS

Lisa

That component looks much better.

2

JT

James

See you tomorrow.

Yesterday

Combined

Event calendar

.fgui-event-calendar

September events

24SEP

Community call

7:00 PM

Online

29SEP

Design review

6:30 PM

Members

Combined

Event detail

.fgui-event-detail

COMMUNITY

Monthly FG UI call

Discuss new components and real-world builds.

24SEP

7:00 PMOnline34 going

Combined

Moderation queue

.fgui-moderation-queue

Moderation queue2 waiting

LS

Reported post

Possible spam

Combined

Member management

.fgui-member-management

Members

Manage roles and access.

CT

Chris

Owner

LS

Lisa

Member

Combined

Invite members

.fgui-invite-members

Invite members

Send invitations by email.

Combined components

Website & marketing

12 real FG UI Core component families in this group.

12 components

Combined

Site navigation

.fgui-site-nav

Combined

Marketing hero

.fgui-marketing-hero

FG UI

Build consistent interfaces faster

Reusable components, local icons and interaction patterns.

Ready

Component system

Everything uses the same design language.

Combined

Feature card

.fgui-feature

Reusable components

Build once and use consistently across products.

Combined

Testimonial

.fgui-testimonial

FG UI keeps the interface consistent without making every page feel identical.

Example userForGoodTools

Combined

Call to action

.fgui-cta

Ready to build?

Use FG UI components in your next interface.

Combined

Newsletter

.fgui-newsletter

Combined

Site footer

.fgui-site-footer

Combined

Module / widget

.fgui-module

Reusable module/widget chrome.

Combined

Announcement

.fgui-announcement

FG UI 1.0.2-rc.1 is available for testing.View changes

Combined

Popup card

.fgui-popup-card

Combined

Cookie banner

.fgui-cookie-banner

Combined

Special state page

.fgui-special-state

404

Page not found

The page you requested could not be found.

Combined components

Website building

8 repeatable page patterns that make complete websites faster to assemble.

8 components

Combined

Mega menu

.fgui-mega-menu

Combined

Mobile navigation

.fgui-mobile-nav

Combined

Global search

.fgui-global-search

Date pickerBasic component Date rangeBasic component

Press Esc to close

Combined

Cookie preferences

.fgui-cookie-preferences

Combined

FAQ section

.fgui-faq-section

FAQ

Common questions

Everything people usually ask before getting started.

Yes. FG UI is framework-independent.

No external UI framework is required.

Combined

Contact section

.fgui-contact-section

CONTACT

Talk to our team

Have a question about a project? Send us a message.

@

Emailhello@example.com

☎

Phone01234 567890

Combined

Pricing section

.fgui-pricing-section

Starter

£0

Core essentials.

Popular

£12

Everything for growing sites.

Business

£29

Advanced team features.

Combined

Feature grid

.fgui-feature-grid

Fast

Reusable

Use the same components everywhere.

Clean

Consistent

One visual language across products.

Flexible

Composable

Build larger patterns from Basics.

Combined components

Authentication, security & system

15 real FG UI Core component families in this group.

15 components

Combined

Authentication shell

.fgui-auth-shell

Log in

Enter your account details.

Combined

Authentication shell alternative

.fgui-auth-shell-alt

Customer account

Sign in

Use your email or phone number and password.

Don't have an account?

Your password is not stored in the browser.

Combined

Authentication card

.fgui-auth-card

Log in

Enter your details below.

Combined

Authentication box

.fgui-auth-box

FG

Register

Create your account.

Combined

Security card

.fgui-security-card

Two-factor authentication

Add an extra layer of security.

Enabled

Combined

Recovery codes

.fgui-recovery-codes

AB12-CD34EF56-GH78JK90-LM12NP34-QR56

Combined

Device list

.fgui-device-list

PC

Windows PCCurrent device · London

Active

M

MobileLast active yesterday

Combined

Onboarding

.fgui-onboarding

Welcome to FG UI3 of 5 setup steps complete

Install FG UI assetsBuild your first page

Combined

System state

.fgui-system-state

✓

All systems operational

FG UI services are running normally.

Combined

Connection state

.fgui-connection-state

OfflineCheck your internet connection.

Combined

Maintenance state

.fgui-maintenance-state

!

Maintenance scheduledService may be briefly unavailable.

Combined

Session expired

.fgui-session-expired

!

Session expired

Please log in again to continue.

Combined

Secret field

.fgui-secret-field

API secretfg_live_••••••••••••

Combined

Webhook row

.fgui-webhook-row

↗

Order createdhttps://example.com/webhooks/order

Active

Combined

Help card

.fgui-help-card

?

Getting startedRead the FG UI guide

Combined components

Pricing & commerce

5 real FG UI Core component families in this group.

5 components

Combined

Pricing toggle

.fgui-pricing-toggle

Combined

Price card

.fgui-price-card

Starter

For small projects.

£9/month

Core components
800 icons
Email support

Combined

Product card

.fgui-product-card

FG

In stock

FG UI Handbook

Reusable product-card component.

£19

Combined

Cart line

.fgui-cart-line

FG

FG UI Handbook

Quantity 1

£19

Combined

Order summary

.fgui-order-summary

Combined components

Developer, filters & reporting

4 real FG UI Core component families in this group.

4 components

Combined

Code block

.fgui-code-block

HTML

<button class="fgui-btn fgui-btn--primary">Save</button>

Combined

Log viewer

.fgui-log-viewer

12:04:11INFO

FG UI initialised.

12:04:12OK

Components ready.

Combined

Rating summary

.fgui-rating-summary

4.8

★★★★★

128 reviews

5

78%

4

16%

Combined

Filter groups

.fgui-filter-groups

Status

Active Admin

Type

Component Module

Combined components

Small business & local services

9 real FG UI Core component families in this group.

9 components

Combined

Service card

.fgui-service-card

Hair extensions

Professional fitting and maintenance.

View service

Combined

Services list

.fgui-services-list

Consultation

Find the right service.

Fitting

Professional appointment.

Combined

Business profile

.fgui-business-profile

AL

Angel Lengths

Hair extension specialist · Southport

Open today

Combined

Contact card

.fgui-contact-card

Contact us

01704 000000Mon–Sat

hello@example.comEmail

Combined

Hours card

.fgui-hours-card

Opening hours

Open

Mon–Fri09:00–17:00

Saturday10:00–14:00

Combined

Location card

.fgui-location-card

Visit us

123 Example Street, Southport

Combined

Booking card

.fgui-booking-card

Book an appointment

Combined

Team member card

.fgui-team-card

CT

Chris Taylor

Senior stylist

10+ yearsExtensions

Combined

Review card

.fgui-review-card

★★★★★

“Excellent service from start to finish.”

LSLisa S.

Combined components

E-commerce & retail stores

10 real FG UI Core component families in this group.

10 components

Combined

Category card

.fgui-category-card

Clothing

128 products

→

Combined

Product gallery

.fgui-product-gallery

PRODUCT

Combined

Product detail

.fgui-product-detail

New

FG UI Handbook

★★★★★

£29

Reusable product detail pattern with options and actions.

Combined

Variant selector

.fgui-variant-selector

Colour

Size

Combined

Mini cart

.fgui-mini-cart

Combined

Cart summary

.fgui-cart-summary

Combined

Checkout form

.fgui-checkout

Combined

Payment methods

.fgui-payment-methods

VISAVisaPAYPayPalGGoogle Pay

Combined

Order confirmation

.fgui-order-confirmation

Order confirmed

Order #FG1024 has been received.

Combined

Wishlist item

.fgui-wishlist-item

FG

FG UI Handbook

In stock

Combined components

Personal blogs & niche content

8 real FG UI Core component families in this group.

8 components

Combined

Blog hero

.fgui-blog-hero

Design systems

Build better interfaces

Ideas, tutorials and practical UI guidance.

BLOG

Combined

Featured post

.fgui-featured-post

FEATURE

Featured

Designing reusable website components

How a consistent system speeds up future builds.

6 min read22 Sep 2026

Combined

Author card

.fgui-author-card

Combined

Share bar

.fgui-share-bar

Combined

Content series

.fgui-content-series

FG UI series

1Foundations8 min

2Components12 min

Combined

Archive panel

.fgui-archive-panel

Combined components

Professional portfolios & CVs

8 real FG UI Core component families in this group.

8 components

Combined

Resume header

.fgui-resume-header

CT

Chris Taylor

Product builder · Joomla developer

UKAvailable remotely

Combined

Project card

.fgui-project-card

PROJECT

FG Bible

Local Bible reader and Joomla component.

JoomlaPHP

Combined

Project gallery

.fgui-project-gallery

MAIN

02

03

Combined

Case study

.fgui-case-study

Case study

Rebuilding an admin experience

One consistent design system across every administrator page.

40%Faster

12Screens

1System

Combined

Experience list

.fgui-experience-list

2024–NOW

ForGoodTools

Product development and UI systems.

2020–2024

Independent

Web products and communities.

Combined

Skills panel

.fgui-skills-panel

Skills

JoomlaPHPCSSProduct design

Combined

Client logo cloud

.fgui-logo-cloud

CLIENT ACLIENT BCLIENT CCLIENT D

Combined

Availability card

.fgui-availability-card

Combined components

Corporate & enterprise websites

9 real FG UI Core component families in this group.

9 components

Combined

Leadership card

.fgui-leadership-card

CT

Chris Taylor

Founder & Product Lead

View profile

Combined

Organisation chart

.fgui-org-chart

CEO

Product

Engineering

Operations

Combined

KPI strip

.fgui-kpi-strip

£2.4MRevenue

18%Growth

24kCustomers

Combined

Office card

.fgui-office-card

London

UK office

ForGoodToolsExample Street, London

Get directions

Combined

Job card

.fgui-job-card

Frontend Developer

RemoteFull-time£45k–£55k

Combined

Job detail

.fgui-job-detail

Careers

Frontend Developer

RemoteFull-timeUK

Build accessible product interfaces using FG UI.

Combined

Press release

.fgui-press-release

22 September 2026

ForGoodTools announces FG UI expansion

New reusable components for common website builds.

Read release

Combined

Press kit

.fgui-press-kit

Press kit

Official logos, screenshots and company information.

Logo pack ZIP Brand guide PDF

Combined

Compliance panel

.fgui-compliance-panel

Compliance

Data protectionReady

Security reviewPassed

Combined components

Landing pages & product microsites

8 real FG UI Core component families in this group.

8 components

Combined

Lead form

.fgui-lead-form

Combined

Trust bar

.fgui-trust-bar

Secure 4.9/5 rated 10k+ users 30-day guarantee

Combined

Benefit list

.fgui-benefit-list

Fast setup

Start building immediately.

Consistent

One reusable system.

Combined

Comparison table

.fgui-comparison-table

Feature	Basic	Pro
Components	150	300
Icons	300	800

Combined

Guarantee card

.fgui-guarantee-card

Combined

Social proof band

.fgui-social-proof

Combined

Product showcase

.fgui-product-showcase

New

One product. One clear message.

Show the product, value and action together.

FG

Combined

Conversion panel

.fgui-conversion-panel

Ready to get started?

Join thousands of customers today.

Combined components

Online communities & forums

9 real FG UI Core component families in this group.

9 components

Combined

Forum category

.fgui-forum-category

General discussion

Talk with the community.

1.2k posts

Combined

Forum topic

.fgui-forum-topic

CT

How are you using FG UI?

Chris12 replies2h ago

Open

Combined

Forum post

.fgui-forum-post

Posted 2h ago

I’ve been testing the new component inventory and it is working well.

Combined

Member directory

.fgui-member-directory

CT

ChrisOnline

LS

LisaMember

Combined

Community sidebar

.fgui-community-sidebar

Combined

Community event

.fgui-community-event

SEP28

Community meetup

7:00 PM · Online

Combined

Poll

.fgui-poll

Which feature should come next?

Combined

Reaction bar

.fgui-reaction-bar

Combined

Moderation panel

.fgui-moderation-panel

Combined components

Educational & e-learning platforms

9 real FG UI Core component families in this group.

9 components

Combined

Course card

.fgui-course-card

Beginner

FG UI Fundamentals

Learn the core design system.

12 lessons2h 40m

Combined

Lesson card

.fgui-lesson-card

01

Design tokens

12 minutes · Video

Combined

Curriculum

.fgui-curriculum

Module 1 · Foundations

3 lessons · 42 min

Module 2 · Components

5 lessons · 1h 12m

Combined

Instructor card

.fgui-instructor-card

Combined

Quiz card

.fgui-quiz-card

Question 3 of 1030%

Which class creates a primary button?

.fgui-btn--primary .btn-primary

Combined

Certificate card

.fgui-certificate-card

Certificate of completion

Awarded to Chris Taylor

FG UI Fundamentals · 22 September 2026

Combined

Learning progress

.fgui-learning-progress

Your progress

72%

18Lessons

4Quizzes

2Hours

Combined

Resource list

.fgui-resource-list

Course workbookPDF Example filesZIP Reference linksWEB

Combined

Enrollment card

.fgui-enrollment-card

Combined components

News, magazine & digital publications

8 real FG UI Core component families in this group.

8 components

Combined

Article hero

.fgui-article-hero

Technology

FG UI 1.1 grows to 393 components

A larger reusable library for common website builds.

CTChris Taylor

22 Sep 20268 min read

Combined

Breaking news banner

.fgui-breaking-news

Combined

Trending list

.fgui-trending-list

Combined

Category navigation

.fgui-category-nav

Combined

Publication masthead

.fgui-masthead

Combined

Issue cover

.fgui-issue-cover

SEPTEMBER

Design Systems Issue

Components, accessibility and product craft.

Combined

Live update

.fgui-live-update

22:48

Live update

All 800 FG UI icons have now passed review.

Combined

News grid

.fgui-news-grid

Tech

Component library expands

FG UI adds website patterns.

Business

Local sites get new tools

Booking, reviews and contact patterns.

Combined components

Non-profit, charity & religious websites

9 real FG UI Core component families in this group.

9 components

Combined

Donation card

.fgui-donation-card

Combined

Campaign card

.fgui-campaign-card

CAMPAIGN

Community food project

Help provide meals for families in need.

Raised68%

Combined

Volunteer card

.fgui-volunteer-card

Volunteer

Community helper

Saturday morningsSouthport

Help welcome visitors and organise activities.

Combined

Ministry card

.fgui-ministry-card

Prayer ministry

Pray with and encourage members of the community.

Learn more

Combined

Sermon card

.fgui-sermon-card

Sunday 20 Sep

Walking by faith

Matthew 14 · 32 min

Combined

Scripture card

.fgui-scripture-card

Daily Scripture

“Let all that you do be done in love.”

1 Corinthians 16:14Read chapter

Combined

Prayer card

.fgui-prayer-card

LS

Lisa2h ago

Please pray for peace and guidance this week.

Combined

Impact card

.fgui-impact-card

12,400meals provided this year

Combined

Donation form

.fgui-donation-form

Basic components

Operational primitives

5 reusable FG UI 1.1 component families in this group.

5 components

Basic

Responsive action group

.fgui-action-group

Basic

Status row

.fgui-status-row

Profile readyUpdated just now

Ready

Basic

Integration status row

.fgui-integration-row

API

Calendar provider

Connected and responding normally.

Basic

Readiness row

.fgui-readiness-row

✓

Identity verified

All required details are present.

Complete

Basic

Comparison row

.fgui-comparison-row

Capacity

72%

Combined components

Operations, portals & workflow

32 reusable FG UI 1.1 component families in this group.

32 components

Combined

Action hub

.fgui-action-hub

Compact action-hub variant

Combined

Needs attention

.fgui-needs-attention

Needs attention2

Payment dueDue today

Pay

Form requiredBefore your visit

Open

Combined

Upcoming list

.fgui-upcoming-list

30
Sep

Consultation10:30 · Main office

Confirmed

02
Oct

Review14:00 · Online

Upcoming

Combined

Availability picker

.fgui-availability-picker

Choose a time

Combined

Status flow

.fgui-status-flow

RequestedDone

ScheduledCurrent

CompletedNext

Combined

Requirement card

.fgui-requirement-card

Required

Complete your details

Action needed

Add the missing information before continuing.

Combined

Account access panel

.fgui-account-access

Continue as guest

Finish this task without creating an account.

Sign in

Use saved details and history.

Combined

Identity summary

.fgui-identity-summary

CT

Christopher TaylorCustomer · verified

Combined

Balance summary

.fgui-balance-summary

Outstanding£120

Paid£480

Credit£25

Combined

Price breakdown

.fgui-price-breakdown

Subtotal£100

Tax£20

Total£120

Combined

Contextual help

.fgui-contextual-help

Combined

Live agent shell

.fgui-live-agent-shell

FG

Support

Available

How can we help?

I need help with my booking.

Combined

Readiness card

.fgui-readiness-card

Production readinessReady

✓

Configuration

Complete

100%

✓

Validation

Passed

100%

Combined

Secure document row

.fgui-secure-document-row

DOC

Assessment.pdfVersion 3 · verified

Combined

Evidence upload

.fgui-evidence-upload

Add evidenceUpload or drop a file here.

Ready

site-photo.jpg

Photo evidence

Combined

Privacy request

.fgui-privacy-request

Privacy

Data export

Processing

Requested 29 September 2026.

Combined

Workspace identity

.fgui-workspace-identity

Angel LengthsHair & Beauty workspace

Southport

Combined

Schedule agenda

.fgui-schedule-agenda

09:30

ConsultationCustomer A · Room 1

11:00

Follow-upCustomer B · Online

Combined

Resource assignment

.fgui-resource-assignment

Assigned resources

StaffLisa

LocationStudio 1

EquipmentStation A

Combined

Job status

.fgui-job-status

Export jobRunning

65% completeStarted 2 min ago

Combined

Dashboard empty section

.fgui-dashboard-empty

Nothing here yet

No upcoming items

New items will appear here automatically.

Combined

Metric and action card

.fgui-metric-action

Open tasks123 due today

View tasks

Combined

Mobile action dock

.fgui-mobile-action-dock

Combined

Time context

.fgui-time-context

Your time10:30Europe/London

Business time11:30Europe/Paris

Combined

Allocation summary

.fgui-allocation-summary

Budget allocation£10,000

Allocated £6,500Remaining £3,500

Combined

Compliance matrix

.fgui-compliance-matrix

Alex MorganFirst aidValidDec 2027

Sam LeeSafetyDue soonOct 2026

Combined

Capacity forecast

.fgui-capacity-forecast

Capacity forecast

Mon 45%

Tue 72%

Wed 88%

Thu 60%

Combined

Import preview

.fgui-import-preview

Import mapping

CSV column
customer_email

FG field
Email

Ready to import

Combined

Controlled exception panel

.fgui-exception-panel

Exception

Approval required

Controlled

This action is outside the normal rule and requires approval.

Combined

Workflow evidence

.fgui-workflow-evidence

1

Submitted

Evidence received

Complete

2

Reviewed

Waiting for reviewer

Current

Combined

Guided tour

.fgui-guided-tour

Combined

Metric card

.fgui-metric-card

Expected today

£3,840£1,210 already paid

FG UI 1.2

Reader & selection tools

Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.

BasicNEW

Edge navigation

.fgui-edge-nav

BasicNEW

Text size control

.fgui-text-size

Readable content responds without resizing the application chrome.

BasicNEW

Reader navigation selector

.fgui-reader-nav-mode

Navigation

BasicNEW

Reader tool display selector

.fgui-action-display

Tool labels

BasicNEW

Selection context menu

.fgui-selection-menu

BasicNEW

Selection action bar

.fgui-selection-actions

BasicNEW

Highlight palette

.fgui-highlight-palette

BasicNEW

Text annotation

.fgui-annotation

BasicNEW

Bookmark toggle

.fgui-bookmark

FG UI 1.2 + 1.3 DEV

Theme & preferences

FG UI 1.2 theme controls plus the additive 1.3 Theme Composition foundation. FG UI 1.2 Stable contracts remain available unchanged.

BasicNEW

Theme switcher

.fgui-theme-switcher

Basic1.3 DEV

Theme surface

.fgui-theme-surface

Dark local surface

Components inherit dark semantic tokens without changing the global theme.

Nested Light surface

Light can be restored inside a Dark region using the same component contracts.

Basic1.3 DEV

Accent colour picker

.fgui-accent-picker

Accent colourHorizontal hue only

Generated HEX

FG UI derives accessible Light/Dark semantic accent recipes from the chosen hue.

BasicNEW

Theme compatibility status

.fgui-theme-compatibility

Compatible

FG DarkFG UI 1.2.x

BasicNEW

User preference card

.fgui-preference-card

Reading preferences

Theme, text size and navigation mode.

Saved

FG UI 1.2

Health, maintenance & diagnostics

Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.

BasicNEW

Health finding

.fgui-health-finding

Optional cleanup

Three legacy files can be removed safely.

Warning

BasicNEW

Maintenance scan bar

.fgui-scan-bar

Integrity scan82%

Checking assets…

BasicNEW

Maintenance check card

.fgui-maintenance-check

Asset integrity

Compare installed files with the expected package manifest.

BasicNEW

Verification result

.fgui-verification-result

Verification passed

Installed files match the expected state.

BasicNEW

Environment diagnostics

.fgui-environment-status

RuntimeSupported

BrowserCompatible

StorageAvailable

BasicNEW

Package status

.fgui-package-status

FG UI Theme Packv1.0.0

Installed

BasicNEW

Batch progress

.fgui-batch-progress

Updating records640 / 1,000

Batch 7 of 10

BasicNEW

Lock / checkout status

.fgui-lock-status

Checked outEditing session active

BasicNEW

API health card

.fgui-api-health

Query APIOnline

Search APIDegraded

FG UI 1.2

Alternative collection

Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.

BasicNEW

Button alternative

.fgui-btn-alt

BasicNEW

Icon button alternative

.fgui-icon-btn-alt

BasicNEW

Card alternative

.fgui-card-alt

Alternative

Layered card

Independent card treatment without changing .fgui-card.

BasicNEW

Choice card alternative

.fgui-choice-card-alt

Priority supportAlternative selectable card treatment.

BasicNEW

Input alternative

.fgui-input-alt

Alternative input

BasicNEW

Textarea alternative

.fgui-textarea-alt

Alternative textarea

BasicNEW

Select alternative

.fgui-select-alt

Alternative select

BasicNEW

Custom select alternative

.fgui-custom-select-alt

Alternative custom select

BasicNEW

Search alternative

.fgui-search-alt

BasicNEW

Alert alternative

.fgui-alert-alt

Alternative notice

Soft semantic surface with compact message layout.

BasicNEW

Status alternative

.fgui-status-alt

Operational

BasicNEW

Tabs alternative

.fgui-tabs-alt

Overview panel

BasicNEW

Accordion alternative

.fgui-accordion-alt

Inset panel content.

BasicNEW

Modal alternative

.fgui-modal-alt

BasicNEW

Toast alternative

.fgui-toast-alt

SavedAlternative toast presentation.

BasicNEW

Notification alternative

.fgui-notification-alt

New activity

A compact inbox-style notification.

2m

BasicNEW

Table alternative

.fgui-table-alt

Item	Status
Assets	Healthy
API	Online

BasicNEW

Toolbar alternative

.fgui-toolbar-alt

BasicNEW

Pagination alternative

.fgui-pagination-alt

BasicNEW

Side navigation alternative

.fgui-side-nav-alt

BasicNEW

Settings group alternative

.fgui-settings-group-alt

Reading

Controls are grouped in an inset settings panel.

Remember choices

BasicNEW

Progress alternative

.fgui-progress-alt

BasicNEW

Empty state alternative

.fgui-empty-state-alt

No results yet

Start by creating your first item.

BasicNEW

Danger zone alternative

.fgui-danger-zone-alt

Delete workspace

This action cannot be undone.

FG UI 1.2

Reader & theme experiences

Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.

CombinedNEW

Reader settings sheet

.fgui-reader-settings

Navigation

CombinedNEW

Reading shell

.fgui-reading-shell

Chapter 3

Accessible long-form reading

A focused content width with reader-aware typography.

FG UI keeps the document readable while leaving navigation and application controls outside the reading measure.

The shell can be combined with text sizing, annotations and edge navigation.

CombinedNEW

Paged / book reader

.fgui-page-reader

Page 12

Chapter heading

A page-oriented presentation for books, manuals and document readers.

CombinedNEW

Theme card

.fgui-theme-card

FG Dark

Built for FG UI 1.2.x

Available

CombinedNEW

Theme gallery

.fgui-theme-gallery

Default Light

FG Dark

CombinedNEW

Theme preview

.fgui-theme-preview

Previewing FG Dark

Preview surface

Theme packages change semantic tokens, not component contracts.

CombinedNEW

Theme installer

.fgui-theme-installer

Install theme package

Validate manifest, compatibility and token permissions before activation.

Drop .fgui-theme packageor choose a file

Compatible

Manifest validFG UI 1.2.x

FG UI 1.2

Operations, maintenance & integrations

Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.

CombinedNEW

Health dashboard

.fgui-health-dashboard

System health

4 checks

Assets

Healthy

Cleanup

Optional action available

CombinedNEW

Integrity report

.fgui-integrity-report

Integrity report1 finding

Files checked

842

Matched

841

Unexpected

1

Review requiredOne file is not present in the package manifest.

CombinedNEW

Safe repair panel

.fgui-safe-repair

Repair available

Remove legacy file

The file is known to be obsolete and is not referenced by the current package.

After repairRun integrity verification automatically.

CombinedNEW

Package dependency map

.fgui-package-dependencies

FG UI ThemeReady

FG UI ≥ 1.2Installed

Theme tokensValid

CombinedNEW

Data package status

.fgui-data-package

Optional data

Demo content pack

Sample records for development and training.

Not installed12.4 MB

CombinedNEW

Install completion

.fgui-install-result

Installation complete

All files, data migrations and health checks completed successfully.

Files verifiedHealth passed

CombinedNEW

Update report

.fgui-update-report

Update complete

1.1.0 → 1.2.0

Verified

64 additive component families
Theme package foundation
Reader and maintenance patterns

CombinedNEW

Migration assistant

.fgui-migration-assistant

Migration readiness

Ready with one review

Theme compatibilityReady

Deprecated integrations1 review

CombinedNEW

Safe uninstall wizard

.fgui-uninstall-wizard

1Choices

2Verify

3Remove

Keep theme dataRemove theme data

CombinedNEW

API tester

.fgui-api-tester

Endpoint

200 OK · 84 ms

CombinedNEW

Integration tester

.fgui-integration-tester

External integration

Test authentication, request and response handling.

Configured

CombinedNEW

Preference manager

.fgui-preference-manager

Preferences

Your interface

ThemeSystem

ReadingLarge text · Edge nav

What is new or updated?

Actions & branding

Cards & identity

Standard card

Layout primitives

Forms & controls

Navigation & choice

Feedback & loading

No items yet

Disclosure & overlays

Data & structure

Media & charts

FG UI carousel

Responsive by default

One consistent system

Website content & identity

Clear section heading

Forms & interaction