Typography

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)

Colors

Blue

Green

Red

Orange

Purple

Teal

Grid System

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

Elevation & Shadows

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)

Icons

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

AddIcon

lib/components/Icons/AddIcon/AddIcon.js

Add icon:

<AddIcon color="black" size="32px" />

<AddIcon color="black" size="32px" />

AlertIcon

lib/components/Icons/AlertIcon/AlertIcon.js

Alert icon:

<AlertIcon color="black" size="32px" />

<AlertIcon color="black" size="32px" />

AlertLineIcon

lib/components/Icons/AlertLineIcon/AlertLineIcon.js

Alert (line) icon:

<AlertLineIcon color="black" size="32px" />

<AlertLineIcon color="black" size="32px" />

AnalyticsIcon

lib/components/Icons/AnalyticsIcon/AnalyticsIcon.js

Analytics icon:

<AnalyticsIcon color="black" size="32px" />

<AnalyticsIcon color="black" size="32px" />

AttachmentIcon

lib/components/Icons/AttachmentIcon/AttachmentIcon.js

Attachment icon:

<AttachmentIcon color="black" size="32px" />

<AttachmentIcon color="black" size="32px" />

BaloonIcon

lib/components/Icons/BaloonIcon/BaloonIcon.js

Baloon icon:

<BaloonIcon color="black" size="32px" />

<BaloonIcon color="black" size="32px" />

BarsIcon

lib/components/Icons/BarsIcon/BarsIcon.js

Bars icon:

<BarsIcon color="black" size="32px" />

<BarsIcon color="black" size="32px" />

BinIcon

lib/components/Icons/BinIcon/BinIcon.js

Bin icon:

<BinIcon color="black" size="32px" />

<BinIcon color="black" size="32px" />

BookmarkLineIcon

lib/components/Icons/BookmarkLineIcon/BookmarkLineIcon.js

Bookmark (line) icon:

<BookmarkLineIcon color="black" size="32px" />

<BookmarkLineIcon color="black" size="32px" />

BulbFullIcon

lib/components/Icons/BulbFullIcon/BulbFullIcon.js

Bulb icon:

<BulbFullIcon color="black" size="32px" />

<BulbFullIcon color="black" size="32px" />

BulbIcon

lib/components/Icons/BulbIcon/BulbIcon.js

Bulb icon:

<BulbIcon color="black" size="32px" />

<BulbIcon color="black" size="32px" />

CalendarIcon

lib/components/Icons/CalendarIcon/CalendarIcon.js

Calendar icon:

<CalendarIcon color="black" size="16px" />

<CalendarIcon color="black" size="16px" />

<CalendarIcon color="black" size="24px" version="medium" />

<CalendarIcon color="black" size="24px" version="medium" />

<CalendarIcon color="black" size="32px" version="large" />

<CalendarIcon color="black" size="32px" version="large" />

CameraIcon

lib/components/Icons/CameraIcon/CameraIcon.js

Camera icon:

<CameraIcon color="black" size="32px" />

<CameraIcon color="black" size="32px" />

CameraLineIcon

lib/components/Icons/CameraLineIcon/CameraLineIcon.js

Camera (line) icon:

<CameraLineIcon color="black" size="32px" />

<CameraLineIcon color="black" size="32px" />

ChartIcon

lib/components/Icons/ChartIcon/ChartIcon.js

Chart icon:

<div>
<ChartIcon color="black" size="32px" />
</div>
<div className="Showcase">
	<ChartIcon color="black" size="32px" filled={0} />
	<ChartIcon color="black" size="32px" filled={1} />
	<ChartIcon color="black" size="32px" filled={2} />
	<ChartIcon color="black" size="32px" filled={3} />
</div>

<div>
<ChartIcon color="black" size="32px" />
</div>
<div className="Showcase">
	<ChartIcon color="black" size="32px" filled={0} />
	<ChartIcon color="black" size="32px" filled={1} />
	<ChartIcon color="black" size="32px" filled={2} />
	<ChartIcon color="black" size="32px" filled={3} />
</div>

CheckedIcon

lib/components/Icons/CheckedIcon/CheckedIcon.js

Checked icon:

<CheckedIcon color="black" size="32px" />

<CheckedIcon color="black" size="32px" />

CheckRoundIcon

lib/components/Icons/CheckRoundIcon/CheckRoundIcon.js

Check (round) icon:

<CheckRoundIcon color="black" size="32px" />

<CheckRoundIcon color="black" size="32px" />

ClockIcon

lib/components/Icons/ClockIcon/ClockIcon.js

Clock icon:

<ClockIcon color="black" size="32px" />

<ClockIcon color="black" size="32px" />

ClosedConversationIcon

lib/components/Icons/ClosedConversationIcon/ClosedConversationIcon.js

Closed conversation icon:

<ClosedConversationIcon color="black" size="32px" />

<ClosedConversationIcon color="black" size="32px" />

CloseIcon

lib/components/Icons/CloseIcon/CloseIcon.js

Close icon:

<CloseIcon color="black" size="32px" />

<CloseIcon color="black" size="32px" />

CommentIcon

lib/components/Icons/CommentIcon/CommentIcon.js

Comment icon:

<CommentIcon color="black" size="32px" />

<CommentIcon color="black" size="32px" />

CrossIcon

lib/components/Icons/CrossIcon/CrossIcon.js

Cross icon:

<CrossIcon color="black" size="32px" />

<CrossIcon color="black" size="32px" />

DeleteIcon

lib/components/Icons/DeleteIcon/DeleteIcon.js

Delete icon:

<DeleteIcon color="black" size="32px" />

<DeleteIcon color="black" size="32px" />

DialogIcon

lib/components/Icons/DialogIcon/DialogIcon.js

Dialog icon:

<DialogIcon color="black" size="32px" />

<DialogIcon color="black" size="32px" />

DocumentIcon

lib/components/Icons/DocumentIcon/DocumentIcon.js

Document icon:

<DocumentIcon color="#12B886" size="32px" />

<DocumentIcon color="#12B886" size="32px" />

Strikethrough document icon

<DocumentIcon color="#FA5252" size="32px" strikethrough />

<DocumentIcon color="#FA5252" size="32px" strikethrough />

DownArrowIcon

lib/components/Icons/DownArrowIcon/DownArrowIcon.js

Down arrow icon:

<DownArrowIcon color="black" size="32px" />

<DownArrowIcon color="black" size="32px" />

DownIcon

lib/components/Icons/DownIcon/DownIcon.js

Down icon:

<DownIcon color="black" size="32px" />

<DownIcon color="black" size="32px" />

DownloadIcon

lib/components/Icons/DownloadIcon/DownloadIcon.js

Download icon:

<DownloadIcon color="black" size="32px" />

<DownloadIcon color="black" size="32px" />

DownRoundIcon

lib/components/Icons/DownRoundIcon/DownRoundIcon.js

Down (round) icon:

<DownRoundIcon color="black" size="32px" />

<DownRoundIcon color="black" size="32px" />

DownTriangleIcon

lib/components/Icons/DownTriangleIcon/DownTriangleIcon.js

Triangle down icon:

<DownTriangleIcon color="black" size="32px" />

<DownTriangleIcon color="black" size="32px" />

DragIcon

lib/components/Icons/DragIcon/DragIcon.js

Drag icon:

<DragIcon color="black" size="32px" />

<DragIcon color="black" size="32px" />

DuplicationIcon

lib/components/Icons/DuplicationIcon/DuplicationIcon.js

Duplication icon:

<DuplicationIcon color="black" size="32px" />

<DuplicationIcon color="black" size="32px" />

EditLineIcon

lib/components/Icons/EditLineIcon/EditLineIcon.js

Edit (line) icon:

<EditLineIcon color="black" size="32px" />

<EditLineIcon color="black" size="32px" />

EditPencilIcon

lib/components/Icons/EditPencilIcon/EditPencilIcon.js

Edit pencil icon:

<EditPencilIcon color="black" size="32px" />

<EditPencilIcon color="black" size="32px" />

EmailIcon

lib/components/Icons/EmailIcon/EmailIcon.js

Email icon:

<EmailIcon color="black" size="32px" />

<EmailIcon color="black" size="32px" />

EnterIcon

lib/components/Icons/EnterIcon/EnterIcon.js

Enter icon:

<EnterIcon color="black" size="32px" />

<EnterIcon color="black" size="32px" />

ErrorIcon

lib/components/Icons/ErrorIcon/ErrorIcon.js

Error icon:

<ErrorIcon color="black" size="32px" />

<ErrorIcon color="black" size="32px" />

