Component Gallery v1.1.0 PDF

Component Gallery
Refactoring UI: Component Gallery
Buttons
Description Primary Secondary
Small rounded Primary Option A Option B Option C
Large rounded Primary Option A Option B Option C
Full rounded Primary Option A Option B Option C

Square Primary Option A Option B Option C
Uppercase text PRIMARY OPTION A OPTION B OPTION C
With soft shadow Primary Option A Option B Option C
Vertical gradient Primary Option A Option B Option C
Horizontal gradient Primary Option A Option B Option C

Raised with bottom profile Primary Option A Option B Option C
Raised with top profile Primary Option A Option B Option C
With icon on left Primary Option A Option B Option C
With icon on right Primary Option A Option B Option C

Inputs
Small rounded Full rounded
Large rounded Square

Thick border No border
Inset shadow Box shadow
Bottom border Soft background

Placeholder
Soft background with bottom border Bottom border only with placeholder label
Label Label
Placeholder
Label inside input Overlapping label
LABEL
Small uppercase label With icon

With icon with border Icon emphasized
Label
Placeholder
Label Placeholder
Connected inputs with inset labels Connected inputs with placeholder only
Input groups
Label Label
Sign up Sign up
Small rounded / Attached Small rounded / Detached
Label
Sign up Label Sign up
Large rounded / Inset button Bottom border only connected to button

Label Label
Sign up Sign up
With gapped border Full rounded
Label Label
Sign up
Full rounded with oﬀset button With just an icon

Error validation
Label Label
Oops! An error has occured. Oops! An error has occured.
Label
Label
Sign up Sign up
Inline below input with solid background Inline connected to input

Label
Oops! An error has occured.
Label
Label
Label
Sign up
Sign up
Inline below input with no background Icon with tool tip on focus
Label
Label
Oops! An err…
Label
Label
Sign up
Sign up
Inline right of input Listed above form

Label
Label
Sign up
Listed below form

Badges
Badge Badge Badge
Solid background / Full rounded Soft background / Full rounded Thick soft border / Full rounded
Badge Badge Badge
Thick soft border / Soft background / Full rounded Thin soft border / Full rounded Thin soft border / Soft background / Full rounded
Badge Badge Badge
Solid background / Small rounded Soft background / Small rounded Thick soft border / Small rounded
Badge Badge Badge
Thick soft border / Soft background / Small rounded Thin soft border / Small rounded Thin soft border / Soft background / Small rounded
Badge Badge 3
With icon With gradient Circle (for numbers)

Breadcrumbs
Home Shop Cart Checkout Home Shop Cart Checkout
Contained with arrows With icons

01 Home 02 Shop 03 Cart 04 Checkout Shop Cart Checkout
With numbers With home icon only
Home > Shop > Cart > Checkout Home • Shop • Cart • Checkout
Separated by cheverons Separated by dots

Home Shop Cart Checkout Home / Shop / Cart / Checkout
With dotted border Separated by slashes

Pagination
Previous 1 2 3 4 5 Next < 1 2 3 4 5 >
Page numbers with next/previous buttons Page numbers with cheverons

Previous 1 2 3 4 … Next Previous Next
Page numbers with truncation Next/Previous buttons
Previous Next < Next >
Next/Previous buttons attached Previous cheveron with next text

First Previous … 5 6 … Next Last << < … 5 6 … > >>
With first/last buttons With first/last cheverons
< 2 > < 2 of 10 >
Next/Previous cheverons with current page Next/Previous cheverons with current page of total pages
Previous 1 2 3 4 5 Next Previous 1 2 3 4 5 Next
With thick bottom border on focus With no borders on numbers
With full rounded corners With no container around inactive states

With thin top border With thin bottom border
Previous 1 2 3 4 5 Next Load more
With circle around focus Load more/continuous scrolling

Horizontal navigation
Account Notifications Security Account Notifications Security
Contained with light active state Contained with dark active state
With dark raised active state Full rounded

Full rounded with inset rounded active state Lifted active state
Lifted active state rounded Bottom border with raised darker active state
Bottom border with thin darker active state Soft rounded active state
Soft small rounded active state Dark small rounded active state
Account Notifications Security

