Aa

  • Light
  • Regular
  • Semibold
  • Bold

Heading

Lorem ipsum dolor sit amet, eu habemus scriptorem nec. Prima postea appareat ex ius, tamquam insolens cum at, cibo tota concludaturque ne eam. Vix mundi copiosae ut, autem nulla eu sea. Porro recteque reprehendunt.

Text Colors

  • Purple(Usage: Info Text)
  • Green(Usage: Success Text)
  • Red(Usage: Error Text)
  • Dark Orange(Usage: Alert Text)
  • Dark(Usage: Main Headings, Body Text)
  • Medium(Usage: Body Text, Description Text)
  • Light(Usage: Secondary Text, Input Labels)
  • Lighter(Usage: Disabled Text, Placeholder Text)

Blue

Green

Red

Orange

Purple

Teal

12 Columns ( Width - 992px with 16px Gutter )

Background Greys

  • Lighter(Usage: Solid backgrounds)
  • Light(Usage: List hover and Solid backgrounds)
  • Medium(Usage: Stroke/HR, Separators and disabled icons)
  • Dark(Usage: Outline for text field and disabled background)


This is the complete icon collection of the Design System.
Some icons come with a Line variant.



lib/components/Icons/AddIcon/AddIcon.js

Add icon:

lib/components/Icons/AlertIcon/AlertIcon.js

Alert icon:

lib/components/Icons/AlertLineIcon/AlertLineIcon.js

Alert (line) icon:

lib/components/Icons/AnalyticsIcon/AnalyticsIcon.js

Analytics icon:

lib/components/Icons/AttachmentIcon/AttachmentIcon.js

Attachment icon:

lib/components/Icons/BaloonIcon/BaloonIcon.js

Baloon icon:

lib/components/Icons/BarsIcon/BarsIcon.js

Bars icon:

lib/components/Icons/BinIcon/BinIcon.js

Bin icon:

lib/components/Icons/BookmarkLineIcon/BookmarkLineIcon.js

Bookmark (line) icon:

lib/components/Icons/BulbFullIcon/BulbFullIcon.js

Bulb icon:

lib/components/Icons/BulbIcon/BulbIcon.js

Bulb icon:

lib/components/Icons/CalendarIcon/CalendarIcon.js

Calendar icon:

lib/components/Icons/CameraIcon/CameraIcon.js

Camera icon:

lib/components/Icons/CameraLineIcon/CameraLineIcon.js

Camera (line) icon:

lib/components/Icons/ChartIcon/ChartIcon.js

Chart icon:

lib/components/Icons/CheckedIcon/CheckedIcon.js

Checked icon:

lib/components/Icons/CheckRoundIcon/CheckRoundIcon.js

Check (round) icon:

lib/components/Icons/ClockIcon/ClockIcon.js

Clock icon:

lib/components/Icons/ClosedConversationIcon/ClosedConversationIcon.js

Closed conversation icon:

lib/components/Icons/CloseIcon/CloseIcon.js

Close icon:

lib/components/Icons/CommentIcon/CommentIcon.js

Comment icon:

lib/components/Icons/CrossIcon/CrossIcon.js

Cross icon:

lib/components/Icons/DeleteIcon/DeleteIcon.js

Delete icon:

lib/components/Icons/DialogIcon/DialogIcon.js

Dialog icon:

lib/components/Icons/DocumentIcon/DocumentIcon.js

Document icon:

Strikethrough document icon

lib/components/Icons/DownArrowIcon/DownArrowIcon.js

Down arrow icon:

lib/components/Icons/DownIcon/DownIcon.js

Down icon:

lib/components/Icons/DownloadIcon/DownloadIcon.js

Download icon:

lib/components/Icons/DownRoundIcon/DownRoundIcon.js

Down (round) icon:

lib/components/Icons/DownTriangleIcon/DownTriangleIcon.js

Triangle down icon:

lib/components/Icons/DragIcon/DragIcon.js

Drag icon:

lib/components/Icons/DuplicationIcon/DuplicationIcon.js

Duplication icon:

lib/components/Icons/EditLineIcon/EditLineIcon.js

Edit (line) icon:

lib/components/Icons/EditPencilIcon/EditPencilIcon.js

Edit pencil icon:

lib/components/Icons/EmailIcon/EmailIcon.js

Email icon:

lib/components/Icons/EnterIcon/EnterIcon.js

Enter icon:

lib/components/Icons/ErrorIcon/ErrorIcon.js

Error icon:

lib/components/Icons/ExternalIcon/ExternalIcon.js

External icon:

lib/components/Icons/EyeIcon/EyeIcon.js

Eye icon:

lib/components/Icons/EyeLineIcon/EyeLineIcon.js

Eye (line) icon:

lib/components/Icons/EyeOffIcon/EyeOffIcon.js

Eye-off icon:

lib/components/Icons/FlashIcon/FlashIcon.js

Flash icon:

lib/components/Icons/FolderIcon/FolderIcon.js

Folder icon:

lib/components/Icons/GoogleIcon/GoogleIcon.js

Google icon:

