Component Library Spreadsheet
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
View only
 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZAAABACADAEAF
2
TemplateTypePanel / PageOrganismMoleculeAtomDescription / NotesBehavior / FunctionsWhen to useUsesUsed byExamples
3
Notes:
Preview Panels can always appear as popovers.

An Individual Page is only necessary when there is enough content within its Preview Panel to justify an Index.
4
5
6
LeadSection Title
7
Contact ChipLead / Assignee
8
TeamSection Title
9
Icon: Edit
10
Icon: Team Member Avatars (small)
11
Additional Member SignifierAfter 3 Avatars, show "+X" if there are more members. Tapping that expands to show all team member avatars, which can be clicked to reveal contact chips.
12
Attach Files (Drop here)Drop Zone Container
13
Label
14
Icon: Attachment
15
MapMap ViewportPredefined
16
Parcel / Unit Polygon(s)Polygon
17
Parcel / Unit Hover Detail
18
19
20
21
22
Contact ChipIcon: Contact Avatar (small)Click to go to contact profile page
23
Contact Name (Link)Click to go to contact profile page
24
Icon: EmailCompose new email popup
25
Icon: MessageCompose new message popup (only if they're in your organization)
26
Icon: Phone (?)Call contact (maybe just when viewed on mobile?)
27
Icon: CloseCollapse chip back to Avatar
28
Single Contact (Card)Contact Card HeaderIcon: Contact Avatar (large)
29
Contact Name
30
Contact Subtitle
31
Icon: Bookmark
32
Button: View Full Profile
33
Icon: Close
34
Phone NumberIcon: Phone
35
Link: Phone Number
36
Contact HoursIcon: Clock
37
Contact Hours
38
Email AddressIcon: Email
39
Link: Email Address
40
Icon: MessageCompose new message popup (only if they're in your organization)
41
Notes FieldNotes Field Label
42
Notes Field & Contents
43
Single Contact (List)List Contact InfoIcon: Contact Avatar (medium)
44
Contact Name
45
Contact Subtitle
46
List Contact ActionsIcon: Bookmark
47
Icon: Email
48
Icon: MessageCompose new message popup (only if they're in your organization)
49
Icon: PhoneCall contact (maybe just when viewed on mobile?)
50
Sign In ModalModal HeaderModal Title
51
Icon: Close
52
Header Separator
53
Modal ContentUsername FieldNeeds error state
54
Password FieldNeeds error state
55
Modal Action BarPrimary Action Button: Sign inNeeds Active / Non-Active state
56
Secondary Action Button: Cancel
57
Notifications PopoverNotification Item(s)Link textNeeds Read / Unread state.
Issues, Messages, Notes, Project updates, Assigned notifications
Note:
> 24 hrs, display date
< 24 hours, display time
58
Time / Date Stamp
59
Icon: Member Avatar - when applicable (small)
60
Delete (X) Icon
61
Button: Mark All As Read
62
Local searchLocal Search FieldSearch the database by keyword for current population type.
63
Icon: Search
64
Button: Search Go
65
Population ToolbarNumber of Results in Population ListDisplays search result list count and contains controls for the current population type
66
Button: Create New (Individual)
67
Button: Sort Page Contents
68
Individual ToolbarPrevious Destination Title (web only)
69
Icon: Back
70
Button: Create New (Individual)
71
OptionsIcon: Options
72
Label: Options
73
Dropdown Container
74
Clone Issue
75
Delete Issue
76
Sort List DropdownDropdown Container
77
Sorting Options List Item(s)
78
Current Applied Sort Signifier
79
Global Navigation BarCurrent Page Title
80
Icon: Client Logo
81
Global Search FieldSearch Field (with hint text)
82
Icon: Search
83
Button: Search Go
84
NotificationsIcon: Notifications
85
Badge: Unread Count
86
Current UserIcon: Contact Avatar (medium)Note: We may want to move these into the Global Navigation Menu (Expanded), or potentially duplicate these access points there.
87
Current user name
88
Icon: Expand / Collapse
89
Dropdown: Current User OptionsLink: Profile
90
Link: Settings
91
Link: Sign Out
92
Button: Sign In
93
Global Navigation Menu (collapsed)Icon: Main Navigation Icons
94
Global Navigation Menu (expanded)Icon: Main Navigation Icons
95
Main Navigation Labels
96
Icon: Create New Icons
97
Individual Preview HeaderButton: View Full ScreenContains controls for manipulating the display of the preview panel. By minimizing multiple individual previews you can multitask between multiple issues / projects easily (think Google's Inbox).
98
Icon: Minimize
99
Icon: Close
100
Map PreviewMap Navigation Controls (Google)
101
Property Polygon
Loading...
 
 
 
Pattern Library
TO DO
 
 
Main menu