.

Avatar

avatar-icon
.

Alert

This is Primary Alert
This is Secondary Alert
This is Error Alert
This is Warning Alert
This is Success Alert
.

Badge

Badge on Avatar

Badge on Icon

2
Note: adjust width & height of badge container, default is 2.5 rem
.

Button

Primary / Secondary / Tertiary Button

Link Button

Icon Button

Note: default height/width of icon button is 2.5 rem

Button with icon

Floating Action Button

Note: Actual floating button is of Fixed position with 5 rem distance from bottom & right. Just for demonstartion purpose it's shown with normal layout here instead of as actual floating button.
.

Card

Card with badge

New

This is Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid ab temporibus nisi suscipit vero voluptas harum laboriosam quo dignissimos modi, ea ipsam tempora nulla fuga, earum nemo assumenda quidem.
Note: badge is positioned absolute with distance of 7px from top & 8px from left.

Card with dismiss

X

This is Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid ab temporibus nisi suscipit vero voluptas harum laboriosam quo dignissimos modi, ea ipsam tempora nulla fuga, earum nemo assumenda quidem.
Note: dismiss cross icon is positioned absolute with distance of 0 from top & right.

Card with text overlay

This is text overlay

This is Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid ab temporibus nisi suscipit vero voluptas harum laboriosam quo dignissimos modi, ea ipsam tempora nulla fuga, earum nemo assumenda quidem.
Note: overlay text is positioned absolute with distance of 25% from top & 10% from right.

Text only card

This is Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid ab temporibus nisi suscipit vero voluptas harum laboriosam quo dignissimos modi, ea ipsam tempora nulla fuga, earum nemo assumenda quidem.

Horizontal cards

New
X

This is Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum amet voluptates natus aliquam ducimus at officia quia in ab veropa, possimus fugit

Cards with Shadow

New
X

This is Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid ab temporibus nisi suscipit vero voluptas harum laboriosam quo dignissimos modi, ea ipsam tempora nulla fuga, earum nemo assumenda quidem.
.

Image

Responsive Image

Note: Image will scale to it's parent size. Here parent is given 20 rem with just to show it's responsiveness.

Round Image

Note: Round images will work perfect if image dimension is 1:1
.

Input

Textbox with effect-1 & email validation

Textbox with effect-2 & password validation

.

List

Normal Spaced Inline List

  • Item 1
  • Item 2
  • Item 3

Normal Space List

  • Item 1
  • Item 2
  • Item 3

Stacked List

  • You have new notification
  • Someone mentioned you in their story
  • You have been tagged
  • Someone commented on your post
  • XYZ is live
.

Simplified Grid

2 items grid

Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum voluptatem magnam excepturi error voluptate quam quia totam. Vel dolorem reprehenderit omnis ratione laboriosam, magnam voluptatum. Adipisci ab doloribus obcaecati eligendi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates quisquam soluta, aspernatur rem inventore nesciunt, odio dolor reiciendis blanditiis earum accusamus ad eos et modi maiores nam. Itaque, facilis similique.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum voluptatem magnam excepturi error voluptate quam quia totam. Vel dolorem reprehenderit omnis ratione laboriosam, magnam voluptatum. Adipisci ab doloribus obcaecati eligendi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates quisquam soluta, aspernatur rem inventore nesciunt, odio dolor reiciendis blanditiis earum accusamus ad eos et modi maiores nam. Itaque, facilis similique.

3 items grid layout

This is Heading

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae deleniti aliquid blanditiis voluptate eius esse dolorum et repellat. Adipisci inventore saepe facere deserunt sint accusamus nobis molestiae nulla voluptate ullam! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure illo numquam enim quae architecto aspernatur atque? Ad vero corrupti, consequatur sint maxime praesentium quae suscipit, exercitationem, eius sapiente id omnis.
.

Typography

Headings

Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six

Texts

text-left: This is Sample Text.
text-center This is Sample Text.
text-right: This is Sample Text.
text-justify: This is Sample Text.
text-lowercase: This is Sample Text.
text-uppercase: This is Sample Text.
text-capitalize: This is Sample Text.
text-normal: This is Sample Text.
text-bold: This is Sample Text.
text-italic: This is Sample Text.
text-muted: This is Sample Text.
text-large: This is Sample Text.
text-small: This is Sample Text.
text-tiny: This is Sample Text.
text-color-primary: This is primary Text.

Link

primary link primary link active secondary link active

container

Fluid container

This is fluid container & it will go till the end of page
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, deserunt? Quasi facere nam sit vero aliquam provident aut sequi delectus quas itaque repudiandae velit placeat, quisquam eius iure tempora a!

Center container

This is center container & it will go till specified width
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, deserunt? Quasi facere nam sit vero aliquam provident aut sequi delectus quas itaque repudiandae velit placeat, quisquam eius iure tempora a!
.

Toast

This is Primary Toast
This is Secondary Toast
This is Error Alert
This is Warning Toast
This is Success Toast