AVATAR

Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.

Group Avatar

An avatar group is an element that communicates to the user that there is more than 1 person associated to an item.

+10

Round Avatar

It is simply a circle avatar,with 3 different sizes small,medium and large.

Rectangle Avatar

It is simply a rectangle avatar,with 3 different sizes small,medium and large.

Online Avatar

It is simply show that our avatar is online !

BADGE

Badges are used to add additional information to any content.For example, some websites associate some number of notifications to the link. The notification number is seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it.

Avatar With Badges

Use the Avatar + Badge Pattern to complement the graphical representation that the Avatar provides with indication for a status

Icon Badge

A number badge over the notification icon is one of the useful elements in a user-friendly interface. This badge alerts the users to read their unread notifications as well as shows the number of notifications

Button Badge

Button badge represents a label which holds a small amount of information, such as the number of unread notifications.

ALERT

An alert box is an important feature. It is used to inform the client or the user about the click events. Like if the user subscribes to your page for daily updates then you can wish them back, or thanks them by showing an alert box message.

Alert Box

Alert messages can be used to notify the user about something special: error, success, information or Invalid.

Alert Outline

Alert outline messages can be used to notify the user about something special: error, success, information or Invalid.

BUTTON

The CSS Buttons are used to decorate the web pages by applying the various styling properties to the button. Buttons are used for event processing and interacting with the user.

Primary Button

By default, .btn-primary has white text on a blue background. There are 3 types of primary btn normal primary btn , hover btn

Link Button

Simply link buttons are for links so that we diffrentiate between normal button and link button there are two types of link button one is simple other have hover property.

Icon Button

Icon buttons are button with text and icon to symbolize the action.

Float Action Button

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types: normal , with shadows , and half bg color button.

CARD

CSS cards are great for organizing and enhancing a website's user interface. Each card is uniquely designed to make it easy for users to read the card content. CSS cards are great for organizing and enhancing a website's user interface.

Card With Badge

Ribbon badges are a great way to highlight something on your website, especially on Card UI designs. This simple pure CSS ribbon badge can by easily placed on the top left corner of your designs.

Maldives

The Maldives are known for their natural environment including the blue ocean, white beaches, and clean air, attracting tourists.

Explore ➡

Card With Dismiss

Card with Dismiss , this card generally contain dismiss icon so, if the user want to remove card from the website they can easily do it.

Subscribe To Newsletter

Never miss any updates !

Subscribe ✉

Card With Text-Overlay

Basically its a card in which text is overlay the card or say , card having text above ! and below cards also have hover property. Download image in the assests file

Playful Doggyyy

Meet Alex!

Happiness is a warm puppy. Money can buy you a fine dog, but only love can make him wag his tail. Dogs are not our whole life, but they make our lives whole.

Sleppy Doggyyy

Meet Bruno!

While fur babies are super adorable when they’re being playful, it's those quiet moments that really get you in your feels.

Card With Text-Only

Text only card is used for tells something important or fact about something to user mainly used for display information ! There are two types of card here first one have gradient in it as bg another card have only text with border color .primary-color .

Card Vertical and Horizontal

card display in two different layout one is horizontal other is vertical . This card usually use for product display.

STARGAZING BASICS

Vaspacx-2022 -Four Seasons under the stars

Vaspacx is back ! Whether you're new to astronomy or a seasoned practioner, Vaspacx 2022 has something for everyone.

STARGAZING BASICS

Vaspacx-2022 -Four Seasons under the stars

Vaspacx is back ! Whether you're new to astronomy or a seasoned practioner, Vaspacx 2022 has something for everyone.

Card With Shadow

card having shadow means something is important , or user needs to pay attention on this card . Just add class .box-shadow-wht for white shadow or add .box-shadow-hover-blue for blue shadow if hover on the card .

This Fact card Feature Intresting fact About SPACE !

The National Aeronautics and Space Administration (NASA), is responsible for unique scientific and technological achievements in human spaceflight, aeronautics, space science, and space applications that have had widespread impacts on our nation and the world.

Playful Doggyyy

Meet Alex!

Happiness is a warm puppy. Money can buy you a fine dog, but only love can make him wag his tail. Dogs are not our whole life, but they make our lives whole.