Get Started

Components

Introducation to czar-ui
Czar is an open source user interface library, which allows devs to create nice and minimal styles and components, by using pre-defined classnames. Czar helps develop sites and web-apps faster without you worrying much on functionality.
Installation
To get started with Czar in your project, copy the link given below and paste it in the <head> tag of your html, above all other style sheets.
Copy 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://czar-ui.netlify.app/scripts/docs_nav.js" defer></script>
<link rel="stylesheet" href="https://czar-ui.netlify.app/style/components/component.css" />
<script src="https://czar-ui.netlify.app/scripts/componentScript.js" defer></script>
Typography
A Webpage must have a good looking, standard and readable font to make it's content attractive to the end user. Open Sans is the font property which is used by Czar. The font weight varies from 500 to 700 based on importance of the content and free icons available on font awesome is used by Czar.
Color Scheme
Czar comes with pre-defined colors, which are consistent in the overall design. The colors used are chosen on a generic basis, which can be accessed by pre-defined classes.
Default Palette
Default #172B4D
Primary #6366F1
Secondary #F3F4F6
Danger #F44336
Success #4CAF50
Warning #FF9800
Avatar
Avatars are user profile pictures , usually found in circular shapes. Avatars can be used for 'container' objects — projects, spaces, repositories, etcetera — to give them a recognisable visual identity.
default work-men work-women
Copy 
<img src="./assets/images/avatarImage/images.png" alt="default" class="avatar" />
<img src="./assets/images/avatarImage/officeman.jpg" alt="work-men" class="avatar" />
<img src="./assets/images/avatarImage/officewomen.png" alt="work-women" class="avatar" />
Avatar Round
default men women
Copy 
<img src="./assets/images/avatarImage/images.png" alt="default" class="avatar round" />
<img src="./assets/images/avatarImage/officeman.jpg" alt="men" class="avatar round" />
<img src="./assets/images/avatarImage/officewomen.png" alt="women" class="avatar round" />
Avatar Sizes
blank men women
Copy 
<img src="./assets/images/avatarImage/images.png" alt="blank" class="avatar round sm" />
<img src="./assets/images/avatarImage/officeman.jpg" alt="men" class="avatar round" />
<img src="./assets/images/avatarImage/officewomen.png" alt="women" class="avatar round lg" />
Alert
An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
Primary Alerts
Success! This is a Primary Success Alert!
Error! This is a Primary Error Alert!
Warning! This is a Primary Warning Alert!
Info! This is a Primary Info Alert!
Copy 
<div class="alert success">
  <strong>Success</strong>! This is a Primary Success Alert!
</div>
<div class="alert error">
  <strong>Error</strong>! This is a Primary Error Alert!
</div>
<div class="alert warning">
  <strong>Warning</strong>! This is a Primary Warning Alert!
</div>
<div class="alert info">
  <strong>Info</strong>! This is a Primary Info Alert!
</div>
Secondary Alerts
Success! This is a Secondary Success Alert!
Error! This is a Secondary Error Alert!
Warning! This is a Secondary Warning Alert!
Info! This is a Secondary Info Alert!
Copy 
<div class="alert outline-success">
  <strong>Success</strong>! This is a Secondary Success Alert!
</div>
<div class="alert outline-error">
  <strong>Error</strong>! This is a Secondary Error Alert!
</div>
<div class="alert outline-warning">
  <strong>Warning</strong>! This is a Secondary Warning Alert!
</div>
<div class="alert outline-info">
  <strong>Info</strong>! This is a Secondary Info Alert!
</div>
Button
Buttons are the soul of an interactive Web Application. Buttons allow users to take actions, and make choices, with a single tap.
Basic Button
Link
Copy 
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<a href="http://" class="link">Link</a>
<button class="btn-icon"><i class="fas fa-trash"></i></button>
Animated Button
Copy 
<button class="btn btn-large">Large</button>
<button class="btn btn-animate-arrow">
  <span class="span-arrow">Hover </span>
</button>
<button class="btn btn-loading">
  <i class="fa fa-spinner fa-spin"></i>Loading
</button>
Badge
Badges are small circles, positioned either at top-right or bottom-right of the parent component. Badge can be used to display numbers, online / offline status, depending on where they are used.

Text with basic badge

5
8
2
1
work-men 8
Copy 
<div class="badge-div">
  <p>Text with basic badge</p>
  <span class="txt-badge">5</span>
</div>
 
<div class="badge-div">
  <button class="btn-badge">Action</button>
  <span class="btn-icon-badge">8</span>
</div>
 
<div class="icon-badge-div">
  <i class="fas fa-bell"></i>
  <span class="icon-badge">2</span>
</div>
 
<div class="icon-badge-div">
  <i class="fas fa-shopping-cart"></i>
  <span class="icon-badge">1</span>
</div>
<div class="avatar-badge-div">
  <img src="./assets/images/avatarImage/officeman.jpg" alt="work-men" class="avatar round sm" />
  <span class="icon-badge">8</span>
</div>
Card
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Basic Card
nature img

My Next Destination

by sunil

These tourist destinations on our bucket list are the top places to visit. Some of the places won't let you return. Caution: You can get addicted to this places.

Copy 
<div class="card-container">
  <img src="https://picsum.photos/380/240" alt="nature img" class="random-img" />
  <div class="card-details">
    <h3 class="card-title">My Next Destination</h3>
    <p class="card-subtitle">by sunil</p>
    <p class="card-text">
      These tourist destinations on our bucket list are the top places to visit. Some of the places won't let
      you return. Caution: You can get addicted to this places.
  </div>
  <div class="card-options">
    <button class="card-btn">read</button>
    <button class="card-btn">share</button>
    <i class="far fa-heart card-icon"></i>
    <i class="fas fa-share-alt card-icon"></i>
    <i class="fas fa-ellipsis-v card-icon"></i>
  </div>
</div>
<code>
Basic W/ Header

My Next Destination

by sunil

nature img

These tourist destinations on our bucket list are the top places to visit. Some of the places won't let you return. Caution: You can get addicted to this places.

Copy 
<div class="card-container">
  <h3 class="card-title mg-rl">My Next Destination</h3>
  <p class="card-subtitle mg-rl">by sunil</p>
  <img src="https://picsum.photos/380/240" alt="nature img" class="random-img" />
  <p class="card-text mg-rl">
    These tourist destinations on our bucket list are the top places to visit. Some of the places won't let
    you return. Caution: You can get addicted to this places.
  </p>
  <div class="card-options">
    <button class="card-btn">read</button>
    <button class="card-btn">share</button>
    <i class="far fa-heart card-icon"></i>
    <i class="fas fa-share-alt card-icon"></i>
    <i class="fas fa-ellipsis-v card-icon"></i>
  </div>
</div>
Basic w/ Text over Media
nature img

My Next Destination

by sunil

These tourist destinations on our bucket list are the top places to visit. Some of the places won't let you return. Caution: You can get addicted to this places.

Copy 
<div class="card-container">
  <img src="https://picsum.photos/id/108/380/240" alt="nature img" class="random-img" />
  <div class="card-details">
    <div class="text-over-heading">
      <h3 class="card-title">My Next Destination</h3>
      <p class="card-subtitle">by sunil</p>
    </div>
    <p class="card-text">
      These tourist destinations on our bucket list are the top places to visit. Some of the places won't let
      you return. Caution: You can get addicted to this places.
    </p>
  </div>
  <div class="card-options">
    <button class="card-btn">read</button>
    <button class="card-btn">share</button>
    <i class="far fa-heart card-icon"></i>
    <i class="fas fa-share-alt card-icon"></i>
    <i class="fas fa-ellipsis-v card-icon"></i>
  </div>
</div>
Horizontal Image and Text
nature img

My Next Destination

by sunil

Copy 
<div class="card-container">
  <div class="flex-items">
    <img src="https://picsum.photos/100/100" alt="nature img" class="random-img" />
    <div class="card-details">
      <h3 class="card-title">My Next Destination</h3>
      <p class="card-subtitle">by sunil</p>
    </div>
  </div>
  <div class="card-options">
    <button class="card-btn">read</button>
    <button class="card-btn">share</button>
    <i class="far fa-heart card-icon"></i>
    <i class="fas fa-share-alt card-icon"></i>
    <i class="fas fa-ellipsis-v card-icon"></i>
  </div>
