Installation

CSS

Copy-paste the stylesheet link into head section of your web page before all other stylesheets to load our CSS & FontAwsome icons, in the same order

JS

paste it at end of your body to add some javascript functionality

AVATAR

CODE

ALERTS

CODE

BADGES

Badges

Primary Success Warning Danger

CODE

Badges Pills

Primary Success Warning Danger

CODE

Badge on Avatar

CODE

Badge on Icons

BUTTON

Primary Buttons

Primary Success Warning Danger

CODE

Secondary Buttons

Primary Success Warning Danger

CODE

LINKS

Primary Link

Primary Link

CODE

Secondary Link

Secondary Link

CODE

ICONS

Icon Button

Home

CODE

Only Icon Button

CODE

FLOATING ACTION BUTTON

CARDS

Simple Card

CODE

Card with Badge

CODE

Card with Dismiss

CODE

Text Cards

CODE

Horizontal Cards

CODE

Card with Shadow

CODE

IMAGES

Responsive Image

CODE

Round Image

CODE

INPUTS

STANDARD INPUT

CODE

ERROR INPUT

CODE

LISTS

Stacked List

• Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error accusamus, harum pariatur temporibus fuga repudiandae perspiciatis nobis suscipit. Eum non esse voluptatem excepturi dolore cupiditate et delectus enim beatae facilis.
• Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, nisi? Cumque aliquid nobis ea eum. Perferendis labore, voluptate vel laudantium quas odio, dolores neque quisquam ducimus officiis est, fuga ea!
• Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus qui dolore esse itaque excepturi minima debitis iusto reprehenderit ipsam recusandae dolores inventore repellendus, voluptate iure nesciunt fugiat. Cupiditate, sed autem.
• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum quidem quae, eveniet eius corrupti culpa iure et consequatur esse vitae neque, velit voluptatibus quo quia a reiciendis, beatae error. Apple

CODE

Spaced List

• Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error accusamus, harum pariatur temporibus fuga repudiandae perspiciatis nobis suscipit. Eum non esse voluptatem excepturi dolore cupiditate et delectus enim beatae facilis
• Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, nisi? Cumque aliquid nobis ea eum. Perferendis labore, voluptate vel laudantium quas odio, dolores neque quisquam ducimus officiis est, fuga ea!
• Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus qui dolore esse itaque excepturi minima debitis iusto reprehenderit ipsam recusandae dolores inventore repellendus, voluptate iure nesciunt fugiat. Cupiditate, sed autem.
• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum quidem quae, eveniet eius corrupti culpa iure et consequatur esse vitae neque, velit voluptatibus quo quia a reiciendis, beatae error. Apple

CODE

MODAL

Open Modal

CODE

GRID

CODE

TEXT UTILITIES

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque iure magnam facilis quae numquam, mollitia voluptatum dolor nihil eos commodi quod voluptates facere quam, provident eveniet quisquam culpa aspernatur delectus.

this is a muted text

this is cenntered text

this is small text

CODE

SNACKBAR

Open Snackbar Open secondary Snackbar

CODE