Professional Documents
Culture Documents
Refactoring UI (Component Gallery) - 2020 PDF
Refactoring UI (Component Gallery) - 2020 PDF
Buttons
Description Primary Secondary
Inputs
Placeholder
Soft background with bottom border Bottom border only with placeholder label
Label Label
Placeholder
LABEL
Label
Placeholder
Label Placeholder
Connected inputs with inset labels Connected inputs with placeholder only
Refactoring UI: Component Gallery
Input groups
Label Label
Sign up Sign up
Label
Label Label
Sign up Sign up
Label Label
Sign up
Error validation
Label Label
Label
Label
Sign up Sign up
Label
Oops! An error as 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
Label
Label
Sign up
Badges
Solid background / Full rounded Soft background / Full rounded Thick soft border / Full rounded
Thick soft border / Soft background / Full rounded Thin soft border / Full rounded Thin soft border / Soft background / Full rounded
Refactoring UI: Component Gallery
Solid background / Small rounded Soft background / Small rounded Thick soft border / Small rounded
Thick soft border / Soft background / Small rounded Thin soft border / Small rounded Thin soft border / Soft background / Small rounded
Badge Badge 3
Horizontal navigation
Contained with light active state Contained with dark active state
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
Refactoring UI: Component Gallery
Soft small rounded active state Dark small rounded active state
With icons Active tab in front of inactive tabs with colored top border
Refactoring UI: Component Gallery
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
Refactoring UI: Component Gallery
Account Account
Notifications Notifications
Security Security
Members Members
Role Role
Projects Projects
Full background highlight and right border on active Left border on active
Account Account
Notifications Notifications
Security Security
Members Members
Role Role
Projects Projects
Account Account
Notifications Notifications
Security Security
Members Members
Role Role
Projects Projects
Account Account
Notifications Notifications
Security Security
Members Members
PERSONAL SETTINGS
Account Account
Notifications Notifications
Security Security
Role
PERSONAL SETTINGS
Account
Notifications
Security
TEAM SETTINGS
Members
Role
Tables
Sign in forms
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
Refactoring UI: Component Gallery
Top accent border / Left icon / Title with description Left accent border / Left icon / Title with description
Pricing pages
$500 $500
$100 $500
$500
$200
$100 $500
$500
$100
Two-tier cards with emphasized plan Three-tier heavy featured cards with emphasized plan
Refactoring UI: Component Gallery
$100 $500
$200
Free
$100
$200
$500
$800
Left aligned text with image on right Left aligned text with image on left
Refactoring UI: Component Gallery
Left aligned text with background cover image Centered text with background cover image
Centered text with image below Left image with left aligned text
Refactoring UI: Component Gallery
Modals
Multi-section forms
Two-column with label and description for sections Anchor links for each section
Refactoring UI: Component Gallery
Centered inputs with left side and borders between sections Centered inputs with left side label in cards
Header navigation
Left logo with search / Centered navigation / Right search with global actions
No background container
Refactoring UI: Component Gallery
Preview cards
Left image / Title / Meta / Excerpt Left image / Meta / Title / Excerpt
Refactoring UI: Component Gallery
Left image / Title / Excerpt / Meta Left image / Title / Meta / Excerpt / Link
Left image / Title / Meta / Excerpt / Link Left image / Title / Meta / Excerpt / Link
Refactoring UI: Component Gallery
Left image / Meta / Title / Excerpt Left inset image / Title / Meta / Excerpt
Right image / Meta / Title / Excerpt Left image / Meta / Title / Excerpt
Refactoring UI: Component Gallery
Top image with button Top image with full width button
Refactoring UI: Component Gallery
Profile cards
Application layouts
Vertical navigation overlapping horizontal navigation Horizontal navigation vertical overlapping navigation
Refactoring UI: Component Gallery
Constrained content area with horizontal navigation Constrained content area with vertical navigation
Footers
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
Refactoring UI: Component Gallery
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago
1 day ago