</div>
Product Card
tshirt
CR7

White Printed Round Neck

Rs. 799 Rs. 999 (40% OFF)
Add size
XS S M L XL
Copy 
<div class="component-subhead">Product Card</div>
<div class="card-wrapper">
  <div class="product-card">
    <div class="product-img-div">
      <img src="./assets/images/jpegs/ronaldo-portrait-1.webp" alt="tshirt" class="product-img" />
    </div>
    <div class="product-detail">
      <div class="product-brand">
        CR7 <i class="fa-solid fa-heart"></i>
      </div>
      <p class="product-info">White Printed Round Neck</p>
      <div class="product-price">
        <span>Rs. 799</span>
        <span>Rs. 999</span>
        <span>(40% OFF)</span>
      </div>
      <div class="product-size-div">
        <div class="product-size-title">Add size</div>
        <div class="product-size">
          <span>XS</span>
          <span>S</span>
          <span>M</span>
          <span>L</span>
          <span>XL</span>
        </div>
      </div>
    </div>
    <button class="product-btn">ADD TO CART</button>
  </div>
Image
Responsive Image Components are used to dsiplay Images on websites, which are screen responsive. They expand upto the width of the container they are in.
Responsive Image
nature-img nature
Copy 
<img src="./assets/images/img-component/nature.jpg" alt="nature-img" class="responsive-img"
  loading="eager" />
<img src="./assets/images/img-component/nature.jpg" alt="nature" class="responsive-img round" />
Responsive Image W/ Animation
nature
Copy 
<img src="./assets/images/img-component/nature.jpg" alt="nature" class="responsive animate-move-img" />
Input
Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly.
Basic Input
Copy 
<input type="text" class="input" placeholder="Username" />
<input type="text" class="input input-warning" placeholder="Password" />
Input W/ Chips

disabled

Primary

Secondary

Copy 
<div class="component-subhead">Input W/ Chips</div>
<div class="chips-container">
  <div class="chips">
    <div class="chip">
      <p>disabled</p>
      <i class="fas fa-times-circle input-cross-icon"></i>
    </div>
    <div class="chip-bg">
      <p>Primary</p>
      <i class="fas fa-times-circle input-cross-icon"></i>
    </div>
    <div class="chip-border">
      <p>Secondary</p>
      <i class="fas fa-times-circle input-cross-icon"></i>
    </div>
  </div>
  <input type="text" class="input-chip" placeholder="add items..." />
</div>
Snackbar
Snackbars/Toast inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
Copy 
<div id="snackbar-top"></div>
<div id="snackbar-center"></div>
 
<button class="btn btn-secondary" onclick="showMessage('Snackbar demo successful!')">
  Basic Snackbar
</button>
<button class="btn btn-secondary" onclick='showMessageCenter("Congratulations, Subscribed Successfully!")'>
  Center Snackbar
</button>
<!-- Use Script link for UI interactivity  -->
List
Lists are continuous, vertical display of text or images.
Ordered List
Unordered List

Title

subtext

  1. Inbox
  2. Star
  3. Sent Mail
  4. Drafts

Title

subtext

  • Inbox
  • Star
  • Sent Mail
  • Drafts
Copy 
<div class="flex">
  <div class="drawer">
    <h2 class="drawer-title">Title</h2>
    <p class="drawer-subtext">subtext</p>
    <div class="drawer-nav">
      <ol>
        <li class="drawer-links">
          <i class="fas fa-archive drawer-icon"></i>
          Inbox
        </li>
        <li class="drawer-links">
          <i class="fas fa-star drawer-icon"></i>
          Star
        </li>
        <li class="drawer-links">
          <i class="fas fa-paper-plane drawer-icon"></i>
          Sent Mail
        </li>
        <li class="drawer-links">
          <i class="fas fa-envelope-open drawer-icon"></i>
          Drafts
        </li>
      </ol>
    </div>
    <!-- For unordered-list; just change <ol> </ol> to <ul> </ul>  -->