ExternalIcon

lib/components/Icons/ExternalIcon/ExternalIcon.js

External icon:

<ExternalIcon color="black" size="32px" />

<ExternalIcon color="black" size="32px" />

EyeIcon

lib/components/Icons/EyeIcon/EyeIcon.js

Eye icon:

<EyeIcon color="black" size="32px" />

<EyeIcon color="black" size="32px" />

EyeLineIcon

lib/components/Icons/EyeLineIcon/EyeLineIcon.js

Eye (line) icon:

<EyeLineIcon color="black" size="32px" />

<EyeLineIcon color="black" size="32px" />

EyeOffIcon

lib/components/Icons/EyeOffIcon/EyeOffIcon.js

Eye-off icon:

<EyeOffIcon color="purple" size="32px" />

<EyeOffIcon color="purple" size="32px" />

FlashIcon

lib/components/Icons/FlashIcon/FlashIcon.js

Flash icon:

<FlashIcon color="black" size="32px" />

<FlashIcon color="black" size="32px" />

FolderIcon

lib/components/Icons/FolderIcon/FolderIcon.js

Folder icon:

<FolderIcon color="black" size="32px" />

<FolderIcon color="black" size="32px" />

GoogleIcon

lib/components/Icons/GoogleIcon/GoogleIcon.js

Google icon:

<GoogleIcon />

<GoogleIcon />

HeartIcon

lib/components/Icons/HeartIcon/HeartIcon.js

Heart icon:

<HeartIcon color="black" size="32px" />

<HeartIcon color="black" size="32px" />

HeartLineIcon

lib/components/Icons/HeartLineIcon/HeartLineIcon.js

Heart (line) icon:

<HeartLineIcon color="black" size="32px" />

<HeartLineIcon color="black" size="32px" />

HomeIcon

lib/components/Icons/HomeIcon/HomeIcon.js

Home icon:

<HomeIcon color="black" size="32px" />

<HomeIcon color="black" size="32px" />

HomeLineIcon

lib/components/Icons/HomeLineIcon/HomeLineIcon.js

Home (line) icon:

<HomeLineIcon color="black" size="32px" />

<HomeLineIcon color="black" size="32px" />

InboxIcon

lib/components/Icons/InboxIcon/InboxIcon.js

Inbox icon:

<InboxIcon color="black" size="32px" />

<InboxIcon color="black" size="32px" />

InfoIcon

lib/components/Icons/InfoIcon/InfoIcon.js

Info icon:

<InfoIcon color="black" size="32px" />

<InfoIcon color="black" size="32px" />

LanguageIcon

lib/components/Icons/LanguageIcon/LanguageIcon.js

Language icon:

<LanguageIcon color="black" size="32px" />

<LanguageIcon color="black" size="32px" />

LeftArrowIcon

lib/components/Icons/LeftArrowIcon/LeftArrowIcon.js

Left arrow icon:

<LeftArrowIcon color="black" size="32px" />

<LeftArrowIcon color="black" size="32px" />

LeftArrowLongIcon

lib/components/Icons/LeftArrowLongIcon/LeftArrowLongIcon.js

Left arrow long icon:

<LeftArrowLongIcon color="black" size="32px" />

<LeftArrowLongIcon color="black" size="32px" />

LeftArrowRoundIcon

lib/components/Icons/LeftArrowRoundIcon/LeftArrowRoundIcon.js

Left arrow round icon:

<LeftArrowRoundIcon color="black" size="32px" />

<LeftArrowRoundIcon color="black" size="32px" />

LeftUpArrowIcon

lib/components/Icons/LeftUpArrowIcon/LeftUpArrowIcon.js

Left-up arrow icon:

<LeftUpArrowIcon color="black" size="32px" />

<LeftUpArrowIcon color="black" size="32px" />

LineIcon

lib/components/Icons/LineIcon/LineIcon.js

Line icon:

<LineIcon color="black" size="32px" />

<LineIcon color="black" size="32px" />

LinkIcon

lib/components/Icons/LinkIcon/LinkIcon.js

Link icon:

<LinkIcon color="black" size="32px" />

<LinkIcon color="black" size="32px" />

LiveWidgetIcon

lib/components/Icons/LiveWidgetIcon/LiveWidgetIcon.js

Live widget icon:

<LiveWidgetIcon color="black" size="32px" />

<LiveWidgetIcon color="black" size="32px" />

LoadingIcon

lib/components/Icons/LoadingIcon/LoadingIcon.js

Loading icon:

<LoadingIcon color="black" size="32px" />

<LoadingIcon color="black" size="32px" />

LocationIcon

lib/components/Icons/LocationIcon/LocationIcon.js

Location icon:

<LocationIcon color="black" size="32px" />

<LocationIcon color="black" size="32px" />

LocationLineIcon

lib/components/Icons/LocationLineIcon/LocationLineIcon.js

Location (line) icon:

<LocationLineIcon color="black" size="32px" />

<LocationLineIcon color="black" size="32px" />

LockIcon

lib/components/Icons/LockIcon/LockIcon.js

Lock icon:

<LockIcon color="black" size="32px" />

<LockIcon color="black" size="32px" />

MenuIcon

lib/components/Icons/MenuIcon/MenuIcon.js

Menu icon:

<MenuIcon color="black" size="32px" />

<MenuIcon color="black" size="32px" />

MenuToggleIcon

lib/components/Icons/MenuToggleIcon/MenuToggleIcon.js

Menu toggle icon:

<MenuToggleIcon color="black" size="32px" />

<MenuToggleIcon color="black" size="32px" />

MessageIcon

lib/components/Icons/MessageIcon/MessageIcon.js

Message icon:

<MessageIcon color="black" size="32px" />

<MessageIcon color="black" size="32px" />

MessagesIcon

lib/components/Icons/MessagesIcon/MessagesIcon.js

Messages icon:

<MessagesIcon color="black" size="16px" />

<MessagesIcon color="black" size="16px" />

<MessagesIcon color="black" size="24px" version="medium" />

<MessagesIcon color="black" size="24px" version="medium" />

<MessagesIcon color="black" size="32px" version="large" />

<MessagesIcon color="black" size="32px" version="large" />

MinusIcon

lib/components/Icons/MinusIcon/MinusIcon.js

Minus icon:

<MinusIcon color="black" size="32px" />

<MinusIcon color="black" size="32px" />

NoticeIcon

lib/components/Icons/NoticeIcon/NoticeIcon.js

Notice icon:

<NoticeIcon color="black" size="32px" />

<NoticeIcon color="black" size="32px" />

NotificationIcon

lib/components/Icons/NotificationIcon/NotificationIcon.js

Notification icon:

<NotificationIcon color="black" size="32px" />

<NotificationIcon color="black" size="32px" />

NotificationLineIcon

lib/components/Icons/NotificationLineIcon/NotificationLineIcon.js

Notification (line) icon:

<NotificationLineIcon color="black" size="32px" />

<NotificationLineIcon color="black" size="32px" />

OpenConversationIcon

lib/components/Icons/OpenConversationIcon/OpenConversationIcon.js

Open conversationIcon icon:

<OpenConversationIcon color="black" size="32px" />

<OpenConversationIcon color="black" size="32px" />

OptionsIcon

lib/components/Icons/OptionsIcon/OptionsIcon.js

Options icon:

<OptionsIcon color="black" size="32px" />

<OptionsIcon color="black" size="32px" />

OptionsVerticalIcon

lib/components/Icons/OptionsVerticalIcon/OptionsVerticalIcon.js

Options (vertical) icon:

<OptionsVerticalIcon color="black" size="32px" />

<OptionsVerticalIcon color="black" size="32px" />

PeopleIcon

lib/components/Icons/PeopleIcon/PeopleIcon.js

People icon:

<PeopleIcon color="black" size="32px" />

<PeopleIcon color="black" size="32px" />

PhotoIcon

lib/components/Icons/PhotoIcon/PhotoIcon.js

Photo icon:

<PhotoIcon color="black" size="32px" />

<PhotoIcon color="black" size="32px" />

PlayIcon

lib/components/Icons/PlayIcon/PlayIcon.js

Play icon:

<PlayIcon color="black" size="32px" />

<PlayIcon color="black" size="32px" />

PlusIcon

lib/components/Icons/PlusIcon/PlusIcon.js

Plus icon:

<PlusIcon color="black" size="32px" />

<PlusIcon color="black" size="32px" />

PointerDefaultIcon

lib/components/Icons/PointerDefaultIcon/PointerDefaultIcon.js

Pointer default icon:

<PointerDefaultIcon color="black" size="32px" />