Dark rounded active state With stacked icons
With icons Active tab in front of inactive tabs with colored top border
Overlapping tabs with skewed right side

Vertical navigation
Account Account
Notifications Notifications
Security Security
Members Members
Role Role
Projects Projects
Full background highlight on active Full background highlight and left border on active
Account Account
Security Security
Members Members
Role Role
Projects Projects
Full background highlight and right border on active Left border on active
Account Account
Security Security
Members Members
Role Role
Projects Projects
Right border on active Small rounded pill hightlight on active

Account Account
Security Security
Members Members
Role Role
Projects Projects
Full rounded pill highlight on active Bold on active
Account Account
Security Security
Members Members
Role Projects Role Projects
Directly on background On panel

PERSONAL SETTINGS
Account Account
Security Security
Members TEAM SETTINGS
Role Projects Members
Role
On panel with borders between them Sections separated by whitespace
PERSONAL SETTINGS
Account
Notifications
Security
TEAM SETTINGS
Members
Role
Sections separated by border

Tables
Zebra striping With borders

Condensed With images
Multi-row for supporting content With grouping column

With grouping row

Sign in forms
Two-pane with list Two-pane with testimonial

Two-pane with image Simple card
Full page Simple

Alerts
Title bar / Bottom description Soft background with thick border / Left icon / Title with description
Solid background / Left icon / Title with description Full width / Left icon / Title with description
Top accent border / Left icon / Title with description Left accent border / Left icon / Title with description
Single line / Dark background Single line / Soft background

Pricing pages
$500 $500
Single tier card centered Single tier card left aligned

$100 $500
$500
Single tier horizontal card layout Two-tier cards
$200
$100 $500
$500
$100
Two-tier cards with emphasized plan Three-tier heavy featured cards with emphasized plan
$100 $200 $500 Free $100 $200 $500
Three-tier cards Four-tier cards
$100 $200 $500
$100 $500
Two-tier Multi-tier chart

$200
Free
$100
$200
$500
$800
Multi-tier table Variable pricing

Marketing page heros
Left aligned text with image on right Left aligned text with image on left
Left aligned text with background cover image Centered text with background cover image
Centered text with image below Right image with right aligned text
Centered text with image above With sign-in form
With newsletter sign-up

Marketing page sections
Single feature with right image Double feature with icons

Feature list with image Triple feature with icons
Single feature in horizontal layout Centered text with image below

Triple feature in cards Multi-feature left aligned with stacked icons
Multi-feature with icons on left Split page

Long feature list in columns

Modals
With white shim background With dark shim background

Full page Left aligned buttons
Full width buttons stacked Full width split buttons

Multi-section forms
Two-column with label and description for sections Anchor links for each section
Centered inputs with left side and borders between sections Centered inputs with left side label in cards
Two-column with emphasis on form Multipage with horizontal navigation

Multipage with vertical navigation

Header navigation
Left logo with search / Right navigation with global actions
Left logo with navigation / Right search with global actions

Left logo with search / Centered navigation / Right search with global actions
Left navigation / Centered logo / Right search with global actions
Second row navigation
No background container
Preview cards
Left image / Title / Meta / Excerpt Left image / Meta / Title / Excerpt
Left image / Title / Excerpt / Meta Left image / Title / Meta / Excerpt / Link
Left image / Title / Meta / Excerpt / Link Left image / Title / Meta / Excerpt / Link
Left image / Title / Excerpt Left inset image / Title / Meta / Excerpt
Right image / Meta / Title / Excerpt Left image / Meta / Title / Excerpt
Left image / No card Top image
Top image with button Top image with full width button
Top inset image Top image / No card
Thumbnail / Wrapped content Thumbnail / Indented content

Profile cards
Two-column with labelled sections With supporting image

Two-column with labelled sections With supporting image

Application layouts
Vertical navigation overlapping horizontal navigation Horizontal navigation vertical overlapping navigation
Constrained content area with vertical navigation Constrained content area with full width horizontal navigation
Multi-layered side navigation Card layout

