Avatars

Avatars are images that users can set as their profile picture.

Some variants of avatars include rounded avatars,squared avatars and also avatars with text.

Examples of avatars

Rounded avatars

Squared avatars

Text avatars

TV

TV

TV

TV

TV

Buttons

Clickable buttons can be used to submit forms or any other kind of documents.

Examples of Buttons

Solid buttons

Outline buttons

Buttons with icons

Here I have used the icons from font awesome.So make sure you include the font awesome cdn to use these icons

Buttons with link

Floating Action Buttons

Here I have used the icons from font awesome.So make sure you include the font awesome cdn to use these icons

Badges

Badges can be used set status or also get the count of number of messages or notifications you have received.

In the examples given below,all the badges are positioned relative to the icon.

Examples of Badges

Badge on icons

Badge on avatars

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content and contextual background colors.

Examples of Components

Text only card with shadow

Vertical Card containing Text+Image

Atomic Habits

by James Clear

This breakthrough book from James Clear is the most comprehensive guide on how to change your habits and get 1% better every day.A supremely practical and useful book.

Buy now Bookmark

Card with badge

Atomic Habits

by James Clear

This breakthrough book from James Clear is the most comprehensive guide on how to change your habits and get 1% better every day.A supremely practical and useful book.

Buy now Bookmark

Card with text overlay

Atomic Habits

by James Clear

This breakthrough book from James Clear is the most comprehensive guide on how to change your habits and get 1% better every day.A supremely practical and useful book.

Buy now Bookmark

Out of Stock

Horizontal Card

Here I have used the icons from font awesome.So make sure you include the font awesome cdn to use these icons

Atomic Habits

by James Clear

This breakthrough book from James Clear is the most comprehensive guide on how to change your habits and get 1% better every day.

Buy now Bookmark

Card with Dismiss

Atomic Habits

by James Clear

This breakthrough book from James Clear is the most comprehensive guide on how to change your habits and get 1% better every day.A supremely practical and useful book.

Buy now Bookmark

X

Card with header and buttons

WATCHES

Buy now Bookmark

Images

Examples of image components

Responsive image

Round image

Inputs

Examples of input components

Basic input textbox

Input validation

Typography

The Typography component makes it easy to apply a default set of font weights and sizes in your application.

Heading typography

Text styles and Text alignment

Lists

Lists can be used to list out various things in several places

Ordered Lists

Unordered Lists

To create a inline style list just add the class inline-style to ul tag

Modal

Modals are pop-ups that can be used to show certain information which could be important to the user.

To find out how a modal works go ahead and click on Show modal button below.To close the modal you can click on X or you can also click on the Escape key.

Navigation

The navbar can be very useful as it helps the users to essentially navigate to various parts of the website.A navbar will typically contain a logo/brand name and few icons and few buttons and a input box

To make sure the navigation bar which typically stay at the top,make sure to add the .navbar-fixed class.

Toasts

Toasts are pop up messages which are used to convey a certain message to the user

You can replace the class .toast with theh class .toast-stacked to use a stacked toast.

Ratings

Ratings are a way of expressing one's displeasure or one's staisfaction towards a certain product or a service.

You can click on the stars below to give a rating.

Grid

A simplified 50-50 grid

A simplified 60-40 grid

A simplified grid with 3 items