<PointerDefaultIcon color="black" size="32px" />

PointerGrabIcon

lib/components/Icons/PointerGrabIcon/PointerGrabIcon.js

Pointer grab icon:

<PointerGrabIcon color="black" size="32px" />

<PointerGrabIcon color="black" size="32px" />

PointerHoverIcon

lib/components/Icons/PointerHoverIcon/PointerHoverIcon.js

Pointer hover icon:

<PointerHoverIcon color="black" size="32px" />

<PointerHoverIcon color="black" size="32px" />

QuestionIcon

lib/components/Icons/QuestionIcon/QuestionIcon.js

Question icon:

<QuestionIcon color="black" size="32px" />

<QuestionIcon color="black" size="32px" />

RemoveIcon

lib/components/Icons/RemoveIcon/RemoveIcon.js

Remove icon:

<RemoveIcon color="black" size="32px" />

<RemoveIcon color="black" size="32px" />

RemoveLineIcon

lib/components/Icons/RemoveLineIcon/RemoveLineIcon.js

Remove (line) icon:

<RemoveLineIcon color="black" size="32px" />

<RemoveLineIcon color="black" size="32px" />

ResetIcon

lib/components/Icons/ResetIcon/ResetIcon.js

Reset icon:

<ResetIcon color="black" size="32px" />

<ResetIcon color="black" size="32px" />

RightArrowIcon

lib/components/Icons/RightArrowIcon/RightArrowIcon.js

Right arrow icon:

<RightArrowIcon color="black" size="32px" />

<RightArrowIcon color="black" size="32px" />

RightArrowLongIcon

lib/components/Icons/RightArrowLongIcon/RightArrowLongIcon.js

Right arrow (long) icon:

<RightArrowLongIcon color="black" size="32px" />

<RightArrowLongIcon color="black" size="32px" />

RightArrowRoundIcon

lib/components/Icons/RightArrowRoundIcon/RightArrowRoundIcon.js

Right arrow round icon:

<RightArrowRoundIcon color="black" size="32px" />

<RightArrowRoundIcon color="black" size="32px" />

RightUpArrowIcon

lib/components/Icons/RightUpArrow/RightUpArrowIcon.js

Right-up arrow icon:

<RightUpArrowIcon color="black" size="32px" />

<RightUpArrowIcon color="black" size="32px" />

SearchIcon

lib/components/Icons/SearchIcon/SearchIcon.js

Search icon:

<SearchIcon color="black" size="32px" />

<SearchIcon color="black" size="32px" />

SendIcon

lib/components/Icons/SendIcon/SendIcon.js

Send icon:

<SendIcon color="black" size="32px" />

<SendIcon color="black" size="32px" />

SettingsIcon

lib/components/Icons/SettingsIcon/SettingsIcon.js

Settings icon:

<SettingsIcon color="black" size="32px" />

<SettingsIcon color="black" size="32px" />

SlackIcon

lib/components/Icons/SlackIcon/SlackIcon.js

Slack icon:

<SlackIcon color="black" size="32px" />

<SlackIcon color="black" size="32px" />

SortAscIcon

lib/components/Icons/SortAscIcon/SortAscIcon.js

SortAsc icon:

<SortAscIcon color="black" size="32px" />

<SortAscIcon color="black" size="32px" />

SortDescIcon

lib/components/Icons/SortDescIcon/SortDescIcon.js

SortDesc icon:

<SortDescIcon color="black" size="32px" />

<SortDescIcon color="black" size="32px" />

SpaceshipIcon

lib/components/Icons/SpaceshipIcon/SpaceshipIcon.js

Spaceship icon:

<SpaceshipIcon color="black" size="32px" />

<SpaceshipIcon color="black" size="32px" />

SpinnerIcon

lib/components/Icons/SpinnerIcon/SpinnerIcon.js

Spinner:

<SpinnerIcon className="Primary" size="32px" />

<SpinnerIcon className="Primary" size="32px" />

SyncIcon

lib/components/Icons/SyncIcon/SyncIcon.js

Sync icon:

<SyncIcon color="black" size="32px" />

<SyncIcon color="black" size="32px" />

TickIcon

lib/components/Icons/TickIcon/TickIcon.js

Tick icon:

<TickIcon color="black" size="32px" />

<TickIcon color="black" size="32px" />

TimestampIcon

lib/components/Icons/TimestampIcon/TimestampIcon.js

Timestamp icon:

<TimestampIcon color="black" size="32px" />

<TimestampIcon color="black" size="32px" />

UndoIcon

lib/components/Icons/UndoIcon/UndoIcon.js

Undo icon:

<UndoIcon color="black" size="32px" />

<UndoIcon color="black" size="32px" />

UpArrowIcon

lib/components/Icons/UpArrowIcon/UpArrowIcon.js

Up arrow icon:

<UpArrowIcon color="black" size="32px" />

<UpArrowIcon color="black" size="32px" />

UpIcon

lib/components/Icons/UpIcon/UpIcon.js

Up icon:

<UpIcon color="black" size="32px" />

<UpIcon color="black" size="32px" />

UploadCloudIcon

lib/components/Icons/UploadCloudIcon/UploadCloudIcon.js

Upload cloud icon:

<UploadCloudIcon color="black" size="32px" />

<UploadCloudIcon color="black" size="32px" />

UploadIcon

lib/components/Icons/UploadIcon/UploadIcon.js

Upload icon:

<UploadIcon color="black" size="32px" />

<UploadIcon color="black" size="32px" />

UpRoundIcon

lib/components/Icons/UpRoundIcon/UpRoundIcon.js

Up round icon:

<UpRoundIcon color="black" size="32px" />

<UpRoundIcon color="black" size="32px" />

UserIcon

lib/components/Icons/UserIcon/UserIcon.js

User icon:

<UserIcon color="black" size="32px" />

<UserIcon color="black" size="32px" />

UserLineIcon

lib/components/Icons/UserLineIcon/UserLineIcon.js

User (line) icon:

<UserLineIcon color="black" size="32px" />

<UserLineIcon color="black" size="32px" />

YouTubeIcon

lib/components/Icons/YouTubeIcon/YouTubeIcon.js

YouTube icon:

<YouTubeIcon color="black" size="32px" />

<YouTubeIcon color="black" size="32px" />

Media

Media components

import Image from '../components/Media/Image';
import exampleImage from '../assets/images/banane2.jpg';

<div className="Showcase ImageExample">
	<Image src={exampleImage} style={{width: '112px'}} />
	<Image src={exampleImage} className="Media__Round" />
	<Image src={exampleImage} className="Media__RoundLeft" />
	<Image src={exampleImage} className="Media__RoundRight" />
	<Image src={exampleImage} className="Media__RoundTop" />
	<Image src={exampleImage} className="Media__RoundBottom" />
</div>

import Image from '../components/Media/Image';
import exampleImage from '../assets/images/banane2.jpg';

<div className="Showcase ImageExample">
	<Image src={exampleImage} style={{width: '112px'}} />
	<Image src={exampleImage} className="Media__Round" />
	<Image src={exampleImage} className="Media__RoundLeft" />
	<Image src={exampleImage} className="Media__RoundRight" />
	<Image src={exampleImage} className="Media__RoundTop" />
	<Image src={exampleImage} className="Media__RoundBottom" />
</div>

Image

lib/components/Media/Image/Image.js

A working image:

import exampleImage from '../../../assets/images/banane.jpg';
<Image src={exampleImage} />

import exampleImage from '../../../assets/images/banane.jpg';
<Image src={exampleImage} />

Image with fallback:

Not found

<Image src="invalid.jpg" fallback={<p>Not found</p>} />

<Image src="invalid.jpg" fallback={<p>Not found</p>} />

Avatars

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.

Avatar

lib/components/Avatar/Avatar.js

Square regular avatar (default props):

import exampleImage from '../../assets/images/strange.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="offline" />
	<Avatar initials="DS" status="away" />
</div>

import exampleImage from '../../assets/images/strange.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="offline" />
	<Avatar initials="DS" status="away" />
</div>

Square small avatar:

import exampleImage from '../../assets/images/spiderman.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="offline" size="small" />
	<Avatar initials="PP" status="away" size="small" />
</div>

import exampleImage from '../../assets/images/spiderman.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="offline" size="small" />
	<Avatar initials="PP" status="away" size="small" />
</div>

Circle regular avatar:

import exampleImage from '../../assets/images/hulk.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="online" statusPosition="bottom" shape="circle" />
	<Avatar initials="HM" status="offline" statusPosition="bottom" shape="circle" />