Side bar only Side bar icon navigation only
Three column layout Secondary right column

Footers
Site map / About section / Social media icons / Legal

Site map / About section / Newsletter sign up / Legal
Company logo / About section / Site map / Legal

Centered site map with social icons and legal
Company logo and newsletter sign up on top / Site map / Legal

Company logo / Navigation / Social icons / legal
Legal / Stacked navigation

Activity Feeds
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
Image with timestamp below detail Image with timestamp on the right
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
Condensed with now thumbnail Thumbnail connected with lines
1 day ago 1 day ago
1 day ago 1 day ago
1 day ago
1 day ago
Dots connected with lines Alternating sides

Checkout pages
User details on left with emphasized order summary list on right Order summary table on left with emphasized user details on right
Split page with user details on left and order summary on right Order summary table on top with user details on bottom
$500
$500
Single product checkout on card with product image Single product checkout on card with product features
Testimonial sections
Left aligned carousel with dotted pagination Centered carousel with dotted pagination
Left aligned carousel with top left pagination arrows Centered carousel with pagination arrows on sides
Single horizontal layout in a card Stacked layout on card

Refactoring UI: Font Recommendations
Can’t find what you’re looking for?

Email your suggestions to support@refactoringui.com
and we’ll include them in a future update.

Component Gallery v1.1.0 PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Component Gallery v1.1.0 PDF

Uploaded by

Copyright:

Available Formats

Component Gallery

Refactoring UI: Component Gallery

Small rounded Primary Option A Option B Option C

Large rounded Primary Option A Option B Option C

Full rounded Primary Option A Option B Option C

Description Primary Secondary

Square Primary Option A Option B Option C

Uppercase text PRIMARY OPTION A OPTION B OPTION C

With soft shadow Primary Option A Option B Option C

Vertical gradient Primary Option A Option B Option C

Horizontal gradient Primary Option A Option B Option C

Description Primary Secondary

Raised with bottom profile Primary Option A Option B Option C

Raised with top profile Primary Option A Option B Option C

With icon on left Primary Option A Option B Option C

With icon on right Primary Option A Option B Option C

Small rounded Full rounded

Large rounded Square

Thick border No border

Inset shadow Box shadow

Bottom border Soft background

Label inside input Overlapping label

Small uppercase label With icon

With icon with border Icon emphasized

Small rounded / Attached Small rounded / Detached

Sign up Label Sign up

Large rounded / Inset button Bottom border only connected to button

With gapped border Full rounded

Full rounded with oﬀset button With just an icon

Oops! An error has occured. Oops! An error has occured.

Inline below input with solid background Inline connected to input

Oops! An error has occured.

Oops! An error has occured.

Inline right of input Listed above form

Oops! An error has occured.

Listed below form

Badge Badge Badge

Badge Badge Badge

Badge Badge Badge

Badge Badge Badge

With icon With gradient Circle (for numbers)

Home Shop Cart Checkout Home Shop Cart Checkout

Contained with arrows With icons

01 Home 02 Shop 03 Cart 04 Checkout Shop Cart Checkout

With numbers With home icon only

Separated by cheverons Separated by dots

Home Shop Cart Checkout Home / Shop / Cart / Checkout

With dotted border Separated by slashes

Previous 1 2 3 4 5 Next < 1 2 3 4 5 >

Page numbers with next/previous buttons Page numbers with cheverons

Previous 1 2 3 4 … Next Previous Next

Page numbers with truncation Next/Previous buttons

Previous Next < Next >

Next/Previous buttons attached Previous cheveron with next text

First Previous … 5 6 … Next Last << < … 5 6 … > >>

With first/last buttons With first/last cheverons

< 2 > < 2 of 10 >

Previous 1 2 3 4 5 Next Previous 1 2 3 4 5 Next

With thick bottom border on focus With no borders on numbers

Previous 1 2 3 4 5 Next Previous 1 2 3 4 5 Next

With full rounded corners With no container around inactive states

Previous 1 2 3 4 5 Next Previous 1 2 3 4 5 Next