14 March · 4 min
The first one
One or two lines about it. Enough to decide whether to open it.
Read itThe component library
192 components, rendered
Everything UCM Studio ships, on one page and running — not screenshots. Add the UCM Component block in the editor, pick one, choose a style, a size and light or dark, and it becomes ordinary blocks you edit like any other content.
Pages
18 in this groupApp home
The figures, the charts behind them, the work beside them — a whole first screen.
page-appOverview
Where the account stands this morning.
Revenue€24,91012%How Revenue has moved.
Signups3184%How Signups has moved.
Refunds112%How Refunds has moved.
Last six months
ExportTotal€128,400
Average€21,400
Best month€31,900
NameRoleStatus
Ada LovelaceEngineerActive
Grace HopperAdmiralInvited
Alan TuringAnalystPaused
Article list
Everything written, newest first, with a way to the rest.
page-blogRecords
A table with the filters above it and the rest below.
page-listRecords
Everything, narrowed by whatever you need it narrowed by.
NameRoleStatus
Ada LovelaceEngineerActive
Grace HopperAdmiralInvited
Alan TuringAnalystPaused
About
Who you are, the numbers, and the people.
page-aboutA headline that says what this is
One sentence of explanation underneath, no longer than it needs to be.
Total128
Open24
Done96
Overdue8
Section heading
One line saying what this section is for.
AL
Ada Lovelace
Engineering
GH
Grace Hopper
Operations
AT
Alan Turing
Research
Ready when you are
Say what happens next, in one sentence.
Sign-in page
One card, centred, and nothing else to look at.
page-signinLaunch page
A landing page that shows the numbers as well as making the claims.
page-launchNew
One clear sentence about what this is
A second that says who it is for, and what they get.
NorthwindContosoInitechUmbrellaGlobex
The numbers, not only the claims
Every figure on this page is a chart you can point at your own data.
Orders each day
Where they came from
✓
Fast to set up
Replace this with the thing somebody actually gets.
✓
Built to last
One short sentence is enough here.
✓
Yours to keep
Say what happens, not what you call it.
Last six months
ExportTotal€128,400
Average€21,400
Best month€31,900
1
Tell us what you need
One sentence about what the person does first.
2
We put it together
What happens after that, and how long it takes.
3
You get it back
What they end up with. This is the line people read.
Replace this with something a real person said. A sentence they would recognise as theirs is worth more than three you wrote for them.
Grace Hopper
Rear Admiral, US Navy
How long does it take?
Answer it in a sentence. If it needs three, the question is really two questions.
Can I change my mind?
Say what actually happens, including when the answer is no.
What does it cost?
A number here is worth more than a link to a number.
Ready when you are
Say what happens next, in one sentence.
One record
One of them, with its details beside it and its history under.
page-recordLanding page
What it is, who it is for, what it costs, and one thing to do.
page-landingOne clear sentence about what this is
A second that says who it is for, and what they get. Two lines is usually enough.
NorthwindContosoInitechUmbrellaGlobex
✓
Fast to set up
Replace this with the thing somebody actually gets.
✓
Built to last
One short sentence is enough here.
✓
Yours to keep
Say what happens, not what you call it.
Short is better. One sentence they would say out loud.
Ada Lovelace
Three of these are worth more than one long one.
Grace Hopper
Use their words, including the awkward ones.
Alan Turing
Ready when you are
One sentence about what happens next.
Pricing
The plans, then the questions people ask before paying.
page-pricingSimple pricing
Every plan includes everything. What changes is how much of it.
How long does it take?
Answer it in a sentence. If it needs three, the question is really two questions.
Can I change my mind?
Say what actually happens, including when the answer is no.
What does it cost?
A number here is worth more than a link to a number.
Ready when you are
One sentence about what happens next.
Contact
A form on one side, the other ways to reach you on the other.
page-contactGet in touch
We answer within a working day, and a real person writes the reply.
Get in touch
- Reference
- INV-2043
- Opened
- 14 March
- Owner
- Ada Lovelace
Something worth knowing
A sentence explaining what happened and what to do about it.
Article
One piece of writing, with its trail and what it is about.
page-articleThe thing this article is about
14 March · 4 min · by somebody who was there
Open with the point rather than with the background. Somebody who reads only this paragraph should still know what happened.
Then the background, once they have a reason to want it. Two or three paragraphs is usually the whole of it.
DesignResearchIn progress
Ready when you are
Say what happens next, in one sentence.
Not found
The page that is not there, saying what to do instead.
page-missingNothing here yet
When something is added it will show up here. Until then there is nothing to see, which is not the same as something being wrong.
Add the first oneProfile
Who somebody is, and the form for changing it.
page-profileProduct page
One thing for sale, with everything somebody asks before buying.
page-productThe thing itself
€39€5934% off
Two or three lines about what it is and who it is for. The rest belongs further down.
How long does it take?
Answer it in a sentence. If it needs three, the question is really two questions.
Can I change my mind?
Say what actually happens, including when the answer is no.
What does it cost?
A number here is worth more than a link to a number.
The first
€39
The second
€45
The third
€28
Settings
Sections down one side, the settings themselves on the other.
page-settingsSettings
Changes here take effect for everybody on this account.
Get in touch
Something worth knowing
A sentence explaining what happened and what to do about it.
Checkout
The basket on one side, what it comes to on the other.
page-checkout- 1Details
- 2Address
- 3Confirm
The thing itself
Medium · Blue
€782 × €39
Summary
Items€78.00Delivery€4.95VAT€16.59Total€99.54
Dashboard page
The figures, a chart, and what happened lately.
page-dashboardDashboard
Where things stand this morning.
Total128
Open24
Done96
Overdue8
This year
Share
Customers1,284
Retained92%
Average order€78
This month
Lately
- 10:24
Someone signed up.
- 09:02
An invoice was paid.
- Yesterday
A ticket was closed.
Signed up128
Paid€4,210
Getting started
Where somebody is in a sequence, and the step in front of them.
page-onboardingThree things and you are set up
None of them takes longer than a minute, and you can stop halfway.
- 1Details
- 2Address
- 3Confirm
Get in touch
Buttons
4 in this groupButton
A single button or link.
buttonButton row
A primary action with a secondary one beside it.
button-rowWith icons
Buttons with an icon before or after the word — download, send, add, next.
button-iconsJoined
Buttons in a row with one border between them.
button-groupHeroes
8 in this groupCentred
A headline, a sentence and two buttons.
heroA headline that says what this is
One sentence of explanation underneath, no longer than it needs to be.
Across the window
Edge to edge, with the words in a column inside it.
hero-bandNew
One clear sentence about what this is
A second that says who it is for, and what they get.
Under a see-through header
A dark picture from the very top, with room for a header that lies over it, and the words in the middle.
hero-underNew this season
One clear sentence, over the picture
The header above it stays see-through until the page moves.
Split
Words on one side, a picture on the other.
hero-splitOne clear sentence about what this is
A second that says who it is for, and what they get. Two lines is usually enough.
Picture beside
Words and a picture, either way round.
hero-mediaNew
One clear sentence about what this is
A second that says who it is for, and what they get. Two lines is usually enough.
Picture behind
A picture across the whole of it, with the words over it.
hero-coverOne clear sentence about what this is
Say who it is for and what they get. A picture behind the words is a mood, so keep the words short.
Picture under
A headline, and the thing itself underneath.
hero-belowA headline that says what this is
One sentence underneath, then show it. A picture of the thing working says more than a third line.
With sign-up
A headline with the field that follows from it.
hero-signupOne clear sentence about what this is
Say who it is for. Then ask for the one thing you need.
Headers
5 in this groupSimple
Brand, links, an action — and a burger that opens the menu across the page.
headerYour site
Sign inApp bar
The bar above an app: a burger, alerts, a language and whoever is signed in.
header-appOver a picture
See-through over the first section until the page moves, then a bar. Choose Dark for light words over a dark picture; it carries a logo for each.
header-overWith search
A menu with somewhere to type.
header-searchStacked
The name over the menu, both centred.
header-centredCards
9 in this groupBasic
A titled panel with text and an action.
cardCard title
One line about what this is.
Replace this with the body of the card. Everything here is an ordinary block you can edit or delete.
Horizontal
The picture on one side and the words on the other; stacked on a phone.
card-rowCategory
A title that says what it is
Two or three lines about it, which the picture beside it does not have to wait for.
Read more →Three across
Three cards that reflow to one column on their own.
card-gridFirst
A sentence about this one.
Second
A sentence about this one.
Third
A sentence about this one.
Words over the picture
The picture is the card, with the title on a dark band across it.
card-overMountains
Twelve routes
Coast
Eight routes
Forest
Fifteen routes
Blog post
A picture, a category, the title, a line of it, and who wrote it when.
card-postHow to plan the first week
The opening line of the post, long enough to decide whether to read the rest.
Five things we changed
The opening line of the post, long enough to decide whether to read the rest.
A year of shipping
The opening line of the post, long enough to decide whether to read the rest.
The whole card a link
Anywhere on it opens the link — the title is the one real link, with an arrow that moves.
card-linkGetting started
Everything you need for the first hour.
Guides
Step by step, for the common jobs.
Reference
Every option, and what it does.
Event
The date large beside what it is, where and when.
card-event14Mar
02Apr
With a picture
A picture above the words — a post, or a product.
card-mediaTeam member
A picture, a name, what they do, and a way to reach them.
card-personAnna Berg
Design
Get in touchBen Carter
Engineering
Get in touchCleo Dunn
Support
Get in touchDan Evers
Sales
Get in touchLists
8 in this groupList
Items with a mark before each — dots, ticks, crosses, numbers, arrows or dashes.
list- The first thing, in a few words
- A second one, a little longer so it shows how a line that wraps lines up under the words rather than the mark
- And a third
Numbered, with words
Numbered items, each with a title and a line under it — instructions, a process.
list-steps- Make an accountAn email address and a password; nothing else yet.
- Add what you sellA name, a price and a picture for each.
- Share the linkYour page is live the moment you have one thing on it.
Links
A list of places to go, each a whole row with an arrow that moves.
list-linksOn one line
A few facts in a line with a dot between them — under a title, in a footer.
list-inline- 12 March 2026
- 6 min read
- Guides
- Anna Berg
Divided, with values
A line between each, a name on the left and its value on the right — opening hours, specifications.
list-divided- Monday – Friday9–18
- Saturday10–16
- SundayClosed
In columns
A long list of ticks in two columns — everything that is included. One column on a phone.
list-columns- Unlimited pages
- Your own address
- Forms and file uploads
- Search and filters
- Two languages
- Daily backups
- Email support
- Clean uninstall
Features
An icon, a title and a line for each — what something does, down a column.
list-features- Fast from the first dayNothing to install and nothing to configure before it works.
- Private by defaultOnly the people you add can see what you put in.
- In their languageEvery word on the page can be translated, including ours.
Pros and cons
What is good and what is not, side by side — ticks and crosses.
list-pros-consGood
- Quick to set up
- Works on a phone
- Costs nothing to start
Not so good
- No offline mode yet
- English and Finnish only
Grids
8 in this groupEven columns
Columns of the same width, stepping down by divisors.
grid-evenColumn 1
What goes here is the page, not the grid.
Column 2
What goes here is the page, not the grid.
Column 3
What goes here is the page, not the grid.
With a sidebar
A main column and a narrower one beside it.
grid-asideThe page itself
Whatever this page is for goes here, at whatever length it needs.
Bento
Boxes of different sizes that still line up.
grid-bentoThe big one
What goes here is the page, not the grid.
Tall
What goes here is the page, not the grid.
Small
What goes here is the page, not the grid.
Wide
What goes here is the page, not the grid.
Small again
What goes here is the page, not the grid.
Two, unevenly
Two columns at two thirds and one third.
grid-unevenTwo thirds
What goes here is the page, not the grid.
One third
What goes here is the page, not the grid.
A row across the top
One cell the width of the grid, with the rest below it.
grid-bannerThe one that spans
ucm-cell-wide takes every column the grid has, however many that is.
Then one
What goes here is the page, not the grid.
And another
What goes here is the page, not the grid.
And a third
What goes here is the page, not the grid.
One large, the rest small
One cell twice the size, and smaller ones around it.
grid-featureThe one worth looking at
Two columns wide and two rows tall, so it reads first.
Beside it
What goes here is the page, not the grid.
Under that
What goes here is the page, not the grid.
And on
What goes here is the page, not the grid.
And on again
What goes here is the page, not the grid.
Last
What goes here is the page, not the grid.
Tiles that reflow
As many across as fit, with no breakpoint to pick.
grid-galleryDashboard
A chart, the figures under it, and a column beside.
grid-dashboardThis month
Lately
- 10:24
Someone signed up.
- 09:02
An invoice was paid.
- Yesterday
A ticket was closed.
Signed up128
Paid€4,210
Features
3 in this groupTwo columns
A heading beside the list it introduces.
feature-listWhat you get
One paragraph, then the list. The list does the work.
- The first thing somebody gets
- The second, said plainly
- A third, if there is one
- And the one they did not expect
Three with marks
What it does, three at a time, each with a mark.
feature-grid✓
Fast to set up
Replace this with the thing somebody actually gets.
✓
Built to last
One short sentence is enough here.
✓
Yours to keep
Say what happens, not what you call it.
Numbered steps
What happens first, then next, then last.
how-it-works1
Tell us what you need
One sentence about what the person does first.
2
We put it together
What happens after that, and how long it takes.
3
You get it back
What they end up with. This is the line people read.
Pricing
3 in this groupThree plans
Three plans, with one of them recommended.
pricingComparison
What each plan has, said with a mark rather than a sentence.
comparisonFeatureFreeTeamCompany
Everything in the editor
More than one person—
Someone to ask——
Two plans
One choice against another, with nothing in between.
pricing-simpleTestimonials
3 in this groupQuote across the window
One quote, edge to edge, with nothing else on the line.
quote-bandSomething a real person said, short enough to read in one go.
One quote
What somebody said, and who said it.
testimonialReplace this with something a real person said. A sentence they would recognise as theirs is worth more than three you wrote for them.
Grace Hopper
Rear Admiral, US Navy
Three quotes
Several short ones rather than one long one.
testimonial-gridShort is better. One sentence they would say out loud.
Ada Lovelace
Three of these are worth more than one long one.
Grace Hopper
Use their words, including the awkward ones.
Alan Turing
Calls to action
3 in this groupOne action
One line and one button, at the end of a page.
ctaReady when you are
One sentence about what happens next.
Bar along the bottom
The one thing to do, kept in view while the page scrolls.
cta-barWith two actions
A heading with a choice underneath it.
cta-splitReady when you are
Say what happens next, in one sentence.
Sections
19 in this groupQuestions
Questions that open without any JavaScript.
faqHow long does it take?
Answer it in a sentence. If it needs three, the question is really two questions.
Can I change my mind?
Say what actually happens, including when the answer is no.
What does it cost?
A number here is worth more than a link to a number.
Map
Where you are, with the address on top of it.
mapCode
A sample, in the font code is written in.
codeadd_filter( 'ucm_prefix', function () {
return 'app';
} );Video
A place for a video, with the play mark over it.
videoPicture with a caption
A picture and the line saying what it is.
figureRoadmap
What is being built now, what is next, and what comes later.
roadmapNow
BuildingOffline mode
Keep working without a connection.
Faster search
Results as you type.
Next
PlannedShared folders
One place for a whole team.
Later
ExploringA desktop app
If enough of you ask for it.
Note
Something worth knowing while you read, without an alarm.
calloutDivider
A line, with or without a word on it.
divideror
Plain section
A heading, an intro line and room for whatever follows.
sectionSection heading
One line saying what this section is for.
Pull quote
One sentence lifted out of the writing around it.
pullquoteThe sentence somebody would underline if this were on paper.
Team
The people, with a face and a job each.
team-gridAL
Ada Lovelace
Engineering
GH
Grace Hopper
Operations
AT
Alan Turing
Research
Screen heading
Where you are, what it is called, and what you can do here.
page-headBig numbers
A row of large figures with what each one counts — for the page that sells, not the dashboard.
stats-band12k
people use it every week
98%
would recommend it
24
countries
4.9
average rating
Logo row
Who else uses it, said quietly.
logo-cloudNorthwindContosoInitechUmbrellaGlobex
Announcement
One line across the top of everything.
announcementSomething worth interrupting for.Read it
Article opening
What it is called, who wrote it, and the picture.
article-headCategory
The title of the piece, as long as it needs to be
The standfirst: one sentence that says why somebody should read the rest.
Picture and words
A picture, and what it is about beside or above it.
section-mediaHow it works
What this part of the page is about
Two or three sentences. Say what happens, not what it is called — the picture beside this is doing the naming.
- Something it does
- Something else it does
- And the one people ask about
How to reach us
Address, phone, email and opening hours.
contact-detailsAddress
Street 1, 00100 Town
Phone
+358 40 000 0000Hours
Mon–Fri, 9–17
Two with pictures
Two things explained, the pictures on opposite sides.
section-media-pairScreens
6 in this groupDesktop and phone
Both at once — the phone over the corner of the browser.
screen-pairOn a phone
A phone, with the notch and the bar at the bottom.
screen-phoneOn a laptop
The same picture, on a laptop.
screen-laptopOn a tablet
Upright, with room for a portrait screenshot.
screen-tabletIn a browser
A picture of your site, in a browser window.
screen-browserWith a caption
A browser window with a line under it saying what it is.
screen-captionCarousels
2 in this groupScrolling row
Things side by side that scroll and settle, with no script.
carouselA row of things
Scroll or swipe →
The 1 th thing
One line about it. Four or five of these is a row worth scrolling.
The 2 th thing
One line about it. Four or five of these is a row worth scrolling.
The 3 th thing
One line about it. Four or five of these is a row worth scrolling.
The 4 th thing
One line about it. Four or five of these is a row worth scrolling.
One at a time
Full-width pictures, one to a screen, with the words on them.
carousel-wideIcons
4 in this groupIcon list
Lines that each start with a mark.
icon-listWith a count
A mark with the number of things on the corner of it.
indicator3129+
Icon tiles
A tinted mark over a heading and a line.
icon-tilesFast
Say what somebody gets, not what it is called.
Safe
One short sentence is enough here.
Yours
Replace this with the thing they actually keep.
Icon buttons
A mark beside a label, or instead of one.
icon-buttonFields
17 in this groupText
Label, control, and somewhere for the error to go.
fieldDrop a file
The square you drag something onto, or click.
dropzoneFile
Somewhere to drop something.
field-fileAttach a file
One-time code
The six digits from a text message, one box each.
field-codeEnter the code we sent you
It expires in ten minutes.
Choice tiles
One of a few, each a tile with its price or its time — delivery, a plan, a size.
field-tilesSlider
A number somewhere between two others.
field-rangeBetween one and fifty.
With an error
What a field looks like when it is wrong.
field-errorThat address is missing everything after the @.
Several answers
Any number, each shown as a tag you can take off.
field-multiEach choice becomes a tag with an × on it.
Select
One answer out of a list of them.
field-selectWhere the invoice is sent.
Radio buttons
Exactly one, and it shows which.
field-radiosSwitch
On or off, and it takes effect as you set it.
field-switchWith a prefix
The part that never changes, said once.
field-joinedexample.com/
Searchable select
One answer, with search, groups and an icon each.
field-pickerType to narrow the list.
Search
A search box and the button beside it.
field-searchLong answer
Room for more than a line.
field-textareaQuantity
A small number, with less typing.
field-quantityCheckboxes
Any number of them, including none.
field-checkboxesForms
6 in this groupForm card
A card holding a short form, with an outcome message.
form-cardGet in touch
Sign in
Two fields, a way back in, and one button.
form-loginSign-up row
One field and one button, side by side.
newsletterAddress
Where to send it, in the order somebody writes it.
form-addressCard details
A card, with the autocomplete names that make a browser fill it.
form-paymentFilter bar
Narrow a list down, and see what is narrowing it.
form-filtersSelling
8 in this groupPrice
What it costs, what it cost, and how much that is off.
price€39€5934% off
Product
One thing for sale: picture, name, price, and the button.
productThe thing itself
One line about it, which is usually all anybody reads.
€39€59
What people rated it
The average, and how the scores are spread.
reviews4.6
from 318 people
5224
461
318
29
16
Ways to pay
The cards and methods you take, said plainly.
paymentsYou can pay with
VisaMastercardAmexPayPalInvoice
Basket line
One thing in a basket, with how many and what it comes to.
cart-lineThe thing itself
Medium · Blue
€782 × €39
Products
Three of them across, one per row on a phone.
product-rowThe first
€39
The second
€45
The third
€28
Order summary
What it adds up to, with the total set apart.
order-summarySummary
Items€78.00Delivery€4.95VAT€16.59Total€99.54
Picture and thumbnails
The big one, with the rest under it.
gallery-productData
26 in this groupFigure and change
One number, and which way it has moved.
kpiRevenue€24,91012%
Orders3184%
Refunds112%
Keys
The keys somebody presses, written as keys.
kbdPressCtrlKto search, orEscto leave.
Messages
What was said, and who said it.
chat- Sa
Is this the right place to ask about the order?
09:14 - Yo
It is. What is the number on it?
09:15 - Sa
Thanks — 4172.
09:15
Table
Rows that become labelled lines on a narrow screen.
tableNameRoleStatus
Ada LovelaceEngineerActive
Grace HopperAdmiralInvited
Alan TuringAnalystPaused
Person
A face beside a name and a line about them.
mediaAL
Ada Lovelace
Engineer · joined in March
Status
A dot and a word — readable at a glance, and without the colour.
statusLivePendingFailedArchived
Rating
Stars, and how many people gave them.
ratingFace
One person, as a picture or their initials.
avatarAL
Board
Work in columns — a kanban board, with a count on each lane.
kanbanIn progress1
In review1
Done1
Byline
Who wrote it, when, and how long it takes to read.
bylineStat row
Four figures side by side.
stat-rowTotal128
Open24
Done96
Overdue8
Rows
A list of things you can open, without a table around it.
row-listComments
What somebody said, and what was said back.
commentsGrace HopperAn hour ago
Agreed — swapping them now.
Tags
Short labels, each one removable.
tag-listDesignResearchIn progress
Timeline
What happened, in the order it happened.
timeline- Today
Moved to review.
- Yesterday
Two files were attached.
- Last week
Opened by Ada Lovelace.
Figures
Four numbers with what they were, side by side.
kpi-gridRevenue
€48,210
+12%
Orders
1,284
+4%
Refunds
37
−9%
Customers
912
+7%
Month
A month, with the days that matter marked.
calendarJune
MonTueWedThuFriSatSun123456789101112131415161718192021222324252627282930
Files
What is attached, how big, and how to get it.
file-listThings to do
What is done and what is left, with a line through the done.
checklistTime left
How long until it happens, in four numbers.
countdown04days
11hours
32minutes
07seconds
Empty state
What a list says before it has anything in it.
empty-stateNothing here yet
When something is added it will show up here. Until then there is nothing to see, which is not the same as something being wrong.
Add the first oneFaces
Who is on it, in the space of one line.
avatar-groupALGHAT+4
and four othersDetail list
Label and value pairs, for a record you are reading.
details-list- Reference
- INV-2043
- Opened
- 14 March
- Owner
- Ada Lovelace
Who this is
A face, a name and what you can do about it.
profile-headNotifications
What happened for somebody, newest first, the unread ones marked.
notificationsABAnna commented on Brand refresh“Looks good — one question about the logo.”5 min
BCBen finished Homepage wireframesMoved to Done1 h
CDCleo invited you to Mobile appYou can see and edit it nowYesterday
Usage
How much of each is used — storage by kind, a budget by category — a bar each.
progress-listStorage
Pictures6.2 GB
Documents2.4 GB
Video0.9 GB
9.5 GB of 10 GB used
Tabs
One row of views, one of them showing.
tabsBottom bar
The four places a phone goes, along the bottom.
dockSteps
How far through a form or a flow somebody is.
steps- 1Details
- 2Address
- 3Confirm
Drawer menu
The panel a burger opens. Closes itself when the window widens.
drawerToolbar
Search on one side, what you can do on the other.
toolbarOn this page
The headings of this page, down the side of it.
anchorsApp sidebar
A logo, sections of links, and groups that open — no script.
nav-appSidebar menu
A vertical menu, flat or under headings.
sidebarDropdown
A menu the browser opens, with no script.
dropdownPagination
Page numbers, with the one you are on marked.
paginationBreadcrumbs
Where this page sits, and the way back up.
breadcrumbsSocial links
A row of round links to wherever else you are.
social-linksFeedback
10 in this groupAlert
A message that needs to be noticed.
alertSomething worth knowing
A sentence explaining what happened and what to do about it.
Modal
A dialog the browser opens, with no script.
modalAre you sure?
This cannot be undone. Nothing is lost until you say so.
Toast
A short message that something happened.
toastSaved
Your changes are saved
Nothing else needs doing.
Badges
Short labels for a state — filled, outlined, or with a dot — in every colour.
badgesDraftNewPaidDue soonOverdue
DraftNewPaidDue soonOverdue
OnlineAwayOffline
Loading
Something is happening and has not finished.
loaderFetching the latest…
Consent bar
The cookie bar, saying what it is asking rather than burying it.
consentHint
A line that appears over something when you point at it.
tooltipOut of the list, not deletedAnybody with the link can read it
Loading shapes
The shape of what is coming, instead of a spinner over nothing.
skeletonProgress
How far along something is.
progressUploading64%
Ring
How far through something is, as a circle.
progress-ring70%Storage used
40%Set up
95%Uptime
Columns
Columns of links, and the line that closes a page.
footerOne line
A name on one side, the small print on the other.
footer-simpleWith a sign-up
A footer that asks for an address before the small print.
footer-newsletterCharts
7 in this groupChart
One chart, drawn by Chart.js, in your own colours.
chartChart card
A chart with a title over it and a note under it.
chart-cardRevenue this year
Every month since January, before tax.
Figures update whenever the source behind them does.
Two charts
How much, beside what it was made of.
chart-pairOrders each day
Where they came from
Figures with shapes
Three numbers, each with the line that got it there.
chart-statsRevenue€24,91012%How Revenue has moved.
Signups3184%How Signups has moved.
Refunds112%How Refunds has moved.
Chart with figures
The totals across the top, and the chart they came from.
chart-panelLast six months
ExportTotal€128,400
Average€21,400
Best month€31,900
Chart board
A wide chart, a breakdown beside it, and the figures under both.
chart-boardThis year
Share
Customers1,284
Retained92%
Average order€78
Chart and table
The shape of the numbers, with the numbers themselves beside it.
chart-tableBy month
NameRoleStatus
Ada LovelaceEngineerActive
Grace HopperAdmiralInvited
Alan TuringAnalystPaused
All of it is free
The component library and the Page creator are in UCM Studio’s free plan, alongside the utility classes, the Designer and reusable Areas.
Ada LovelaceTwo hours ago
This reads well, but the second paragraph is doing the work of the first.