FG UI DEV

Real-world test

Large combinations of real FG UI components for spotting nesting, responsive, spacing and interaction problems.

Real-world test

Test FG UI as people actually build with it

This page deliberately nests components, adds realistic neighbouring controls and lets JavaScript enhance them in place.

FG
i
What to look for:

labels touching controls, buttons losing margins, generated selects moving out of fields, nested text inheriting the wrong colour, controls overflowing cards, and desktop layouts failing on narrow screens.

Real-world test

Website composition

Navigation, announcement, hero, status, buttons, feature cards and CTA in one realistic frontend flow.

Real-world example
New FG UI development build Jump to form stress tests
New release

Advertise a book with reusable FG UI blocks

This is a realistic marketing composition using navigation, status, typography, buttons, cards and a responsive visual area together.

BK

Easy to read

Feature card with icon, heading and body text.

Highly rated

★★★★★

Rating mixed with normal component content.

Instant access

Cards should remain equal and wrap cleanly.

Ready to start reading?

A call to action tests light text and buttons on the primary surface.

Real-world test

Forms and field rhythm

Standard fields mixed with help text, validation, enhanced selects, checks, switches, actions and card layouts.

Real-world example

Account form

Labels, help text, generated controls and actions together.

Required

Field states

Success, error, groups, search and range.

Default

Standard card

Check the status-to-heading gap and general card spacing.

Healthy

Success card

Status, heading, paragraph and button should read as separate layers.

Needs review

Warning card

Longer content tests wrapping while maintaining consistent vertical rhythm.

Real-world test

Enhanced select combinations

Selects deliberately placed beside labels, help text and actions so JavaScript-generated layout problems are obvious.

Real-world example
Real-world test

Cards, status, feedback and loading

Checks composition gaps, nested content, feedback surfaces, progress and loading states.

Real-world example

Interactive card

Header + status + footer

Live

Hover states should not disturb neighbouring cards.

IMG
Media

Horizontal card

Tests media, status, heading and text in a compact row.

Selected card

Selected outline plus nested button and status.

Selected
Information

Alert content should wrap without crushing the icon.

Success

Changes were saved successfully.

Warning

Review this setting before continuing.

Error

Something failed and needs attention.

Loading and progress

Loading account data
Please keep this page open.
Profile complete72%
Real-world test

Navigation, filters and data tables

Breadcrumbs, toolbar, search, chips, tabs, table, pagination and stepper used as one admin workflow.

Real-world example
Home/Users/Christopher
24 results
UserRoleStatusLast activeAction
CTChristopher Taylor
AdministratorActiveJust now
LSLisa Smith
EditorPending12 min ago
FGForGood Dev Team With A Deliberately Long Name
DeveloperInvitedYesterday
Showing 1 to 3 of 24
✓
Account
✓
Profile
3
Review
4
Done
Real-world test

Menus, accordion and overlays

Interactive components beside normal cards so opening and closing states can expose stacking and spacing issues.

Real-world example

Menu + tooltip + toast

FG UI tooltip

Accordion

Open by default to test nested text spacing.

Overlays

Static popover specimen
Useful for checking text and actions in a floating surface.
Real-world test

Authentication and security

Full auth shell plus password controls, verification inputs and security cards.

Real-world example

Log in

Enter your account details below.

Forgot password?
or
FG

Enter verification code

Six fields working together inside a compact authentication box.

Security devices

Two-factor authentication

Protection enabled for this account.

On
Trusted device

Windows desktop, London.

Real-world test

Community and social UI

Composer, post, user card, notification, presence, counters and activity feed combined.

Real-world example
CT
CT
Christopher Taylor
2 minutes ago
This post tests avatar, metadata, body text, media and equal-width actions in one component.
Media preview
LS
Lisa Smith
Editor · Active now
FG
New comment
A user replied to your post with a message that is deliberately long enough to wrap on small screens.
2
UI
Build complete
Your development package is ready.
Done
1
Account created
Today at 09:30
2
Profile updated
Today at 10:15
3
First post published
Today at 11:42
Real-world test

Application shell

Topbar, sidebar, side navigation, statistics, cards and list content nested in a realistic app frame.

Real-world example
FG
FG AdminControl panel
CT
Dashboard

Overview

2,617
Members
+12% this month
184
Posts
+8 today
99.9%
Uptime
Healthy

Recent activity

App shell + card + list