</div>

import exampleImage from '../../assets/images/hulk.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="online" statusPosition="bottom" shape="circle" />
	<Avatar initials="HM" status="offline" statusPosition="bottom" shape="circle" />
</div>

Circle small avatar:

import exampleImage from '../../assets/images/ironman.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="online" statusPosition="bottom" shape="circle" size="small" />
	<Avatar initials="IM" status="online" statusPosition="bottom" shape="circle" size="small" />
</div>

import exampleImage from '../../assets/images/ironman.jpg';

<div className="Showcase">
	<Avatar src={exampleImage} status="online" statusPosition="bottom" shape="circle" size="small" />
	<Avatar initials="IM" status="online" statusPosition="bottom" shape="circle" size="small" />
</div>

No status indicator:

import exampleImage from '../../assets/images/thor.jpg';
import exampleImage2 from '../../assets/images/deadpool.png';

<div className="Showcase">
	<Avatar src={exampleImage} status="offline" hideStatus />
	<Avatar initials="TH" hideStatus />
	
	<Avatar src={exampleImage2} shape="circle" size="small" hideStatus />
  <Avatar initials="DP" shape="circle" size="small" hideStatus />
</div>

import exampleImage from '../../assets/images/thor.jpg';
import exampleImage2 from '../../assets/images/deadpool.png';

<div className="Showcase">
	<Avatar src={exampleImage} status="offline" hideStatus />
	<Avatar initials="TH" hideStatus />
	
	<Avatar src={exampleImage2} shape="circle" size="small" hideStatus />
  <Avatar initials="DP" shape="circle" size="small" hideStatus />
</div>

Buttons

Button

lib/components/Buttons/Button/Button.js

Generic button component

Flat buttons:

<>
	<Button mode="flat" content="Dark flat button" /> <br /><br />
	
	<Button mode="flat" content="Medium flat button" className="Medium" /> <br /><br />
	
	<Button mode="flat" content="Light flat button" className="Light" /> <br /><br />
	
	<Button mode="flat" content="Lighter flat button" className="Lighter" /> <br /><br />
	
	<Button mode="flat" content="Inverted flat button" className="Inverted" /> <br /><br />
	
	<Button mode="flat" status="primary" content="Primary button" /> <br /><br />
	
	<Button mode="flat" status="success" content="Success button" /> <br /><br />
	
	<Button mode="flat" status="danger" content="Danger button" /> <br /><br />
	
	<Button mode="flat" status="alert" content="Alert button" />
</>

<>
	<Button mode="flat" content="Dark flat button" /> <br /><br />
	
	<Button mode="flat" content="Medium flat button" className="Medium" /> <br /><br />
	
	<Button mode="flat" content="Light flat button" className="Light" /> <br /><br />
	
	<Button mode="flat" content="Lighter flat button" className="Lighter" /> <br /><br />
	
	<Button mode="flat" content="Inverted flat button" className="Inverted" /> <br /><br />
	
	<Button mode="flat" status="primary" content="Primary button" /> <br /><br />
	
	<Button mode="flat" status="success" content="Success button" /> <br /><br />
	
	<Button mode="flat" status="danger" content="Danger button" /> <br /><br />
	
	<Button mode="flat" status="alert" content="Alert button" />
</>

Flat buttons with icon:

import CameraIcon from '../../Icons/CameraIcon';
import HomeIcon from '../../Icons/HomeIcon';
import HeartIcon from '../../Icons/HeartIcon';
import EditLineIcon from '../../Icons/EditLineIcon';
import UserLineIcon from '../../Icons/UserLineIcon';
import AddIcon from '../../Icons/AddIcon'
;<>
<Button mode="flat" content="Flat icon button" icon={<CameraIcon />} /> <br /><br />

<Button mode="flat" content="Flat big icon button" icon={<HomeIcon size={40} className="Alert" />} /> <br /><br />

<Button mode="flat" content="Bottom icon button" icon={<HeartIcon color="red" size={64} />} iconPosition="bottom" /> <br /><br />

<Button mode="flat" content="Left icon button" icon={<EditLineIcon />} iconPosition="left" /> <br /><br />

<Button mode="flat" content="Top icon button" icon={<UserLineIcon />} iconPosition="top" /> <br /><br /><br /><br />

<Button mode="flat" icon={<AddIcon size={40} />} />
</>

import CameraIcon from '../../Icons/CameraIcon';
import HomeIcon from '../../Icons/HomeIcon';
import HeartIcon from '../../Icons/HeartIcon';
import EditLineIcon from '../../Icons/EditLineIcon';
import UserLineIcon from '../../Icons/UserLineIcon';
import AddIcon from '../../Icons/AddIcon'
;<>
<Button mode="flat" content="Flat icon button" icon={<CameraIcon />} /> <br /><br />

<Button mode="flat" content="Flat big icon button" icon={<HomeIcon size={40} className="Alert" />} /> <br /><br />

<Button mode="flat" content="Bottom icon button" icon={<HeartIcon color="red" size={64} />} iconPosition="bottom" /> <br /><br />

<Button mode="flat" content="Left icon button" icon={<EditLineIcon />} iconPosition="left" /> <br /><br />

<Button mode="flat" content="Top icon button" icon={<UserLineIcon />} iconPosition="top" /> <br /><br /><br /><br />

<Button mode="flat" icon={<AddIcon size={40} />} />
</>

Raised buttons (default and hallow):

<>
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Primary" />
		<Button mode="raised" status="primary" content="Progress" progress={40} />
		<Button mode="raised" status="primary" content="Rounded" rounded />
		<Button mode="raised" status="primary" content="Disabled" disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Hollow button" hollow />
		<Button mode="raised" status="primary" content="Hollow rounded" hollow rounded />
		<Button mode="raised" status="primary" content="Hollow disabled" hollow disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Cap top" cap="top" />
		<Button mode="raised" status="primary" content="Cap bottom" cap="bottom" />
		<Button mode="raised" status="primary" content="Cap left" cap="left" />
		<Button mode="raised" status="primary" content="Cap right" cap="right" />
	</div> <br /><br />
	
	<div className="Showcase">
  	<Button mode="raised" status="primary" content="Cap top" hollow cap="top" />
  	<Button mode="raised" status="primary" content="Cap bottom" hollow cap="bottom" />
  	<Button mode="raised" status="primary" content="Cap left" hollow cap="left" />
  	<Button mode="raised" status="primary" content="Cap right" hollow cap="right" />
  </div>
</>

<>
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Primary" />
		<Button mode="raised" status="primary" content="Progress" progress={40} />
		<Button mode="raised" status="primary" content="Rounded" rounded />
		<Button mode="raised" status="primary" content="Disabled" disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Hollow button" hollow />
		<Button mode="raised" status="primary" content="Hollow rounded" hollow rounded />
		<Button mode="raised" status="primary" content="Hollow disabled" hollow disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Cap top" cap="top" />
		<Button mode="raised" status="primary" content="Cap bottom" cap="bottom" />
		<Button mode="raised" status="primary" content="Cap left" cap="left" />
		<Button mode="raised" status="primary" content="Cap right" cap="right" />
	</div> <br /><br />
	
	<div className="Showcase">
  	<Button mode="raised" status="primary" content="Cap top" hollow cap="top" />
  	<Button mode="raised" status="primary" content="Cap bottom" hollow cap="bottom" />
  	<Button mode="raised" status="primary" content="Cap left" hollow cap="left" />
  	<Button mode="raised" status="primary" content="Cap right" hollow cap="right" />
  </div>
</>

Raised icon buttons:

import HeartIcon from '../../Icons/HeartIcon';
import PlusIcon from '../../Icons/PlusIcon';
import OptionsVerticalIcon from '../../Icons/OptionsVerticalIcon';
import CheckedIcon from '../../Icons/CheckedIcon';
import LoadingIcon from '../../Icons/LoadingIcon';
import UploadIcon from '../../Icons/UploadIcon'
;<>
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
		<Button mode="raised" status="primary" content="Right Icon" icon={<OptionsVerticalIcon />} />
		<Button mode="raised" status="primary" content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
		<Button mode="raised" status="primary" icon={<PlusIcon />} />
		<Button mode="raised" status="success" icon={<CheckedIcon />} rounded />
	</div> <br /><br />
	
	<div className="Showcase">
  	<Button mode="raised" status="primary" hollow content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
    <Button mode="raised" status="primary" hollow content="Right Icon" icon={<LoadingIcon />} iconPosition="right" />
    <Button mode="raised" status="primary" hollow content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
    <Button mode="raised" status="primary" hollow icon={<UploadIcon />} />
    <Button mode="raised" status="primary" hollow icon={<HeartIcon />} rounded />
  </div>
