Buttons

Basic buttons

Additional buttons

Outline buttons

Rounded buttons

Primary Default Secondary Success Info Warning Danger

Rounded outline buttons

Primary Default Secondary Success Info Warning Danger

Large and small buttons

Checkbox and Radio buttons

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

Radio 1 (preselected) Radio 2 Radio 3

Social buttons

Full name social buttons

Simple social buttons

Floating social buttons

Social counters

Facebook 22 Twitter 22 Google+ 22 Linkedin 22 Instagram 22 Pinterest 22 Youtube 22 Dribbble 22 Vkontakte 22 Github 22 Comments 22 Emails 22

Social Icons

Cards

Cascading cards

Alice Mayer

Photographer

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Business

Let your startup grow!

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Billy Cullen

Web developer

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

Classic cards

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

05/10/2015
12
21
5

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Rotating cards

Maria Kate

Photographer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?

Click here to rotate back

Anna Deynah

Web Designer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?

Click here to rotate back

Sarah Melyah

Front-end Developer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?

Click here to rotate back

Cards with animations

Click on the button to launch the animation.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Social shares

Join our community

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Social shares

Join our community

IMAGE OVERLAYS

Business

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quod minima assumenda qui mollitia architecto soluta at ipsa itaque nam, aliquam minus odit expedita voluptatibus fugiat amet, nostrum error dolorum!.

View project

Marketing

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

Software

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

E-commerce

Product cards

Shoes

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$ 199$

Quick look and Cart Modals

Cart Modal 4

#	Product name	Price
1	Product 1	100$
2	Product 2	100$
3	Product 3	100$
4	Product 4	100$
5	Total	400$

Shopping Cart table

Product	Color	Size	Price	QTY	Amount
Sportswear by FifeSteps	Blue	38	200 $	1 — +	200 $
Striped sweater by FifeSteps	Blue	L	200 $	3 — +	600 $
Elegant tie by FifeSteps	Blue	M	200 $	2 — +	400 $
		Total	1200 $

Date and Time Pickers

Date Picker

Try me...

Time Pickers

Light version, 12hours

Dark version, 24 hours

Dropdown and Select

Dropdown

Material Selects

Basic example

Multiple select

Options groups

Select with icons

Disabled select

Disabled option

Color variations

Blue select

Red select

Teal select

Purple select

Green select

Light blue select

Orange select

Blue grey select

Dark select

LightBox

Inputs

Input fields

Example label

Disabled

Example label

Error or Success Messages

Type your email

Type your password

Textarea

Basic textarea

Icon Prefix

Checkboxed and Radio

Classic checkbox

Filled-in checkbox

Option 1

Option 2

Option 3

Off On

File input

Range

Character counters

Input text

Textarea

Carousels

Classic carousel

Classic carousel with captions

Multi-item carousel

Thumbnails carousel

Video Carousel

SideNav

On mobile

SideNav variations

Click on the images below to see live preview

Live preview

Blog components

About author

Michal Szymanski

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint esse nulla quia quam veniam commodi dicta, iusto inventore. Voluptatum pariatur eveniet ea, officiis vitae praesentium beatae quas libero, esse facere.

Comments 3

John Doe

05/10/2015

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 proident.

Marta Tev

08/10/2015

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.

Anna Maria

17/10/2015

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia.

Alerts (click buttons below)

Info message Warning message Success message Error message

Animations

Over 70 CSS animations

Bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Charts

Simple, clean and interactive charts

Classic charts

Minimalist charts

Sales

ROI

Conversion

Hover effects

Overlay effect

Light overlay

Strong overlay

Super light overlay

Zoom effect

Shadow effect

Masks

Patterns

no mask

.pattern-1

.pattern-2

.pattern-3

.pattern-4

.pattern-5

.pattern-8

.pattern-6

.pattern-7

.pattern-9

Overlays

no overlay

light overlay

strong overlay

Modals

Click the buttons:

Navbars

Breadcrumbs

Progress bars

Basic example

0% 25% 50% 75% 100%

Contextual alternatives

25% 50% 75% 100%

Infinite loading

Circles

Tabs & Pills

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Miscellaneous

Paginations

Previous
1
2
3
4
5
Next

Previous
1
2
3
4
5
Next

Previous
1
2
3
4
5
Next

Previous
1
2
3
4
5
Next

Previous
1
2
3
4
5
Next

Previous
1
2
3
4
5
Next

Previous
1
2
3
4
5
Next

Previous
1
2
3
4
5
Next

Example heading New

Accordion

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Tooltips (hover buttons below)

Popovers (click buttons below)

...and many more

Sections

Live preview

Templates

Live preview

Buttons

Basic buttons

Additional buttons

Outline buttons

Rounded buttons

Rounded outline buttons

Large and small buttons

Checkbox and Radio buttons

Social buttons

Full name social buttons

Simple social buttons

Floating social buttons

Social counters

Social Icons

Cards

Cascading cards

Alice Mayer

Photographer

Business

Let your startup grow!

Billy Cullen

Web developer

Classic cards

Card title

Card title

Read more

Card title

Read more

Rotating cards

Maria Kate

About me

Anna Deynah

About me

Sarah Melyah

About me

Cards with animations

Card title

Card title

Read more

Social shares

Join our community

Card title

Read more

Social shares

Join our community

IMAGE OVERLAYS

Business

Project title

Marketing

Project title

Software

Project title

E-commerce

Product cards

Shoes

Product name

Category

Product name

Category

Product name

Quick look and Cart Modals

Shopping Cart table

Sportswear

Striped sweater

Elegant tie

Total

1200 $

Date and Time Pickers

Date Picker

Time Pickers

Dropdown and Select

Dropdown

Material Selects

Color variations

LightBox

Inputs

Input fields

Error or Success Messages

Textarea

Checkboxed and Radio

Sign up with:

or: