Avatar

Letter Avatar

Avatar Containing simple letters. Real world expalmple - used in Zoom when there is no profile pic. Below is the example of Letter Avatar.
Note: You can also add image.

LKM

< div > class="avatar small"> L < /div >
< div > class="avatar small"> ML < /div >
< div > class="avatar small"> LKM < /div >

Icon Avatar

Avatar will contain icons inside it. Common example can be of folder inside avatar or apps inside avatar.

< div class="avatar medium" >
< img class="img-icon" src="images/folder.png" />
< /div >

Different Size Avatar

Avatar can be of differen sizes. Small, Medium, Large. These Different size avatar can be used in creating profile pics, zoom icons, etc. Let's see Avatar of different size below

< div class="avatar extra-small" > < /div >
< div class="avatar small" > < /div >
< div class="avatar medium" > < /div >
< div class="avatar large" > < /div >

Grouped Avatar

Grouped Avatar's are mainly letter avatars and used when there is a need to display icon for more than one person. Below is the example which will make things more clear.

< ul class="container-group" >
< li class="group-item" >
< p class="avatar small color-blue" > L < /p >
< /li >
< /ul >

< ul class="container-group" >
< li class="group-item" >
< p class="avatar small color-blue" > K < /p >
< /li >
< /ul >

< ul class="container-group" >
< li class="group-item" >
< p class="avatar small color-blue" > M < /p >
< /li >
< /ul >

< ul class="container-group" >
< li class="group-item" >
< p class="avatar small color-blue" > M < /p >
< /li >
< /ul >

Badge Avatar

Badge Avatar are mainly used when we want to show something about avatar. Example: whether a user is online or not. In short the status of a person

< div class="avatar medium >
< span class="status-online" > </span>
< /div >

< div class="avatar medium >
< span class="status-busy" > </span>
< /div >

Alert

Simple Alert

An Alert displays short important messages that attracts user's interaction.

This is Information message

This is Success message

This is Warning message

This is Error message

< div class="alert info" >
< img class="alert-icon" src="images/information.png" alt="error" />
< div class="alert-text" > This is Information message < /div >
< /div >

< div class="alert success" >
< img class="alert-icon" src="images/success.png" alt="success" />
< div class="alert-text" > This is Success message < /div >
< /div >

< div class="alert warning" >
< img class="alert-icon" src="images/warning.png" alt="warning" />
< div class="alert-text" > This is Warning message < /div >
< /div >

< div class="alert error" >
< img class="alert-icon" src="images/error.png" alt="error" />
< div class="alert-text" > This is Error message < /div >
< /div >

Alert With Action

User can perform some action on this alert. like user can close the alert.

This is Information message

This is Success message

This is Warning message

This is Error message

< div class="alert info" >
< img class="alert-icon" src="images/information.png" alt="error" />
< div class="alert-text" > This is Information message < /div >
< button class="icon-close" onclick=""> X < /button >
< /div >

< div class="alert success" >
< img class="alert-icon" src="images/success.png" alt="success" />
< div class="alert-text" > This is Success message < /div >
< button class="icon-close" onclick=""> X < /button >
< /div >

< div class="alert warning" >
< img class="alert-icon" src="images/warning.png" alt="warning" />
< div class="alert-text" > This is Warning message < /div >
< button class="icon-close" onclick=""> X < /button >
< /div >

< div class="alert error" >
< img class="alert-icon" src="images/error.png" alt="error" />
< div class="alert-text" > This is Error message < /div >
< button class="icon-close" onclick=""> X < /button >
< /div >

Alert with ouline that depicts the status

The Outline of the Alert box depicts whether a message is success, error, information or waning.

This is Information message

This is Success message

This is Warning message

This is Error message

< div class="alert info-outline" >
< img class="alert-icon" src="images/information.png" alt="error" />
< div class="alert-text" > This is Information message < /div >
< /div >

< div class="alert success-outline" >
< img class="alert-icon" src="images/success.png" alt="success" />
< div class="alert-text" > This is Success message < /div >
< /div >

< div class="alert warning-outline" >
< img class="alert-icon" src="images/warning.png" alt="warning" />
< div class="alert-text" > This is Warning message < /div >
< /div >

< div class="alert error-outline" >
< img class="alert-icon" src="images/error.png" alt="error" />
< div class="alert-text" > This is Error message < /div >
< /div >

Icons

Different icon sizes

You can re-size the icon based on requirement.