</>

import HeartIcon from '../../Icons/HeartIcon';
import PlusIcon from '../../Icons/PlusIcon';
import OptionsVerticalIcon from '../../Icons/OptionsVerticalIcon';
import CheckedIcon from '../../Icons/CheckedIcon';
import LoadingIcon from '../../Icons/LoadingIcon';
import UploadIcon from '../../Icons/UploadIcon'
;<>
	<div className="Showcase">
		<Button mode="raised" status="primary" content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
		<Button mode="raised" status="primary" content="Right Icon" icon={<OptionsVerticalIcon />} />
		<Button mode="raised" status="primary" content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
		<Button mode="raised" status="primary" icon={<PlusIcon />} />
		<Button mode="raised" status="success" icon={<CheckedIcon />} rounded />
	</div> <br /><br />
	
	<div className="Showcase">
  	<Button mode="raised" status="primary" hollow content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
    <Button mode="raised" status="primary" hollow content="Right Icon" icon={<LoadingIcon />} iconPosition="right" />
    <Button mode="raised" status="primary" hollow content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
    <Button mode="raised" status="primary" hollow icon={<UploadIcon />} />
    <Button mode="raised" status="primary" hollow icon={<HeartIcon />} rounded />
  </div>
</>

Small variant:

import HeartIcon from '../../Icons/HeartIcon';
import PlusIcon from '../../Icons/PlusIcon';
import OptionsVerticalIcon from '../../Icons/OptionsVerticalIcon';
import CheckedIcon from '../../Icons/CheckedIcon';
import LoadingIcon from '../../Icons/LoadingIcon';
import UploadIcon from '../../Icons/UploadIcon'
;<>
	<div className="Showcase">
		<Button mode="raised" small status="danger" content="Primary" />
		<Button mode="raised" small status="danger" content="Progress" progress={40} />
		<Button mode="raised" small status="danger" content="Rounded" rounded />
		<Button mode="raised" small status="danger" content="Disabled" disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" small status="danger" content="Hollow button" hollow />
		<Button mode="raised" small status="danger" content="Hollow rounded" hollow rounded />
		<Button mode="raised" small status="danger" content="Hollow disabled" hollow disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" small status="danger" content="Cap top" cap="top" />
		<Button mode="raised" small status="danger" content="Cap bottom" cap="bottom" />
		<Button mode="raised" small status="danger" content="Cap left" cap="left" />
		<Button mode="raised" small status="danger" content="Cap right" cap="right" />
	</div> <br /><br />
	
	<div className="Showcase">
  	<Button mode="raised" small status="danger" content="Cap top" hollow cap="top" />
  	<Button mode="raised" small status="danger" content="Cap bottom" hollow cap="bottom" />
  	<Button mode="raised" small status="danger" content="Cap left" hollow cap="left" />
  	<Button mode="raised" small status="danger" content="Cap right" hollow cap="right" />
  </div> <br /><br />
  
  <div className="Showcase">
  	<Button mode="raised" small status="danger" content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
  	<Button mode="raised" small status="danger" content="Right Icon" icon={<OptionsVerticalIcon />} />
  	<Button mode="raised" small status="danger" content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
  	<Button mode="raised" small status="danger" icon={<PlusIcon />} />
  	<Button mode="raised" small status="success" icon={<CheckedIcon />} rounded />
  </div> <br /><br />
  	
  <div className="Showcase">
    <Button mode="raised" small status="danger" hollow content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
    <Button mode="raised" small status="danger" hollow content="Right Icon" icon={<LoadingIcon />} iconPosition="right" />
    <Button mode="raised" small status="danger" hollow content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
    <Button mode="raised" small status="danger" hollow icon={<UploadIcon />} />
    <Button mode="raised" small status="danger" hollow icon={<HeartIcon />} rounded />
  </div>
</>

import HeartIcon from '../../Icons/HeartIcon';
import PlusIcon from '../../Icons/PlusIcon';
import OptionsVerticalIcon from '../../Icons/OptionsVerticalIcon';
import CheckedIcon from '../../Icons/CheckedIcon';
import LoadingIcon from '../../Icons/LoadingIcon';
import UploadIcon from '../../Icons/UploadIcon'
;<>
	<div className="Showcase">
		<Button mode="raised" small status="danger" content="Primary" />
		<Button mode="raised" small status="danger" content="Progress" progress={40} />
		<Button mode="raised" small status="danger" content="Rounded" rounded />
		<Button mode="raised" small status="danger" content="Disabled" disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" small status="danger" content="Hollow button" hollow />
		<Button mode="raised" small status="danger" content="Hollow rounded" hollow rounded />
		<Button mode="raised" small status="danger" content="Hollow disabled" hollow disabled />
	</div> <br /><br />
	
	<div className="Showcase">
		<Button mode="raised" small status="danger" content="Cap top" cap="top" />
		<Button mode="raised" small status="danger" content="Cap bottom" cap="bottom" />
		<Button mode="raised" small status="danger" content="Cap left" cap="left" />
		<Button mode="raised" small status="danger" content="Cap right" cap="right" />
	</div> <br /><br />
	
	<div className="Showcase">
  	<Button mode="raised" small status="danger" content="Cap top" hollow cap="top" />
  	<Button mode="raised" small status="danger" content="Cap bottom" hollow cap="bottom" />
  	<Button mode="raised" small status="danger" content="Cap left" hollow cap="left" />
  	<Button mode="raised" small status="danger" content="Cap right" hollow cap="right" />
  </div> <br /><br />
  
  <div className="Showcase">
  	<Button mode="raised" small status="danger" content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
  	<Button mode="raised" small status="danger" content="Right Icon" icon={<OptionsVerticalIcon />} />
  	<Button mode="raised" small status="danger" content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
  	<Button mode="raised" small status="danger" icon={<PlusIcon />} />
  	<Button mode="raised" small status="success" icon={<CheckedIcon />} rounded />
  </div> <br /><br />
  	
  <div className="Showcase">
    <Button mode="raised" small status="danger" hollow content="Left Icon" icon={<PlusIcon />} iconPosition="left" />
    <Button mode="raised" small status="danger" hollow content="Right Icon" icon={<LoadingIcon />} iconPosition="right" />
    <Button mode="raised" small status="danger" hollow content="Button" icon={<PlusIcon />} rounded iconPosition="left" />
    <Button mode="raised" small status="danger" hollow icon={<UploadIcon />} />
    <Button mode="raised" small status="danger" hollow icon={<HeartIcon />} rounded />
  </div>
</>

FlatButton

lib/components/Buttons/FlatButton/FlatButton.js

Shortcut for a button with mode=flat:

<FlatButton content="Flat Button" />

<FlatButton content="Flat Button" />

RaisedButton

lib/components/Buttons/RaisedButton/RaisedButton.js

Shortcut for a button with mode=raised:

<RaisedButton content="Raised Button" />

<RaisedButton content="Raised Button" />

Form Elements

Components that can be used to build forms.

Checkbox

lib/components/Form/Checkbox/Checkbox.js

Checkboxes:

<>
	<Checkbox /> <br /><br />

	<Checkbox label="Checked" checked /> <br /><br />
	
	<Checkbox label="Unchecked" /> <br /><br />
	
	<Checkbox label="Disabled" disabled /> <br /><br />
	
	<Checkbox status="primary" label="Primary" checked />
</>

<>
	<Checkbox /> <br /><br />

	<Checkbox label="Checked" checked /> <br /><br />
	
	<Checkbox label="Unchecked" /> <br /><br />
	
	<Checkbox label="Disabled" disabled /> <br /><br />
	
	<Checkbox status="primary" label="Primary" checked />
</>

lib/components/Form/Dropdown/Dropdown.js

Dropdown:

Dropdown

List Option 1
List Option 2
List Option 3

Label
List Option 1
List Option 2
List Option 3
List Option 4

JR
Judy Rivera
JW
Jeffrey Washington
LG
Lawrence Gibson

List Option 1
List Option 2
List Option 3
List Option 4

List Option 1
List Option 2
List Option 3
List Option 4

