Fork me on GitHub

Brand colors

Primary

#19b4fa

Semi Dark Primary

#05a8e6

Dark Primary

#0496cc

Light Primary

#bae8fd

Extra Light Primary

#e8f7fe

Thin Primary

#f3fbff

Grey

#d8d8d8

Semi Dark Grey

#b8b8b8

Dark grey

#222

Semi Light Grey

#eee

Light Grey

#f6f6f6

Extra Light Grey

#fbfbfb

White

#fff

Red

#ff0046

Semi Dark Red

#f00037

Dark Red

#e10028

Semi Light Red

#ffb2c7

Light Red

#ffe5ec

Extra Light Red

#fff2f6

Green

#61d079

Semi Dark Green

#43b25b

Dark Green

#25943d

Semi Light Green

#cff0d6

Light Green

#effaf1

Extra Light Green

#f7fcf8

Red Light MDC

#ffebe0

Red MDC

#ff0000

Blue Light MDC

#caf4fe


Grid system

Grid

12 columns

grid in grid

2, 4 and 6 columns starting from small

6 and 4 columns with offset starting from large


Vertical grid

5 elements with a fluid element in the middle


Slide grid

Side grid with right aside

Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.

Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati.

Side grid with left aside

Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris.

Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere.


Row

row

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit.

padded row

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit.

centered row

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit.

light row

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit.

dark row

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit.

row with light bottom border

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit.


Single column

Single column

Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.


Lego grid

Lego grid

Lego grid with 12 items


Typography

Title

Title 1

Lorem ipsum dolor sit amet…

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Title 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Title 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Title with italic typo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor


Paragraph

Paragraph 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.

Paragraph 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.

Paragraph 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.

Paragraph 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.

Paragraph with link

Paragraph with italic typo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.


Text

Text with normal line-height

Lorem ipsum…

Text with underline decoration

Lorem ipsum…

Text with italic style

Lorem ipsum…

Text with uppercase transformation

Lorem ipsum…

Text with different weights

Lorem ipsum…
Lorem ipsum…
Lorem ipsum…

Text with color option

Lorem ipsum…
Lorem ipsum…
Lorem ipsum…

Text with different sizes

Lorem ipsum…
Lorem ipsum…
Lorem ipsum…
Lorem ipsum…
Lorem ipsum…
Lorem ipsum…

Buttons

Button

Tiny

Normal

Big

Hydrogen

Helium

Lithium

Beryllium

Carbon

Azote

Oxygen

Disabled


Icon button

Nano

Micro

Tiny

Normal

Big

Hydrogen

Helium

Lithium

Beryllium

Carbon

Azote

Oxygen

Disabled

Social


Icon button with words

Tiny

Tiny with icon on the right

Normal

Big

Hydrogen

Helium

Lithium

Beryllium

Carbon

Azote

Oxygen

Disabled


Social icon button with words

Social


Image button

Tiny

Normal

Big

With <a /> tag

Lorem Ipsum…

With <span /> tag

Lorem Ipsum…

With border


Image button with text

On the right

On the left

On the top

On the bottom


Tag button

Tiny

Normal

With large word

Big

Selected

Payment buttons


Button with badge

On top right of tiny image button

On top left

On top right

On bottom right

On bottom left

On top right

On top right


Filter

Filter

Filter icon

Filter with animation

Filter icon

Filter button

Filter button disabled


Icons

Icons

Facebook

Facebook

Linkedin

LinkedIn

Twitter

Twitter

Cb

CB

MasterCard

MasterCard

Visa

Visa

Arrow

Arrow

Check

Checked

Clock

Clock

Lock

Lock

Grabber

Grabber

Heart

Heart

Cross

Cross

Menu

Location

Location

QuestionMark

Question mark

TypologyTag

Typology tag

InstrumentTag

Instrument tag

Search

Search

Link box

Document

Form elements

Checkbox

With label

Error

Disabled

With container


Radio button

With label

With big label

Error

Containers

Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa.
Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius.
Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius.

Text input

Tiny

Normal

Text area

Valid

Error

Disabled


Text input with button

Tiny

Normal

Valid

Error

Disabled


Text input with limit

Tiny

80

Input

80