lib/components/Icons/HeartIcon/HeartIcon.js

Heart icon:

lib/components/Icons/HeartLineIcon/HeartLineIcon.js

Heart (line) icon:

lib/components/Icons/HomeIcon/HomeIcon.js

Home icon:

lib/components/Icons/HomeLineIcon/HomeLineIcon.js

Home (line) icon:

lib/components/Icons/InboxIcon/InboxIcon.js

Inbox icon:

lib/components/Icons/InfoIcon/InfoIcon.js

Info icon:

lib/components/Icons/LanguageIcon/LanguageIcon.js

Language icon:

lib/components/Icons/LeftArrowIcon/LeftArrowIcon.js

Left arrow icon:

lib/components/Icons/LeftArrowLongIcon/LeftArrowLongIcon.js

Left arrow long icon:

lib/components/Icons/LeftArrowRoundIcon/LeftArrowRoundIcon.js

Left arrow round icon:

lib/components/Icons/LeftUpArrowIcon/LeftUpArrowIcon.js

Left-up arrow icon:

lib/components/Icons/LineIcon/LineIcon.js

Line icon:

lib/components/Icons/LinkIcon/LinkIcon.js

Link icon:

lib/components/Icons/LiveWidgetIcon/LiveWidgetIcon.js

Live widget icon:

lib/components/Icons/LoadingIcon/LoadingIcon.js

Loading icon:

lib/components/Icons/LocationIcon/LocationIcon.js

Location icon:

lib/components/Icons/LocationLineIcon/LocationLineIcon.js

Location (line) icon:

lib/components/Icons/LockIcon/LockIcon.js

Lock icon:

lib/components/Icons/MenuIcon/MenuIcon.js

Menu icon:

lib/components/Icons/MenuToggleIcon/MenuToggleIcon.js

Menu toggle icon:

lib/components/Icons/MessageIcon/MessageIcon.js

Message icon:

lib/components/Icons/MessagesIcon/MessagesIcon.js

Messages icon:

lib/components/Icons/MinusIcon/MinusIcon.js

Minus icon:

lib/components/Icons/NoticeIcon/NoticeIcon.js

Notice icon:

lib/components/Icons/NotificationIcon/NotificationIcon.js

Notification icon:

lib/components/Icons/NotificationLineIcon/NotificationLineIcon.js

Notification (line) icon:

lib/components/Icons/OpenConversationIcon/OpenConversationIcon.js

Open conversationIcon icon:

lib/components/Icons/OptionsIcon/OptionsIcon.js

Options icon:

lib/components/Icons/OptionsVerticalIcon/OptionsVerticalIcon.js

Options (vertical) icon:

lib/components/Icons/PeopleIcon/PeopleIcon.js

People icon:

lib/components/Icons/PhotoIcon/PhotoIcon.js

Photo icon:

lib/components/Icons/PlayIcon/PlayIcon.js

Play icon:

lib/components/Icons/PlusIcon/PlusIcon.js

Plus icon:

lib/components/Icons/PointerDefaultIcon/PointerDefaultIcon.js

Pointer default icon:

lib/components/Icons/PointerGrabIcon/PointerGrabIcon.js

Pointer grab icon:

lib/components/Icons/PointerHoverIcon/PointerHoverIcon.js

Pointer hover icon:

lib/components/Icons/QuestionIcon/QuestionIcon.js

Question icon:

lib/components/Icons/RemoveIcon/RemoveIcon.js

Remove icon:

lib/components/Icons/RemoveLineIcon/RemoveLineIcon.js

Remove (line) icon:

lib/components/Icons/ResetIcon/ResetIcon.js

Reset icon:

lib/components/Icons/RightArrowIcon/RightArrowIcon.js

Right arrow icon:

lib/components/Icons/RightArrowLongIcon/RightArrowLongIcon.js

Right arrow (long) icon:

lib/components/Icons/RightArrowRoundIcon/RightArrowRoundIcon.js

Right arrow round icon:

lib/components/Icons/RightUpArrow/RightUpArrowIcon.js

Right-up arrow icon:

lib/components/Icons/SearchIcon/SearchIcon.js

Search icon:

lib/components/Icons/SendIcon/SendIcon.js

Send icon:

lib/components/Icons/SettingsIcon/SettingsIcon.js

Settings icon:

lib/components/Icons/SlackIcon/SlackIcon.js

Slack icon:

lib/components/Icons/SortAscIcon/SortAscIcon.js

SortAsc icon:

lib/components/Icons/SortDescIcon/SortDescIcon.js

SortDesc icon:

lib/components/Icons/SpaceshipIcon/SpaceshipIcon.js

Spaceship icon:

lib/components/Icons/SpinnerIcon/SpinnerIcon.js

Spinner:

lib/components/Icons/SyncIcon/SyncIcon.js

Sync icon:

lib/components/Icons/TickIcon/TickIcon.js

Tick icon:

lib/components/Icons/TimestampIcon/TimestampIcon.js

Timestamp icon:

lib/components/Icons/UndoIcon/UndoIcon.js

Undo icon:

lib/components/Icons/UpArrowIcon/UpArrowIcon.js