Having easy-to-use navigation is important for any web site, With CSS you can transform boring HTML menus into good-looking navigation bars.

This Navigation bar is Responsive / W Hamburger and made for all kind of device.

Copy 
<nav class="navbar">
  <div class="brand-title">Brand Name</div>
  <i class="fas fa-bars toggle-button"></i>
  <div class="navbar-links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<!-- Use Script link for hamburger toggle on mobile mode -->
Slider
Sliders allow users to make selections from a range of values.

Options Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos modi nesciunt placeat reiciendis maiores consectetur magnam ratione esse quae atque.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos modi nesciunt placeat reiciendis maiores consectetur magnam ratione esse quae atque.

Copy 
<div class="options-dialog">
  <h2 class="options-title">Options Title</h2>
  <div class="option-div">
    <input type="checkbox" id="input1" name="option" />
 
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Dignissimos modi nesciunt placeat reiciendis maiores
      consectetur magnam ratione esse quae atque.
    </p>
  </div>
  <div class="option-div">
    <input type="checkbox" id="input1" name="option" />
 
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Dignissimos modi nesciunt placeat reiciendis maiores
      consectetur magnam ratione esse quae atque.
    </p>
  </div>
  <div class="option-div">
    <input type="checkbox" id="input" name="option" />
    <label class="input" for="input">Item 1</label>
    <label class="input" for="input">Item 2</label>
    <label class="input" for="input">Item 3</label>
    <label class="input" for="input">Item 4</label>
    <label class="input" for="input">Item 5</label>
  </div>
</div>
A modal is a dialog box/popup window that is displayed on top of the current page:
Copy 
<button id="openModal" class="btn btn-primary">CLICK ME</button>
 
<div class="modal-container" id="modal_container">
  <div class="modal">
    <h1>Modals/popups are Awesome!</h1>
    <p class="modal-text">
      This is a modal box which is used in popping various important
      informations depending on user requirement.
    </p>
    <button id="closeModal" class="btn btn-primary">OKAY</button>
    <button id="closeModal" class="btn btn-danger">CANCEL</button>
  </div>
</div>
<!-- Use Script link for modal occurrence  -->
Rating
Rating components can be used as read-only badge or in reviews section. Can be used in reviews section as form too.
Copy 
<i class="fas fa-star rating-icon"></i>
<i class="fas fa-star rating-icon"></i>
<i class="fas fa-star rating-icon"></i>
<i class="fas fa-star rating-icon"></i>
<i class="fas fa-star rating-icon"></i>
<!-- Use Script link for toggle rating -->
Grid
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
grid-2: Two items in a grid
child 1
child 2
Copy 
<!-- Two items grid-->
<div class="grid-col-2">
  <div>child 1</div>
  <div>child 2</div>
</div>
grid-3: Two items in a grid
child 1
child 2
child 3
Copy 
<!-- Three items grid-->
<div class="grid-col-3">
  <div>child 1</div>
  <div>child 2</div>
  <div>child 3</div>
Text Utilities
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Headings

H1 - Heading

H2 - Heading

H3 - Heading

H4 - Heading

H5 - Heading
H6 - Heading
Copy 
<h1>H1 - Heading</h1>
<h2>H2 - Heading</h2>
<h3>H3 - Heading</h3>
<h4>H4 - Heading</h4>
<h5>H5 - Heading</h5>
<h6>H6 - Heading</h6>
Text sizes

This is small text.

This is medium text.

This is large text.

This is extra large text.

Copy 
<p class="txt-sm">This is small text.</p>
<p class="txt-md">This is medium text.</p>
<p class="txt-lg">This is large text.</p>
<p class="txt-xl">This is extra large text.</p>
Text alignment

Text alignment start

Text alignment center

Text alignment end

Copy 
<p class="txt-start">Text alignment start</p>
<p class="txt-center">Text alignment center</p>
<p class="txt-end">Text alignment end</p>