Disabled input

80

Textarea

128

Disabled textarea

128

Text input with unit

Tiny

Normal

Valid

$

Error

£

Disabled

Tiny with small input

days

With small input

days

Location input

Location input

Location

Password input

Tiny

Show password

Normal

Show password

Select

Tiny

Select...

Normal

Français

Error

Select...

With sub-levels

Select…

With label

Select...

With searchable

Select...

Switch

Normal

Big label

Disabled

Disabled big label


Slider

Normal

With animation

Disabled


Search input

Search input


Form info

Normal

Text input error

Cum sociis natoque penatibus et magnis

Radio button error

lorem ipsum dolor

Cum sociis natoque penatibus et magnis

Checkbox error

Cum sociis natoque penatibus et magnis


Form amount and currency

Tiny

USD

Normal

USD

Valid

USD

Error

USD

Disabled

USD

Form phone number

Tiny

+44

Normal

+33

Image cropper

Taille max : 5 Mo au format JPEG, PNG ou GIF. Les dimensions recommandées sont 620x376 px.


Image with caption

Image with caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Horizontal nav

Horizontal Nav

Horizontal Nav touch

Horizontal Nav touch with notification


Tab bar

Tab bar

Tab bar with 4 items


User menu

User menu dropdown


Plateform switch

Platform switch dropdown (positioned with parent)


Header

Header

Toggle fixed version

Header with search input

Toggle fixed version

Header when logged

Toggle fixed version

Header with titles

Toggle fixed version


Stepper

Beginning

In progress

Draft

Aligned to start


Pagination

Pagination


Notification

Alert

Default

With many text, link and button

Error

Success


Badge

With one number

4

With two numbers

42

With more numbers

4242


Icon badge

With one character

C

With two characters

A+

With svg

Checked


Modal

Modal

Modal with external trigger


Tour

Header tour (1 on 2)

Header tour (2 on 2)


Crowdfunding

Progress

Normal

With custom color

With animation


Loan simulator

Normal

$
Slide to choose
Grabber

With commission

$
150 $/month
during 17 months
Grabber
Fees: 100 $

With fees exemptions

$
150 $/month
during 17 months
Grabber
Fees: 0 $ (instead of 100 $)

With error

$

Amount cannot be empty

Grabber
Duration is required

Teaser

With image on the left

Cute kitten

Parva feles

A partu solet feline kittens binarii ad quinarium est.

With image on the right

Lactis

Lacte matris kittens sit amet, nutritionem et augmentum proprium.

Cute kitten

Popover

Normal

Call To Action Popover

Call To Action with illustration Popover


Presentation elements

Card

With micro radius

With tiny radius

With normal radius

With micro radius and border

With tiny radius and border

With normal radius and border


Simple card

Simple card

Title

Subtitle

Simple card without horizontal stroke

Title

Clickable simple card


Project card

Project card

Name
Location

Title

A
  • Typology tagTag 1
  • Tag 2

  • Instrument tagTag 3
  • Tag 4

42 %

Project card with reversed infos

Name
Location

Title

A

42 %

xx
Info 1
xx
Info 2
xx
Info 3

Clickable project card

Project card with status

Name
Location

Title

42 %

xx
Info 1
xx
Info 2
xx
Info 3
Status

Project card without progress

Name
Location

Title

xx
Info 1
xx
Info 2
xx
Info 3

Disabled project card

Name
Location

Title

42 %

xx
Info 1
xx
Info 2
xx
Info 3

Only paragraph project card


Article card

Article card

Clickable article card


Crowdfunding card

Crowdfunding card

Owner title
Owner description

Lorem ipsum…

Sed ut perspiciatis unde omnis iste natus error Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum…
Lorem ipsum…
Lorem ipsum…
42 %
Lorem ipsum…

Clickable crowdfunding card

Loading crowdfunding card


Reward card

Reward card

For 00€

Lorem ipsumn, consectetuer adipiscing elit.

In enim justo.

Contributors35
DeliveryJanuary 2018

Disabled Reward card

For 00€

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Contributors35
DeliveryJanuary 2018
Availability200
You contributed to this project
Manage my contribution

Completed Reward card

