Hi there,
Component UI is divides UI into components categorically which helps to integrate UI components onto code. Using Component UI helps you to save time and build your web pages faster.
Component UI is created keeping in mind an easy to do interface design and clean implemetaion of a template
Each component is unique and can be integrated easily within the code, reducing efforts to write long CSS code.
Component UI comes with prebuild CSS components that can be used by simply copying the particular code and including the css file.

Garamond is the default font used throughtout the design. You are free to change design and its prespective. Just include the CSS file of Component UI, and we are good to go.
Start building your own website and just copy the particular UI that you need onto your html page.

Easy CSS, Easy Components, Easy UI. Happy Coding.
If you have any issues, do report at das.abhijeet@outlook.com

<button class="cc-bt-error">Error</button> <button class="cc-bt-success">Success</button> <button class="cc-bt-failure">Failure</button> <button class="cc-bt-info">Info</button> <button class="cc-bt-trace">Trace</button>

In an HTML page, copy and paste any of the above lines of button, based on the neccesity inside the body tag.
The only depedency is that you need to include the Component UI CSS file which is given below, <link href="https://kingslair.github.io/ComponentUI/css/componentui.css" type="text/css" rel="stylesheet"> Once done, view your HTML page and see the changes.

Programd	Jukeline	Whisperd
Table	Table	Table
Table	Table	Table
Table	Table	Table

Copy and paste the above lines metioned in Usage, inside the body tag.
For more information see Enviroment Requirement.

<table> <thead> <tr> <td>Programd</td> <td>Jukeline</td> <td>Whisperd</td> </tr> </thead> <tbody> <tr> <td>Table</td> <td>Table</td> <td>Table</td> </tr> <tr> <td>Table</td> <td>Table</td> <td>Table</td> </tr> <tr> <td>Table</td> <td>Table</td> <td>Table</td> </tr> </tbody> </table>

In an HTML page, copy and paste the above lines metioned in Usage, inside the body tag.
The only dependency is that you need to include the Component UI CSS file which is given below, <link href="https://kingslair.github.io/ComponentUI/css/componentui.css" type="text/css" rel="stylesheet"> Once done, view your HTML page and see the changes.

Login to your account

Name

Password

Are you a new user? Register here

Login

Copy and paste the above lines metioned in Usage, inside the body tag.
For more information see Enviroment Requirement.

<div class="cc-login-card"> <table> <tr>Login to your account</tr> <tr> <td class="td-login"> <div class="float-pattern"> <input type="text" id="nameField" name="nameField" placeholder="Name" required /> <label>Name</label> <span></span> </div> </td> </tr> <tr> <td class="td-login"> <div class="float-pattern"> <input type="password" id="passwordField" name="passwordField" placeholder="Password" required /> <label>Password</label> <span></span> </div> </td> </tr> <tr> <td class="td-login"> Are you a new user? <a href="" class="cc-login-link">Register here</a> </td> </tr> <tr> <td class="td-login"> <button class="bt-login">Login</button> </td> </tr> </table> </div>

In an HTML page, copy and paste the above lines metioned in Usage, inside the body tag.
The only dependency is that you need to include the Component UI CSS file which is given below, <link href="https://kingslair.github.io/ComponentUI/css/componentui.css" type="text/css" rel="stylesheet"> Once done, view your HTML page and see the changes.

Name	Designation
Lorem Ipsum	A ta duiet
View profile	View

Copy and paste the above lines metioned in Usage, inside the body tag.
For more information see Enviroment Requirement.

<div class="cc-profile"> <div class="cc-profile-image"> <img src="./profile-icon-9.png" class="cc-profile-image-circle" /> </div> <div class="cc-profile-name"> <table> <thead> <tr> <td class="td-profile-card">Name</td> <td class="td-profile-card">Designation</td> </tr> </thead> <tbody> <tr> <td class="td-profile-card">Lorem Ipsum</td> <td class="td-profile-card">A ta duiet</td> </tr> <tr> <td class="td-profile-card">View profile</td> <td class="td-profile-card"><a href="#" class="cc-link">View</a></td> </tr> </tbody> </table> </div> </div>

In an HTML page, copy and paste the above lines metioned in Usage, inside the body tag.
The only dependency is that you need to include the Component UI CSS file which is given below, <link href="https://kingslair.github.io/ComponentUI/css/componentui.css" type="text/css" rel="stylesheet"> Once done, view your HTML page and see the changes.

Lorem ipsum dolor sit amet.
consectetur adipiscing elit.
incididunt ut labore et dolore.
magna aliqua. Ut enim ad minim.
veniam, quis nostrud exercitation.

First Link	Second Link

Copy and paste the above lines metioned in Usage, inside the body tag.
For more information see Enviroment Requirement.

<div class="cc-link-card"> <div class="cc-link-head"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="cc-link-desc"> <table> <thead> <tr> <td class="cc-profile-link"><a href="#" class="cc-link">First Link</a></td> <td class="cc-profile-link"><a href="#" class="cc-link">Second Link</a></td> </tr> </thead> </table> </div> </div>

In an HTML page, copy and paste the above lines metioned in Usage, inside the body tag.
The only dependency is that you need to include the Component UI CSS file which is given below, <link href="https://kingslair.github.io/ComponentUI/css/componentui.css" type="text/css" rel="stylesheet"> Once done, view your HTML page and see the changes.

Hello World

Lorem ipsum dolor sit amet.
consectetur adipiscing elit.
incididunt ut labore et dolore.
magna aliqua. Ut enim ad minim.
veniam, quis nostrud exercitation.
laboris nisi ut aliquip ex ea commodo consequat.

Copy and paste the above lines metioned in Usage, inside the body tag.
For more information see Enviroment Requirement.

<div class="cc-div-card"> <div class="cc-div-card-heading"> Hello World </div> <div class="cc-div-card-desc"> Lorem ipsum dolor sit amet.<br /> consectetur adipiscing elit.<br /> incididunt ut labore et dolore.<br /> magna aliqua. Ut enim ad minim.<br /> veniam, quis nostrud exercitation.<br /> laboris nisi ut aliquip ex ea commodo consequat. </div> </div>

In an HTML page, copy and paste the above lines metioned in Usage, inside the body tag.
The only dependency is that you need to include the Component UI CSS file which is given below, <link href="https://kingslair.github.io/ComponentUI/css/componentui.css" type="text/css" rel="stylesheet"> Once done, view your HTML page and see the changes.