Avatars

Basic text writing, including headings, body text, lists, and more.

@image avatars

@letter avatars

A
B
OP

@icon avatars

@size avatars

Alerts

Convey meaning through color with a handful of color utility classes.

@error alert

This is an error alert — check it out!

@warning alert

This is an warning alert — check it out!

@info alert

This is an info alert — check it out!

@success alert

This is an success alert — check it out!

Badges

Convey meaning through color with a handful of color utility classes.

@Badge on Avatars

@Badge on Icons

10
8+
20

Buttons

Convey meaning through color with a handful of color utility classes.

primary button

secondary button

tertiary button

@Links

primary link

Primary Link

secondary link

Secondary Link

tertiary link

Tertiary Link

@Icon with Text Button

@primary button

@secondary button

@tertiary button

@Floating Action Button

primary button

secondary button

tertiary button

Cards

Convey meaning through color with a handful of color utility classes.

@Cards with badges

NEW

Women Jumpsuit

Women Rust Orange Solid Basic Linen Jumpsuit

Rs. 2341

Simon Carter London

Men Off-White & Orange Slim Fit Shirt

Rs. 2341

@Cards with dismiss

Card Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita maxime iste atque esse illo voluptas aperiam assumenda aliquid excepturi harum.

@Cards with text overlay

Card Title

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum, illo! Lorem ipsum dolor sit amet consectetur, adipisicing. Laudantium.

@Text only cards

Card Title

Card Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illo dolores voluptatum molestiae voluptate suscipit debitis nam qui beatae tenetur.

@Horizontal Cards

Solid Sweatshirt with Velvet Finish

Size: 8 UK

2

Rs. 800

Solid Sweatshirt with Velvet Finish

Size: 8 UK

2

Rs. 800

Images

Convey meaning through color with a handful of color utility classes.

@Responsive Images

@Round Image

Input

Convey meaning through color with a handful of color utility classes.

@input text

Your Name

@input text error

Your Name

@input text warning

Your Name

@textarea

Please enter a description

Lists

Convey meaning through color with a handful of color utility classes.

--- Simple List

  • First Item
  • Second Item
  • Third Item
  • Fourth Item

--- Stacked List

  • This is a list heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

  • This is a list heading 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

  • This is a list heading 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

  • This is a list heading 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

--- Stacked List with Icon

  • This is a list heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

  • This is a list heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

  • This is a list heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

  • This is a list heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

    This is a small text

Ratings

Convey meaning through color with a handful of color utility classes.

--- Star Ratings

--- Badge Ratings

4.5

Simplified Grid

Convey meaning through color with a handful of color utility classes.

--- 2x2 Responsive Grid

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

--- 3x3 Responsive Grid

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Toast

Convey meaning through color with a handful of color utility classes.

@Simple Toast

This is a message

@Toast with Title

What a Great Idea!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis expedita esse nihil quia quis fugit rerum similique beatae? Placeat, rem!