Introduction

Kube UI is a component library being built to help writing less basic code. To know more about it head to the github repo and explore. Any feedbacks, suggestions are most welcome!

Quick Start

To use Kube UI in your project add the below link into your head section.

Alerts

Alerts provide contextual messages to user for typical user actions.

Contextual alert

Use any of the contextual classes like alert-success, alert-primary for contextual alert.

Primary alert
Secondary alert
Success alert
Warning alert with an icon
Danger alert with an icon

Dismissible alert

Dismisible alerts are used to close the alert using close button.

dismissible warning alert with an icon

Avatar

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

Image Circular Avatar

Cicrular image avatar can be implemented in 6 different sizes utilizing .avatar-xx-lg, .avatar-x-lg, .avatar-lg, .avatar-md, .avatar-sm, .avatar-x-sm classes and .circular-img class in image tag.

avatar
avatar
avatar
avatar
avatar
avatar

Image Square Avatar

Square image avatar can be implemented in those same 6 different sizes as circular avatar. Add .square-avatar class in image tag for square avatar.

avatar
avatar
avatar
avatar
avatar
avatar

Text Circle Avatar

Use .text-avatar class for text avatar.

SK
SK
SK
SK
SK
SK

Badges

Badges provide notification count, status symbol(away, on-call etc)

Text Badge

Text badges match the size of the immediate parent element.

Heading with badge New

Heading with badge New

Heading with badge New

Heading with badge New

Heading with badge New
Heading with badge New

Positoned Badge

Positoned badge are positioned to the top/right/bottom/left of the button or icon.

Profile Badge

Profile badge are used to show profile status. Use .profile-badge class with ".online", ".away", .incall classes for differnt status.

avatar
avatar
avatar

Buttons

Use custom button styles as per the actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Contained buttons

Contained buttons with semantic meaning. Use .bttn-primary, bttn-secondary, bttn-danger classes for differnt semantic purpose.

Outlined buttons

Outlined buttons with semantic meaning

Icon buttons

Icon buttons convey the action more emphaticaly using leading icons.

Sizes

Buttons of different sizes with semantic meaning. Use .bttn-lg, .bttn-sm classes along with .bttn-primary, .bttn-secondaryetc.

Disabled and Link button

Disabled buttons are not action or not clickable button.

Primary link

Floating button

Use .bttn-float-icon for floating buttons.

Cards

Cards provide flexible container for content, image and more with multiple options and variants.

Vertical Product Card

Vertical product card with image, text, rating-badge, button and dismiss-close-icon.

model
4.3
Levis
Appliqued Crew-Neck T-shirt
Rs. 2364 Rs. 2999 (20% OFF)
model
4.3
Levis
Appliqued Crew-Neck T-shirt
Rs. 2364 Rs. 2999 (20% OFF)

Horizontal Product Card landscape

Horizontal product card with image, text and text-overlay and button

model
4.3
Levis
Appliqued Crew-Neck T-shirt
Rs. 2364 Rs. 2999 (20% OFF)
model
sold out
Out of stock
Levis
Appliqued Crew-Neck T-shirt
Rs. 2364 Rs. 2999 (20% OFF)

Image

Images can be cutomzied to square or circular shape, and can also take 100% width of parent component as full width images.

Square Image

Circular Image

Use .circular-img class for circular image.

Full Width Image

Full width image will take up the entire width of the parent component and resize on . Resize the screen to observe responsiveness

Input

Input fields are used in form component for taking value from user. Use .input-section class in your input tag

You must enter password.

Lists

Lists component are used to display content in sequence. The Sequence can be cusotomized as per need.

Basic Unorderd List

Unordered list can have differnt type of bullets to present content. Use .list-circled, .list-square classes for disc type bullet and square bullets

  • Item one
  • Item two
  • Item three
  • Item four
  • Item one
  • Item two
  • Item three
  • Item four
  • Item one
  • Item two
  • Item three
  • Item four

List with leading icon

  • User Name
  • User Name
  • User Name
  • User Name

Category List

Catoogry list can group similar contents in sequence

Clothing

Rating

Use .rating-star-input class in input tag for creating this component

Toast

Toast push notifications with easy and cutomizable messages to audience.

Notification Toast

Basic notificaiton toast can have a container of.toast class, with a toast header and message of .toast-heading and .toast-message class respectively.

Kube UI
Greeting! Toast message from Kube UI.

Live Toast

Click the button below to see live toast demo

Kube UI
Greeting! Toast message from Kube UI.

Typography

Below are some text formats to use at different places in your website

Headings

h1, h2, h3, h4, h5 and h6 have different semantic menaning.

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

Small Text

This is a small text.

Text Alignment

Use .text-start, .text-center and .text-end classes for aligning text in start, center and at the end respectively.

Left aligned text
center aligned text
Right aligned

Grid

Grid is a powerful technique to create complex layout real quick with less complex code.

2-Items Grid

div block with .grid-container class is divided into 12 equal columns, distributing 2 child divs occupying 6 columns each.

Block One
Block Two

3-Items Grid

3 columns each occupying 1/3rd of entire column space

Block One
Block Two
Block Three