import Menu from '../Menu';
import MenuItem from '../MenuItem';
import MenuLabel from '../MenuLabel';
import Checkbox from '../Checkbox';
import SearchBox from '../SearchBox';
import Avatar from '../../Avatar';
import FlatButton from '../../Buttons/FlatButton';
import AddIcon from '../../Icons/AddIcon'
;<>
	<div className="Showcase AlignTop">
		<div style={{flex: 1}}>
			<Dropdown value="Dropdown">
				<Menu>
					<MenuItem>List Option 1</MenuItem>
					<MenuItem>List Option 2</MenuItem>
					<MenuItem>List Option 3</MenuItem>
				</Menu>
			</Dropdown>
		</div>
	
		<div style={{flex: 1, height: '250px'}}>
			<Dropdown initialOpen={true}>
      	<Menu>
      		<MenuLabel text="Label" />
      		<MenuItem><Checkbox label="List Option 1" status="primary" /></MenuItem>
      		<MenuItem><Checkbox label="List Option 2" status="primary" /></MenuItem>
      		<MenuItem><Checkbox label="List Option 3" status="primary" checked /></MenuItem>
      		<MenuItem><Checkbox label="List Option 4" status="primary" /></MenuItem>
      	</Menu>
    	</Dropdown>
		</div>
		
		<div style={{flex: 1}}>
    	<Dropdown initialOpen={true}>
    		<Menu>
    			<MenuItem hasDivider={false} hasInput>
    				<SearchBox placeholder="Search in dropdown" />
					</MenuItem>
    			<MenuItem hasDivider className="DropdownAvatarItem">
    				<Avatar initials="JR" className="DropdownAvatar" shape="circle" hideStatus /> <span>Judy Rivera</span>
					</MenuItem>
    			<MenuItem hasDivider className="DropdownAvatarItem">
            <Avatar initials="JW" className="DropdownAvatar" shape="circle" hideStatus /> <span>Jeffrey Washington</span>
          </MenuItem>
    			<MenuItem hasDivider className="DropdownAvatarItem">
            <Avatar initials="LG" className="DropdownAvatar" shape="circle" hideStatus /> <span>Lawrence Gibson</span>
          </MenuItem>
    		</Menu>
    	</Dropdown>
    </div>
	</div> <br /><br />
	
	<div className="Showcase AlignTop">
		<div style={{flex: 1}}>
			<Dropdown initialOpen={true}>
				<Menu>
					<MenuItem hasDivider>
						<FlatButton content="Add new" icon={<AddIcon />} iconPosition="left" status="primary" />
					</MenuItem>
					<MenuItem hasDivider>List Option 1</MenuItem>
					<MenuItem hasDivider>List Option 2</MenuItem>
					<MenuItem hasDivider>List Option 3</MenuItem>
					<MenuItem hasDivider>List Option 4</MenuItem>
				</Menu>
			</Dropdown>
		</div>
	
		<div style={{flex: 1, height: '250px'}}>
			<Dropdown initialOpen={true} onChange={value => window.alert(value)}>
      	<Menu>
      		<MenuItem hasDivider value={1}>List Option 1</MenuItem>
      		<MenuItem
      		 	hasDivider
      			submenu={
            	<Menu style={{width: '300px'}}>
              	<MenuItem hasDivider value="A">List Option 1</MenuItem>
                <MenuItem hasDivider value="B">List Option 2</MenuItem>
                <MenuItem hasDivider value="C">List Option 3</MenuItem>
                <MenuItem hasDivider value="D">List Option 4</MenuItem>
              </Menu>
            }
      		>
      			List Option 2
      		</MenuItem>
      		<MenuItem hasDivider value={3}>List Option 3</MenuItem>
      		<MenuItem hasDivider value={4}>List Option 4</MenuItem>
      	</Menu>
    	</Dropdown>
		</div>
		
		<div style={{flex: 1}} />
	</div>
</>

import Menu from '../Menu';
import MenuItem from '../MenuItem';
import MenuLabel from '../MenuLabel';
import Checkbox from '../Checkbox';
import SearchBox from '../SearchBox';
import Avatar from '../../Avatar';
import FlatButton from '../../Buttons/FlatButton';
import AddIcon from '../../Icons/AddIcon'
;<>
	<div className="Showcase AlignTop">
		<div style={{flex: 1}}>
			<Dropdown value="Dropdown">
				<Menu>
					<MenuItem>List Option 1</MenuItem>
					<MenuItem>List Option 2</MenuItem>
					<MenuItem>List Option 3</MenuItem>
				</Menu>
			</Dropdown>
		</div>
	
		<div style={{flex: 1, height: '250px'}}>
			<Dropdown initialOpen={true}>
      	<Menu>
      		<MenuLabel text="Label" />
      		<MenuItem><Checkbox label="List Option 1" status="primary" /></MenuItem>
      		<MenuItem><Checkbox label="List Option 2" status="primary" /></MenuItem>
      		<MenuItem><Checkbox label="List Option 3" status="primary" checked /></MenuItem>
      		<MenuItem><Checkbox label="List Option 4" status="primary" /></MenuItem>
      	</Menu>
    	</Dropdown>
		</div>
		
		<div style={{flex: 1}}>
    	<Dropdown initialOpen={true}>
    		<Menu>
    			<MenuItem hasDivider={false} hasInput>
    				<SearchBox placeholder="Search in dropdown" />
					</MenuItem>
    			<MenuItem hasDivider className="DropdownAvatarItem">
    				<Avatar initials="JR" className="DropdownAvatar" shape="circle" hideStatus /> <span>Judy Rivera</span>
					</MenuItem>
    			<MenuItem hasDivider className="DropdownAvatarItem">
            <Avatar initials="JW" className="DropdownAvatar" shape="circle" hideStatus /> <span>Jeffrey Washington</span>
          </MenuItem>
    			<MenuItem hasDivider className="DropdownAvatarItem">
            <Avatar initials="LG" className="DropdownAvatar" shape="circle" hideStatus /> <span>Lawrence Gibson</span>
          </MenuItem>
    		</Menu>
    	</Dropdown>
    </div>
	</div> <br /><br />
	
	<div className="Showcase AlignTop">
		<div style={{flex: 1}}>
			<Dropdown initialOpen={true}>
				<Menu>
					<MenuItem hasDivider>
						<FlatButton content="Add new" icon={<AddIcon />} iconPosition="left" status="primary" />
					</MenuItem>
					<MenuItem hasDivider>List Option 1</MenuItem>
					<MenuItem hasDivider>List Option 2</MenuItem>
					<MenuItem hasDivider>List Option 3</MenuItem>
					<MenuItem hasDivider>List Option 4</MenuItem>
				</Menu>
			</Dropdown>
		</div>
	
		<div style={{flex: 1, height: '250px'}}>
			<Dropdown initialOpen={true} onChange={value => window.alert(value)}>
      	<Menu>
      		<MenuItem hasDivider value={1}>List Option 1</MenuItem>
      		<MenuItem
      		 	hasDivider
      			submenu={
            	<Menu style={{width: '300px'}}>
              	<MenuItem hasDivider value="A">List Option 1</MenuItem>
                <MenuItem hasDivider value="B">List Option 2</MenuItem>
                <MenuItem hasDivider value="C">List Option 3</MenuItem>
                <MenuItem hasDivider value="D">List Option 4</MenuItem>
              </Menu>
            }
      		>
      			List Option 2
      		</MenuItem>
      		<MenuItem hasDivider value={3}>List Option 3</MenuItem>
      		<MenuItem hasDivider value={4}>List Option 4</MenuItem>
      	</Menu>
    	</Dropdown>
		</div>
		
		<div style={{flex: 1}} />
	</div>
</>

InputField

lib/components/Form/InputField/InputField.js

Input fields:

Error message

Warning message

Success message

Custom icon

This is a label

Generic message

import UserIcon from '../../Icons/UserIcon';
import TickIcon from '../../Icons/TickIcon'
;<>
	<InputField /> <br /><br />

	<InputField value="Input field value" /> <br /><br />
	
	<InputField icon={<UserIcon />} /> <br /><br />
	
	<InputField value="Disabled" icon={<UserIcon />} disabled /> <br /><br />
	
	<InputField status="success" icon={<TickIcon />} /> <br /><br />
	
	<InputField status="primary" /> <br /><br />
	
	<InputField status="danger" value="Wrong value" message="Error message" /> <br /><br /> 
	
	<InputField status="alert" value="A value" message="Warning message" /> <br /><br />
	
	<InputField status="success" value="The value!" message="Success message" /> <br /><br />
	
	<InputField status="danger" value="Wrong value" message="Custom icon" messageIcon={<UserIcon />} /> <br /><br />
	
	<InputField value="A value" message="Generic message" label="This is a label" />
</>