< img src="images/save.png" alt="save" class="extra-small" />
< img src="images/save.png" alt="save" class="small" />
< img src="images/save.png" alt="save" class="medium" />
< img src="images/save.png" alt="save" class="large" />

Icon with badge

You can add badge to the icon.

< div class="position-relative" >
< img src="images/notification.png" alt="" class="extra-small"/ >
< div class="icon-badge-position" > 5 < /div >

< div class="position-relative" >
< img src="images/wishlist.png" alt="" class="extra-small"/ >
< div class="icon-badge-position" > 3 < /div >

< div class="position-relative" >
< img src="images/cart.png" alt="" class="extra-small"/ >
< div class="icon-badge-position" > 2 < /div >

Buttons

Different Types of Button

Different types of Button are Primary, Secondary, Linked, Outlined, Disabled.

< button class="btn-primary" > Primary Button < / button >
< button class="btn-secondary" > Secondary Button < / button >
< button class="btn-linked" > Link Button < / button >
< button class="btn-outlined" > Outlined Button < / button >
< button class="btn-disabled" > Disabled Button < / button >

Button with icons

Buttons with icons depicts what is the actual functionality of button just by looking at icon.

< button class="btn-secondary flex-row" >
< img src="images/save.png" alt="save" class="extra-small" />
< div > Save < /div >
< /button >

< button class="btn-secondary flex-row" >
< img src="images/delete.png" alt="delete" class="extra-small" />
< div > Delete < /div >
< /button >

Button with different sizes

Button can be of different size depending upon the requirements.

< button class="btn-small" > Small < /button >
< button class="btn-medium" > Medium < /button >
< button class="btn-large" > Large < /button >

Floating Button

Floating button is like an action and and can be used for multiple purpose based on action that should be performed when user clicks on button.

< a href="#id-avatar" class="float" >
< img src="images/up-arrow.png" alt="up-arrow" class="small" / >
< /a >

Image

Responsive Image

Image should be responsive to support different devices.

< img class="img-responsive medium" src="images/avatar.png" alt="avatar"/ >
< img class="img-responsive large" src="images/avatar.png" alt="avatar"/ >

Round Image

Round Image are mainly used in Profile pic.

< img class="img-round medium" src="images/avatar.png" alt="avatar" / >
< img class="img-round large" src="images/avatar.png" alt="avatar" / >

Input box

Form Input box is used at many place there are different types of Input box. Which can be used to capture user provided data.

< input type="text" value="" class="input-noborder" placeholder="Name" / >
< input type="text" value="" class="input-outlined" placeholder="Name" / >
< input type="text" value="" class="input-filled" placeholder="Name" / >

Different Input attributes

There are different input attributes that is widely used to indicate the type of Input box.

< input type="text" value="" class="input-noborder" required placeholder="Required" / >

< input type="text" value="Diabled" class="input-outlined" disabled placeholder="Name" / >

< input type="text" value="Read Only" readonly class="input-filled" placeholder="Name" / >

< input type="password" value="" class="input-outlined" placeholder="Password" / >

< input type="search" value="" class="input-outlined" placeholder="search" / >

Input Validation

Input validation is important and must be visible/ should notify user when they enter anything invalid. Below example highlights the border and tells the user that it is mandatory field.

*Name is mandatory*

< div class="flex-column" >
< input type="text" value="" class="input-noborder-error" placeholder="Name" / >
< span class="validation" > *Name is mandatory* < /span >
< /div >

< div class="flex-column" >
< input type="text" value="" class="input-outlined-error" placeholder="Name" / >
< span class="validation" > *Name is mandatory* < /span >
< /div >

< div class="flex-column" >
< input type="text" value="" class="input-filled-error" placeholder="Name" / >
< span class="validation" > *Name is mandatory* < /span >
< /div >

List

Simple List

List are continuous group of text or images. Below is the simple example of unordered list without bullet points.

Fruits List:

Apple
Mango
Grapes
Papaya

Fruits List Inline:

Apple
Mango
Grapes
Papaya

< ul class="list" > < strong > Fruits List: </strong>
< li class="list-item" > Apple </li>
< li class="list-item" > Mango </li>
< li class="list-item" > Grapes </li>
< li class="list-item" > Papaya </li>
< /ul >

< ul class="list-inline" > < strong > Fruits Inline List: </strong>
< li class="list-item" > Apple </li>
< li class="list-item" > Mango </li>
< li class="list-item" > Grapes </li>
< li class="list-item" > Papaya </li>
< /ul >

