Layouts

Components answer "what does a card look like". These answer the question people actually arrive with — what does a page look like. 50 complete compositions, from a storefront to a payroll run to a forum thread, each one built only from McGowanStyle classes.

Every preview below is the live layout in an iframe, not a screenshot, so what you see is what the framework renders today.

Commerce

Shop home with a promoted hero, categories and a product rail.

Gallery, buy box, specification table and reviews.

Faceted catalogue: filter rail, sort bar, product grid.

Line items, quantities and an order summary that follows.

Stepped checkout with address, delivery and payment.

Touch-first till: product pad, running order, tender.

Admin

The sidebar-and-content frame most admin tools need.

KPI row, trend chart, breakdown table.

List, detail and activity timeline in three panes.

Dense table with bulk actions, filters and pagination.

Sectioned settings with a sticky sub-navigation.

Members, roles and invitations with a permission matrix.

Finance

Balances, spend chart and recent transactions.

A printable invoice with line items and totals.

Current plan, usage against limits, payment method, history.

Holdings, allocation and performance over time.

Claim with receipts, categories and an approval trail.

Pay run with employee rows, totals and a confirm step.

Community

Categories, topic counts and latest activity.

Threaded discussion with a reply composer.

Composer, feed and a suggestions rail.

Cover, identity block, stats and tabbed content.

Conversation list, message thread and composer.

Nested replies with voting and moderation controls.

Publishing

A lead story, secondary pieces and a section rundown.

Standfirst, body measure, pull quotes and related reading.

Featured post, archive list and tag filters.

Three columns: navigation, content, on-page contents.

Encyclopaedic article with an infobox and citations.

Versioned releases with change types and dates.

Marketing

Hero, proof, features, pricing teaser and a closing call.

Tiers, a highlighted plan and a comparison table.

Alternating feature sections with supporting imagery.

Masonry quotes with logos and a metrics strip.

Single-purpose page with a countdown and one field.

Us-versus-them table with a fair summary.

Productivity

Columns of cards with counts and a work-in-progress limit.

Month grid with events, plus an agenda rail.

Grouped tasks with priorities, due dates and quick add.

Tree, file grid, breadcrumb and a details pane.

Folders, message list and reading pane.

Phases, milestones and dependencies across a date axis.

Media

Featured player, rails by topic and a continue-watching row.

Masonry grid with albums and a lightbox trigger.

Library, queue and a persistent transport bar.

Episode with player, chapters, transcript and show notes.

Utility

Split authentication page with providers and a fallback.

Stepped setup with progress and a skip that works.

Query, facets, results with highlighting, and no-result help.

A 404 that helps rather than apologises.