import UserIcon from '../../Icons/UserIcon';
import TickIcon from '../../Icons/TickIcon'
;<>
	<InputField /> <br /><br />

	<InputField value="Input field value" /> <br /><br />
	
	<InputField icon={<UserIcon />} /> <br /><br />
	
	<InputField value="Disabled" icon={<UserIcon />} disabled /> <br /><br />
	
	<InputField status="success" icon={<TickIcon />} /> <br /><br />
	
	<InputField status="primary" /> <br /><br />
	
	<InputField status="danger" value="Wrong value" message="Error message" /> <br /><br /> 
	
	<InputField status="alert" value="A value" message="Warning message" /> <br /><br />
	
	<InputField status="success" value="The value!" message="Success message" /> <br /><br />
	
	<InputField status="danger" value="Wrong value" message="Custom icon" messageIcon={<UserIcon />} /> <br /><br />
	
	<InputField value="A value" message="Generic message" label="This is a label" />
</>

lib/components/Form/Menu/Menu.js

Menu:

Item 1
Item 2
Item 3

import MenuItem from '../MenuItem'
;<Menu>
	<MenuItem>Item 1</MenuItem>
	<MenuItem>Item 2</MenuItem>
	<MenuItem>Item 3</MenuItem>
</Menu>

import MenuItem from '../MenuItem'
;<Menu>
	<MenuItem>Item 1</MenuItem>
	<MenuItem>Item 2</MenuItem>
	<MenuItem>Item 3</MenuItem>
</Menu>

MenuItem

lib/components/Form/MenuItem/MenuItem.js

Menu item:

Item 1

<MenuItem>Item 1</MenuItem>

<MenuItem>Item 1</MenuItem>

MenuLabel

lib/components/Form/MenuLabel/MenuLabel.js

Menu label:

label

<MenuLabel text="label"/>

<MenuLabel text="label"/>

Radio

lib/components/Form/Radio/Radio.js

Radio buttons:

<form>
	<Radio name="test-radio" /> <br /><br />

	<Radio name="test-radio" label="Checked" checked /> <br /><br />
	
	<Radio name="test-radio" label="Unchecked" /> <br /><br />
	
	<Radio label="Disabled" disabled /> <br /><br />
	
	<Radio status="primary" label="Primary" checked />
</form>

<form>
	<Radio name="test-radio" /> <br /><br />

	<Radio name="test-radio" label="Checked" checked /> <br /><br />
	
	<Radio name="test-radio" label="Unchecked" /> <br /><br />
	
	<Radio label="Disabled" disabled /> <br /><br />
	
	<Radio status="primary" label="Primary" checked />
</form>

lib/components/Form/SearchBox/SearchBox.js

Search box:

<SearchBox placeholder="A search box" />

<SearchBox placeholder="A search box" />

Switch

lib/components/Form/Switch/Switch.js

Switch:

<>
	<Switch label="On" checked /> <br /><br />

	<Switch label="Off" /> <br /><br />
	
	<Switch label="Primary" status="primary" checked /> <br /><br />
	
	<Switch label="Disabled" disabled /> <br /><br />
	
	<Switch label="On" checked rounded={false} /> <br /><br />
  
  <Switch label="Off" rounded={false} />
</>

<>
	<Switch label="On" checked /> <br /><br />

	<Switch label="Off" /> <br /><br />
	
	<Switch label="Primary" status="primary" checked /> <br /><br />
	
	<Switch label="Disabled" disabled /> <br /><br />
	
	<Switch label="On" checked rounded={false} /> <br /><br />
  
  <Switch label="Off" rounded={false} />
</>

TextBox

lib/components/Form/TextBox/TextBox.js

Textboxes:

Warning message

This is a label

Error message

import UserIcon from '../../Icons/UserIcon'
;<>
	<TextBox placeholder="Input text" /> <br /><br />
	
	<TextBox status="alert" value="A value" message="Warning message" messageIcon={<UserIcon />} /> <br /><br />
	
	<TextBox status="danger" value="Wrong value" message="Error message" label="This is a label" style={{width: '600px'}} />
</>

import UserIcon from '../../Icons/UserIcon'
;<>
	<TextBox placeholder="Input text" /> <br /><br />
	
	<TextBox status="alert" value="A value" message="Warning message" messageIcon={<UserIcon />} /> <br /><br />
	
	<TextBox status="danger" value="Wrong value" message="Error message" label="This is a label" style={{width: '600px'}} />
</>

Toggle

lib/components/Form/Toggle/Toggle.js

See Switch component

<Toggle checked />

<Toggle checked />

Tooltips

lib/components/Tooltips/Tooltip/Tooltip.js

Tooltips:

import TooltipDatum from '../TooltipDatum'
;<div className="Showcase">
	<Tooltip title="Google Drive" />
	
	<section>
		<Tooltip title="Utenti totali">
  		<TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
  		<TooltipDatum color="#B2C8FF" label="Donna" value={2987} />
  	</Tooltip>
  	
		<Tooltip style={{marginTop: '21px'}}>
  		<TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
		</Tooltip>  	
	</section>
	
	<section>
		<Tooltip title="Utenti totali" light>
    	<TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
      <TooltipDatum color="#B2C8FF" label="Donna" value={2987} />
  	</Tooltip>
    	
    <Tooltip light style={{marginTop: '21px'}}>
      <TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
    </Tooltip>
	</section>
</div>

import TooltipDatum from '../TooltipDatum'
;<div className="Showcase">
	<Tooltip title="Google Drive" />
	
	<section>
		<Tooltip title="Utenti totali">
  		<TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
  		<TooltipDatum color="#B2C8FF" label="Donna" value={2987} />
  	</Tooltip>
  	
		<Tooltip style={{marginTop: '21px'}}>
  		<TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
		</Tooltip>  	
	</section>
	
	<section>
		<Tooltip title="Utenti totali" light>
    	<TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
      <TooltipDatum color="#B2C8FF" label="Donna" value={2987} />
  	</Tooltip>
    	
    <Tooltip light style={{marginTop: '21px'}}>
      <TooltipDatum color="#3E70FF" label="Uomo" value={6279} />
    </Tooltip>
	</section>
</div>

TooltipDatum

lib/components/Tooltips/TooltipDatum/TooltipDatum.js

Tooltips:

Donna

2987

<div className="Showcase">
	<TooltipDatum color="#B2C8FF" label="Donna" value={2987} />
</div>

<div className="Showcase">
	<TooltipDatum color="#B2C8FF" label="Donna" value={2987} />
</div>

Notifications

Notification

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

import AlertIcon from '../Icons/AlertIcon'
;<div style={{display: 'flex'}}>
	<div style={{flex: 1, marginRight: '5rem'}}>
		<Notification status="alert" text="Alert message" /> <br /><br /><br />
	
		<Notification status="primary" text="Info message" /> <br /><br /><br />
	
		<Notification status="success" text="Success message" /> <br /><br /><br />
	
		<Notification status="danger" text="Error message" /> <br /><br /><br />
	
		<Notification status="default" text="Notification message" icon={<AlertIcon style={{color: '#ffb200'}} />} /> <br /><br /><br />
	</div>
	
	<div style={{flex: 1}}>
  	<Notification light status="alert" text="Alert message" /> <br /><br /><br />
  	
  	<Notification light status="primary" text="Info message" /> <br /><br /><br />
  	
  	<Notification light status="success" text="Success message" /> <br /><br /><br />
  	
  	<Notification light status="danger" text="Error message" /> <br /><br /><br />
  	
  	<Notification light status="default" text="Notification message" /> <br /><br /><br />
  </div>
</div>

import AlertIcon from '../Icons/AlertIcon'
;<div style={{display: 'flex'}}>
	<div style={{flex: 1, marginRight: '5rem'}}>
		<Notification status="alert" text="Alert message" /> <br /><br /><br />
	
		<Notification status="primary" text="Info message" /> <br /><br /><br />
	
		<Notification status="success" text="Success message" /> <br /><br /><br />
	
		<Notification status="danger" text="Error message" /> <br /><br /><br />
	
		<Notification status="default" text="Notification message" icon={<AlertIcon style={{color: '#ffb200'}} />} /> <br /><br /><br />
	</div>
	
	<div style={{flex: 1}}>
  	<Notification light status="alert" text="Alert message" /> <br /><br /><br />
  	
  	<Notification light status="primary" text="Info message" /> <br /><br /><br />
  	
  	<Notification light status="success" text="Success message" /> <br /><br /><br />
  	
  	<Notification light status="danger" text="Error message" /> <br /><br /><br />
  	
  	<Notification light status="default" text="Notification message" /> <br /><br /><br />
  </div>
</div>

lib/components/Modal/Modal.js

Modals:
(remember to call Modal.setAppElement)