Nested List

List are continuous group of text or images. Below is the simple example of Nested unordered list.

Fruits List:

Apple
Mango

Alphanso
Dasheri
kesar
Langda

Grapes
Papaya

< ul class="list" > < strong > Fruits List: </strong>
< li class="list-item" > Apple </li>
< li class="list-item" > Mango </li>
< ul class="nested-list" >
< li > Alphanso < /li >
< li > Dasheri < /li >
< li > kesar < /li >
< li > Langda < /li >
< /ul >
< li class="list-item" > Grapes </li>
< li class="list-item" > Papaya </li>
< /ul >

Interactive List

List are continuous group of text or images. Interactive list can be used at multiple place, one of the example is E-commerce cart and wishlist items.

Mango

Quantity: 1dozen (12pcs)

Price: 800rs
Apple

Quantity: 1Kg

Price: 200rs

< ul class="card-list" >
< li class="card-list-items" >
< div >
< p > Mango < /p >
< p > Quantity: 1dozen (12pcs) < /p >
< p > Price: 800rs < /p >
< /div >
< div >
< img src="images/delete.png" alt="delete" class="img-responsive extra-small" onclick=""/ >
< /div >
< /li >

< li class="card-list-items" >
< div >
< p > Apple < /p >
< p > Quantity: 1Kg < /p >
< p > Price: 200rs < /p >
< /div >
< div >
< img src="images/delete.png" alt="delete" class="img-responsive extra-small" onclick=""/ >
< /div >
< /li >

< /ul >

Stacked List

Stacked List can be used for notification. Below is the example and code snippet for stacked list

Tanay

Hello

How are you?
Tanay

Tanay accepted your friend request!

< ul class="card-list" >
< li class="card-list-notification" >
< div class="card-notification-logo" >
< img src="images/whatsapp.png" alt="whatsapp" class="extra-small" />
< /div >
< div >
< p > < strong > Tanay < /strong > < /p >
< p class="card-notification-text" > Hello < /p >
< p class="card-notification-text" > How are you? < /p >
< /div >
< /li >

< li class="card-list-notification" >
< div class="card-notification-logo" >
< img src="images/facebook.png" alt="facebok" class="extra-small" />
< /div >
< div >
< p > < strong > Tanay < /strong > < /p >
< p class="card-notification-text" > Tanay accepted your friend request! < /p >
< /div >
< /li >
< /ul >

Card

Vertical Cards

Different types of vertical Cards are: Simple Card, Card with shadow, card with badge, card with dismiss.

#1 Best Seller

Titan watch

In stock

$100.00

New Arrival

Titan watch

In stock

$200.00

< div class="product-card" >
< span class="card-tag">#1 Best Seller < /span >
< div class="card-header" >
< img src="images/watch.png" alt="watch" / >
< /div >
< div class="card-body" >
< h2 class="product-title" > Titan watch < /h2 >
< p class="product-status" > In stock < /p >
< h3 class="product-price" > $100.00 < /h3 > < /div >
< div class="card-footer" > < button class="btn btn-secondary" > Wishlist < /button >
< button class="btn btn-primary" > Add to cart < /button >
< /div >
< /div >

Horizontal card

Horizontal card is mostly used to display products which are in wishlist or in Incart items.

Titan watch

In Stock

$100

Titan watch

In Stock

$100

< div class="product-card flex-row" >
< div class="card-header" >
< img src="images/watch.png" alt="watch" class="img-responsive" />
< /div >
< div class="card-body" >
< h2 class="product-title" > Titan watch < /h2 >
< p class="product-status" > In Stock < /p >
< h3 class="product-price" > $100 < /h3 >
< div class="card-footer" >
< button class="btn btn-secondary" > Wishlist < /button >
< button class="btn btn-primary" > Add to Cart < /button >
< /div >
< /div >
< /div >

Text only card

The Hare and the Tortoise

There was once a hare who was friends with a tortoise. One day, he challenged the tortoise to a race. Seeing how slow the tortoise was going, the hare thought he’ll win this easily. So he took a nap while the tortoise kept on going. When the hare woke up, he saw that the tortoise was already at the finish line. Much to his chagrin, the tortoise won the race while he was busy sleeping.

Moral of the story