LS
Profile updated
2 minutes ago
Done
FG
New extension uploaded
18 minutes ago
Real-world test

Planning and organisation

Timeline, calendar and Kanban layouts exercise grids, scrolling and responsive behaviour.

Real-world example

Timeline

1
Design approved
Monday
2
Development build
Tuesday
3
User testing
Next step

Calendar

September 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
To do2
Audit form spacingFG UI Core
Check mobile navigationResponsive
In progress1
Real-world exampleDevelopment test
Done2
800 iconsComplete
Select enhancementTesting
Real-world test

Media and file workflows

Media picker, dropzone, upload progress, file rows and an interactive carousel.

Real-world example

Media and upload

Book cover preview
Drop files hereor click to browse
PDF
book-preview.pdf
72%
cover.jpg
1.4 MB · Image

Carousel

1
Slide one

Build with FG UI

Carousel content mixes visual surfaces, status, text and buttons.

2

Responsive by default

Second slide checks switching behaviour.

3

One consistent system

Third slide checks dark visual contrast.

Real-world test

Pricing and commerce

Pricing cards, product cards, cart lines and order summary test equal heights and action alignment.

Real-world example

Pricing

Equal-height cards, badges, long feature lists and bottom-aligned actions.

Starter

For small projects.

£9/month
  • Core components
  • 800 icons
  • Email support
Popular

Professional

For growing products.

£29/month
  • Everything in Starter
  • Advanced patterns
  • Priority support
  • Team access

Business

For larger teams.

£79/month
  • Everything in Professional
  • Unlimited projects
  • Admin controls
BK
In stock

FG UI Handbook

A product card combined with status and commerce actions.

£19
UI
Digital

Component Guide

Second product keeps the grid honest.

£12
DEV
Preview

Developer Notes

A third product makes the responsive product grid exercise all columns.

Free

Order summary

BK
FG UI Handbook
Quantity 1
£19
Subtotal£19
DeliveryFree
Total£19
Real-world test

Search, profile and long-form content

Profile header, tags, search results, article cards and article typography in one content-heavy flow.

Real-world example
CT

Christopher Taylor

ForGoodToolsUnited KingdomJoined 2026
FG UIJoomlaDevelopment

FG UI documentation

Documentation result with longer descriptive text and a secondary action.

Open documentation

FG UI community

A second result tests vertical rhythm and wrapping.

View community
ARTICLE
Guide

How reusable UI components speed up development

Article card combines media, status, long heading, body copy and a link.

Read article
22 September 20266 minute readFG UI

A realistic long-form content specimen

Long-form content needs to coexist with the same tokens, links, spacing and callouts used everywhere else.

This paragraph deliberately contains enough text to wrap over several lines at narrower widths. It helps expose unexpected typography, inherited margins and content-width problems.

Reusable components should remain predictable when they are placed next to real content.

What this checks

  • Heading rhythm
  • Paragraph spacing
  • Lists and blockquotes
  • Links inside long-form content
Real-world test

Modules and widgets

Widget chrome variants combine headers, status, meters, dark surfaces and footer actions.

Real-world example

Recent members

ChristopherOnline
Lisa5m
ForGood Dev1h

Monthly goal

72%
Raised£720 / £1,000

Dark widget

Local
Local Bible Status

Dark module content tests nested component contrast.

Real-world test

Charts and summaries

Static data visualisations combined with statuses, key/value information and summary blocks.

Real-world example
Weekly activity+18%
72%Complete
Engagement+12.4%

Key/value + summary

Version
1.0.2-rc.1
Icons
800
Runtime dependencies
0
760UI classes
104tokens
99hooks
Real-world test

Empty, error and consent states

Large special states and multi-action banners test containment and responsive stacking.

Real-world example
?

No results yet

Empty state inside a normal grid should remain centred and readable.

404

Page not found

Special state tests large type inside a contained surface.

Cookie preferences

This banner tests a long message beside multiple actions and must stack cleanly on mobile.

Real-world test

Responsive stress cases

Deliberately awkward text, dense actions and enhanced fields help reveal overflow and spacing problems.

Real-world example
Narrow-screen stress

Very long responsive heading with several words that should wrap naturally

A long normal sentence should wrap naturally even when several badges, buttons and controls live nearby.

VeryLongIdentifierUsedToTestTruncationWithoutForcingPageOverflow1234567890
Long tag label

Dense action stack

FG UI Joomla