Thank you!

Modal heading

Are you sure you want to perform this action?

Modal heading

Are you sure you want to perform this action?

Modal heading

Are you sure you want to perform this action?

import RaisedButton from '../Buttons/RaisedButton';
import AlertIcon from '../Icons/AlertIcon';
import TickIcon from '../Icons/TickIcon'
;<div className="grid" style={{backgroundColor: '#F4F5F7', padding: '3rem'}}>
	<div className="grid-cell-5">
		<Modal
  		inline
  		style={{minWidth: '100%', minHeight: '232px'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Take tour" status="primary" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Skip" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<TickIcon className="Success" />
  		<h1>Thank you!</h1>
  	</Modal>
	</div>
	
	<div className="grid-cell-1" />
	
	<div className="grid-cell-6">
		<Modal
  		inline
  		style={{minWidth: '100%'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Action" status="alert" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Cancel" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<h1 className="ModalHeading"><AlertIcon className="Alert" style={{fontSize: '1.5rem'}} /> Modal heading</h1>
  		<p className="ModalText">Are you sure you want to perform this action?</p>
  	</Modal>
	</div>
	
	<div className="grid-cell-6">
		<Modal
  		inline
  		style={{minWidth: '100%', minHeight: '192px'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Action" status="danger" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Cancel" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<h1 className="ModalHeading">Modal heading</h1>
  		<p className="ModalText">Are you sure you want to perform this action?</p>
  	</Modal>
	</div>
	
	<div className="grid-cell-6">
		<Modal
  		inline
  		style={{minWidth: '100%'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Add" status="danger" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Cancel" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<h1 className="ModalHeading">Modal heading</h1>
  		<p className="ModalText">Are you sure you want to perform this action?</p>
  	</Modal>
</div>
</div>

import RaisedButton from '../Buttons/RaisedButton';
import AlertIcon from '../Icons/AlertIcon';
import TickIcon from '../Icons/TickIcon'
;<div className="grid" style={{backgroundColor: '#F4F5F7', padding: '3rem'}}>
	<div className="grid-cell-5">
		<Modal
  		inline
  		style={{minWidth: '100%', minHeight: '232px'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Take tour" status="primary" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Skip" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<TickIcon className="Success" />
  		<h1>Thank you!</h1>
  	</Modal>
	</div>
	
	<div className="grid-cell-1" />
	
	<div className="grid-cell-6">
		<Modal
  		inline
  		style={{minWidth: '100%'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Action" status="alert" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Cancel" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<h1 className="ModalHeading"><AlertIcon className="Alert" style={{fontSize: '1.5rem'}} /> Modal heading</h1>
  		<p className="ModalText">Are you sure you want to perform this action?</p>
  	</Modal>
	</div>
	
	<div className="grid-cell-6">
		<Modal
  		inline
  		style={{minWidth: '100%', minHeight: '192px'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Action" status="danger" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Cancel" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<h1 className="ModalHeading">Modal heading</h1>
  		<p className="ModalText">Are you sure you want to perform this action?</p>
  	</Modal>
	</div>
	
	<div className="grid-cell-6">
		<Modal
  		inline
  		style={{minWidth: '100%'}}
  		buttons={
  		  <>
  		  <RaisedButton content="Add" status="danger" style={{padding: '.8rem 1rem'}} />
  		  <RaisedButton content="Cancel" hollow style={{padding: '.8rem 1rem'}} />
  		  </>
  		}
  	>
  		<h1 className="ModalHeading">Modal heading</h1>
  		<p className="ModalText">Are you sure you want to perform this action?</p>
  	</Modal>
</div>
</div>

Cards

BaseCard

lib/components/Cards/BaseCard/BaseCard.js

Tags:

Base card

Bigger z-index

<div className="Showcase" style={{background: '#FBFBFC', padding: '2rem'}}>
	<BaseCard>
		<h1>Base card</h1>
	</BaseCard>
	
	<BaseCard zIndex={4}>
  	<h1>Bigger z-index</h1>
	</BaseCard>
</div>

<div className="Showcase" style={{background: '#FBFBFC', padding: '2rem'}}>
	<BaseCard>
		<h1>Base card</h1>
	</BaseCard>
	
	<BaseCard zIndex={4}>
  	<h1>Bigger z-index</h1>
	</BaseCard>
</div>

Date

DatePicker

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.

<DatePicker />

<DatePicker />

DateSelector

lib/components/Date/DateSelector/DateSelector.js

Date selector:

<>
	<div>
		<DateSelector beginning="2016-11-11" />
	</div>
	<br/>
	<div>
		<DateSelector initialSelection="oneWeek" beginning="2016-11-11" />
	</div>
	<br/>
	<div>
  	<DateSelector beginning="2019-07-11" initialSelection="oneMonth" />
	</div>
	<br/>
	<div>
  	<DateSelector />
	</div>
</>

<>
	<div>
		<DateSelector beginning="2016-11-11" />
	</div>
	<br/>
	<div>
		<DateSelector initialSelection="oneWeek" beginning="2016-11-11" />
	</div>
	<br/>
	<div>
  	<DateSelector beginning="2019-07-11" initialSelection="oneMonth" />
	</div>
	<br/>
	<div>
  	<DateSelector />
	</div>
</>

DropdownSelector

lib/components/DropdownSelector/DropdownSelector.js

Dropdown:

import Menu from '../Form/Menu';
import MenuItem from '../Form/MenuItem'
;<DropdownSelector content={<span>Open me!</span>} forwardClose={false}>
	<Menu>
      <MenuItem>Option 1</MenuItem>
      <MenuItem>Option 2</MenuItem>
      <MenuItem>Option 3</MenuItem>
	</Menu>
</DropdownSelector>

import Menu from '../Form/Menu';
import MenuItem from '../Form/MenuItem'
;<DropdownSelector content={<span>Open me!</span>} forwardClose={false}>
	<Menu>
      <MenuItem>Option 1</MenuItem>
      <MenuItem>Option 2</MenuItem>
      <MenuItem>Option 3</MenuItem>
	</Menu>
</DropdownSelector>

Misc

LogoVerse

lib/components/LogoVerse/LogoVerse.js

Base Verse logo:

<LogoVerse />

<LogoVerse />

Static Verse logo:

<LogoVerse animated={false} />

<LogoVerse animated={false} />

Verse logo (loop):

<LogoVerse loop />

<LogoVerse loop />

Design System Components

BackgroundColorPalette

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)

<BackgroundColorPalette />

<BackgroundColorPalette />

ColorPalette

lib/components/DesignSystem/Colors/ColorPalette/ColorPalette.js

Complete color palette:

Blue

Green

Red

Orange

Purple

Teal

<ColorPalette />

<ColorPalette />

ColorSample

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

A circular color sample:

Teal

<ColorSample shape="circle" color="teal" label="Teal" />

<ColorSample shape="circle" color="teal" label="Teal" />

A rectangular color sample:

Teal(Usage: description)

<ColorSample shape="rectangle" color="teal" label="Teal" description="(Usage: description)" />

<ColorSample shape="rectangle" color="teal" label="Teal" description="(Usage: description)" />

PaletteVertical

lib/components/DesignSystem/Colors/PaletteVertical/PaletteVertical.js

A vertical palette:

Purple(Usage: Info Text)
Green(Usage: Success Text)
Red(Usage: Error Text)

import ColorSample from '../ColorSample'
;<PaletteVertical>
	<ColorSample shape="rectangle" color="purple" label="Purple" description="(Usage: Info Text)" />
	<ColorSample shape="rectangle" color="green" label="Green" description="(Usage: Success Text)" />
	<ColorSample shape="rectangle" color="red" label="Red" description="(Usage: Error Text)" />
</PaletteVertical>

import ColorSample from '../ColorSample'
;<PaletteVertical>
	<ColorSample shape="rectangle" color="purple" label="Purple" description="(Usage: Info Text)" />
	<ColorSample shape="rectangle" color="green" label="Green" description="(Usage: Success Text)" />
	<ColorSample shape="rectangle" color="red" label="Red" description="(Usage: Error Text)" />
</PaletteVertical>

TextColorPalette

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)

<TextColorPalette />

<TextColorPalette />

FontInspector

lib/components/DesignSystem/FontInspector/FontInspector.js

A font inspector:

Light
Regular
Semibold
Bold

<FontInspector text="Aa" styles={['Light', 'Regular', 'Semibold', 'Bold']} defaultStyle="regular" />

<FontInspector text="Aa" styles={['Light', 'Regular', 'Semibold', 'Bold']} defaultStyle="regular" />