There are actually a couple of moral lessons we can learn from this story. The hare teaches that overconfidence can sometimes ruin you. While the tortoise teaches us about the power of perseverance. Even if all the odds are stacked against you, never give up. Sometimes life is not about who’s the fastest or the strongest, it’s about who is the most consistent.

< div class="product-card" > < h1 > The Hare and the Tortoise < /h1 >
< p > There was once a hare who was friends with a tortoise. One day, he challenged the tortoise to a race. Seeing how slow the tortoise was going, the hare thought he’ll win this easily. So he took a nap while the tortoise kept on going. When the hare woke up, he saw that the tortoise was already at the finish line. Much to his chagrin, the tortoise won the race while he was busy sleeping. < /p >
< h3 > Moral of the story < /h3 >
< p > There are actually a couple of moral lessons we can learn from this story. The hare teaches that overconfidence can sometimes ruin you. While the tortoise teaches us about the power of perseverance. Even if all the odds are stacked against you, never give up. Sometimes life is not about who’s the fastest or the strongest, it’s about who is the most consistent. < /p >

Card with text overlay

Card with text overlay can be used to display out of stock products.

New Arrival

Titan watch

In stock

$200.00

Out of Stock

New Arrival

Titan watch

In stock

$200.00

Out of Stock

< div class="position-relative" > < /div >
< div class="product-card opacity" >
< span class="card-tag">#1 Best Seller < /span >
< div class="card-header" >
< img src="images/watch.png" alt="watch" / >
< /div >
< div class="card-body" >
< h2 class="product-title" > Titan watch < /h2 >
< p class="product-status" > In stock < /p >
< h3 class="product-price" > $100.00 < /h3 > < /div >
< div class="card-footer" > < button class="btn btn-secondary" > Wishlist < /button >
< button class="btn btn-primary" > Add to cart < /button >
< /div >
< /div >
< div class="card-text-overlay" > Out of Stock < /div >
< /div >

Modal

Simple Information Modal

Simple Information Modal is used to display information about the action that user performed, for example: "data saved to database successfully" this is just an information to user.

< div class="modal" >
< div class="modal-type" >
< h1 > Information < /h1 >
< /div >
< p > Order "5201098756" successfully created. < /p >
< button class="btn-primary" > Ok < /button >
< /div >

User Interaction Modal

User Interaction Modal is displayed when interaction with user is required before performing critical action

< div class="modal" >
< div class="modal-type" >
< h1 > User confirmation < /h1 >
< /div >
< p > Would you like to place order? < /p >
< button class="btn-primary" > Yes < /button >
< button class="btn-primary" > No < /button >
< /div >

Rating

< div class="rating" >

< div class="rating-item" >
< img id="id-star1" src="images/star.png" alt="star" class="extra-small" onclick="star(1)" / >
< /div >

< div class="rating-item" >
< img id="id-star2" src="images/star.png" alt="star" class="extra-small" onclick="star(2)" / >
< /div >

< div class="rating-item" >
< img id="id-star3" src="images/star.png" alt="star" class="extra-small" onclick="star(3)" / >
< /div >

< div class="rating-item" >
< img id="id-star4" src="images/star.png" alt="star" class="extra-small" onclick="star(4)" / >
< /div >

< div class="rating-item" >
< img id="id-star5" src="images/star.png" alt="star" class="extra-small" onclick="star(5)" / >
< /div >

< /div >

Navigation

< div class="header">
< div class="header-brand" >
< h1 > My-UI < /h1 >
< /div >
< div class="header-navigation" >
< a href="#" class="header-link" > Docs < /a >
< a href="#" class="header-link" > Github < /a >
< a href="#" class="header-link" > Contact US < /a >
< /div >
< /div >

Grid

Grid Items

Grid is an responsive layout that adapts to different screen sizes and orientation. Below is example of two items in column using grid and 3 items in row using grid.

< div class="grid-two-items" >
< div class="grid-item" > < /div >
< div class="grid-item" > < /div >
< /div <
< div class="grid-three-items" >
< div class="grid-item" > < /div >
< div class="grid-item" > < /div >
< div class="grid-item" > &t /div >
< /div >

Text Utilities

Different Text Utilities are displayed below.

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph Text

Small Text

Grey Text

< h1 > Heading 1 < /h1 >
< h2 > Heading 2 < /h2 >
< h3 > Heading 3 < /h3 >
< h4 > Heading 4 < /h4 >
< p > Paragraph Text < /p >
< small > Small Text < /small >
< p class="grey-text" < Grey Text < /p >