For 00€

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Contributors35
DeliveryJanuary 2018
Availability200
Checked
You contributed to this project
Manage my contribution

Without Image Reward card

For 00€

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Contributors35
DeliveryJanuary 2018
Availability200
Checked
You contributed to this project
Manage my contribution

Without Image Reward card

For 00€

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Contributors35
DeliveryJanuary 2018
Availability200
Checked
You contributed to this project
Manage my contribution

Small Image Reward card

For 00€

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Contributors35
DeliveryJanuary 2018
Availability200
Checked
You contributed to this project
Manage my contribution

Project similar card

Project similar card with image

Project similar card with tags and infos

Project similar card with loader

Refresh
1/5


Hero

Hero left

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu enim justo, rhoncus ut.

Hero right

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu enim justo, rhoncus ut.

Hero with small text

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.


Press quotes

Press quotes

Inscriptio huius sepulchri

“Dis Manibus Calpurnia Felicla Germulio coniugi”
“Musio appellatus, quod muribus infestus sit.”
“fulgore luminis noctis tenebras superet.”

Testimony

Normal

De Finibus Bonorum et Malorum

Cute kitten
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

Testimony list

With list

Sed ut perspiciatis

Cute kitten
“At vero eos et accusamus et iusto odio dignissimos.”

Itaque earum rerum hic tenetur

Cute kitten
“Maturus est et potest procreare”

Excepteur sint

Cute kitten
"Nam libero"

Etrusci feles cognoverunt

Cute kitten
“Inter tales libros modo historia Alberti recognovit.”

Title with actions

Title with two buttons

Feles sunt socialis animalibus

Action 1 title

Action 2 title


List of links

List of links with a selected item

List of links with dark


Bullet list

Default

  • Dis Manibus
  • Calpurnia Felicla
  • Germulio coniugi

Large items

  • Dis Manibus
  • Calpurnia Felicla
  • Germulio coniugi

Big items

  • Dis Manibus
  • Calpurnia Felicla
  • Germulio coniugi

Tag list

Tag list

  • Typology tagTag 1
  • Tag 2
  • Tag 3
  • Typology tagTag 1
  • Tag 2
  • Tag 3
  • Instrument tagTag 4
  • Tag 5
  • Tag 6

Info lines

Info lines

Lorem
Ipsum
Dolor
Sit amet

Info lines without top and bottom border

Lorem
Ipsum
Dolor
Sit amet

Info lines with custom border color

Lorem
Ipsum
Dolor
Sit amet

Info lines without responsive version

Lorem
Ipsum
Dolor
Sit amet

Info lines with left and right border

Lorem
Ipsum
Dolor
Sit amet

Info lines with border radius

Lorem
Ipsum
Dolor
Sit amet

Contextual elements

Loader

Loader

Loader in Button component

Loader with top paragraph

Loading

Loader with right paragraph

Loading

Loader with bottom paragraph

Loading

Loader with left paragraph

Loading


Contextual content

Information box

Information box

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Link box


Link box with doc icon


Static tooltip

With button

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor, enean massa. Cum sociis natoque penatibus et magnis dis parturien.

Tooltip

Tooltip Icon

Tooltip top

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Tooltip right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Tooltip bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Tooltip left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

New Tooltip Icon


Project creator card

Project creator card

Clock17 August 2017
New

Post emensos insuperabilis expeditionis eventus.

Project creator card with link

Clock17 August 2017
Success

Post emensos insuperabilis expeditionis eventus.


Lorem Ipsum

Layout

Line

With tooltip

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

With Big icon

Lorem ipsum dolor sit amet.

Form actions

Form actions

Form actions without spread out at


Form row

Form row


Horizontal stroke

Default

Tiny

Big

Huge

With content

Lorem

Vertical stroke

Default

Tiny

Big

Huge


Separator

Normal


Darker



Carousel with ProjectCard

Zero

One

Name
Location

A

Two

Name
Location

A

Name
Location

B

Three

Name
Location

A

Name
Location

B

Name
Location

C

Four

Name
Location

A

Name
Location

B

Name
Location

C

Name
Location

D

Five

Name
Location

A

Name
Location

B

Name
Location

C

Name
Location

D

Name
Location

E