Up arrow icon:

lib/components/Icons/UpIcon/UpIcon.js

Up icon:

lib/components/Icons/UploadCloudIcon/UploadCloudIcon.js

Upload cloud icon:

lib/components/Icons/UploadIcon/UploadIcon.js

Upload icon:

lib/components/Icons/UpRoundIcon/UpRoundIcon.js

Up round icon:

lib/components/Icons/UserIcon/UserIcon.js

User icon:

lib/components/Icons/UserLineIcon/UserLineIcon.js

User (line) icon:

lib/components/Icons/YouTubeIcon/YouTubeIcon.js

YouTube icon:



Media components



lib/components/Media/Image/Image.js

A working image:

Image with fallback:

Not found



The Avatar component can show either a profile picture or the user name initials with or without a status indicator. Many visual details can be customized through the props.



lib/components/Avatar/Avatar.js

Square regular avatar (default props):

DS

Square small avatar:

PP

Circle regular avatar:

HM

Circle small avatar:

IM

No status indicator:

TH
DP
lib/components/Buttons/Button/Button.js

Generic button component

Flat buttons:

















Flat buttons with icon:













Raised buttons (default and hallow):







Raised icon buttons:



Small variant:











lib/components/Buttons/FlatButton/FlatButton.js

Shortcut for a button with mode=flat:

lib/components/Buttons/RaisedButton/RaisedButton.js

Shortcut for a button with mode=raised:



Components that can be used to build forms.



lib/components/Form/Checkbox/Checkbox.js

Checkboxes:









lib/components/Form/Dropdown/Dropdown.js

Dropdown:



lib/components/Form/InputField/InputField.js

Input fields:













Error message


Warning message


Success message


Custom icon


This is a label
Generic message
lib/components/Form/Menu/Menu.js

Menu:

lib/components/Form/MenuItem/MenuItem.js

Menu item:

lib/components/Form/MenuLabel/MenuLabel.js

Menu label:

lib/components/Form/Radio/Radio.js

Radio buttons:









lib/components/Form/SearchBox/SearchBox.js

Search box:

lib/components/Form/Switch/Switch.js

Switch:











lib/components/Form/TextBox/TextBox.js

Textboxes:



Warning message


This is a label
Error message
lib/components/Form/Toggle/Toggle.js

See Switch component

lib/components/Tag/Tag.js

Tags:

TagTagTagTag27+27Tag
lib/components/Tooltips/Tooltip/Tooltip.js

Tooltips:

Google Drive

Utenti totali

Uomo
6279
Donna
2987
Uomo
6279

Utenti totali

Uomo
6279
Donna
2987
Uomo
6279
lib/components/Tooltips/TooltipDatum/TooltipDatum.js

Tooltips:

Donna
2987
lib/components/Notification/Notification.js

Notifications:

Alert message



Info message



Success message



Error message



Notification message



Alert message



Info message



Success message



Error message



Notification message



lib/components/Modal/Modal.js

Modals:
(remember to call Modal.setAppElement)

lib/components/Cards/BaseCard/BaseCard.js

Tags:

Base card

Bigger z-index

lib/components/Date/DatePicker/DatePicker.js

Date picker:

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

lib/components/Date/DateSelector/DateSelector.js

Date selector:




lib/components/DropdownSelector/DropdownSelector.js

Dropdown:

lib/components/LogoVerse/LogoVerse.js

Base Verse logo:

Static Verse logo:

Verse logo

Verse logo (loop):

lib/components/DesignSystem/Colors/BackgroundColorPalette/BackgroundColorPalette.js

Complete backgrounds color palette:

  • Lighter(Usage: Solid backgrounds)
  • Light(Usage: List hover and Solid backgrounds)
  • Medium(Usage: Stroke/HR, Separators and disabled icons)
  • Dark(Usage: Outline for text field and disabled background)
lib/components/DesignSystem/Colors/ColorPalette/ColorPalette.js

Complete color palette:

Blue

Green

Red

Orange

Purple

Teal

lib/components/DesignSystem/Colors/ColorSample/ColorSample.js

A circular color sample:

Teal

A rectangular color sample:

Teal(Usage: description)
lib/components/DesignSystem/Colors/PaletteVertical/PaletteVertical.js

A vertical palette:

  • Purple(Usage: Info Text)
  • Green(Usage: Success Text)
  • Red(Usage: Error Text)
lib/components/DesignSystem/Colors/TextColorPalette/TextColorPalette.js

Complete text color palette:

  • Purple(Usage: Info Text)
  • Green(Usage: Success Text)
  • Red(Usage: Error Text)
  • Dark Orange(Usage: Alert Text)
  • Dark(Usage: Main Headings, Body Text)
  • Medium(Usage: Body Text, Description Text)
  • Light(Usage: Secondary Text, Input Labels)
  • Lighter(Usage: Disabled Text, Placeholder Text)
lib/components/DesignSystem/FontInspector/FontInspector.js

A font inspector:

Aa

  • Light
  • Regular
  • Semibold
  • Bold

Indigo Components

0.8.0