close

Get Started

Components

Introduction

CrystalUi is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

Installation Guide

To use CrystalUi in your web interfaces , copy the following link and paste it in tag of your main HTML file. 


<link rel="stylesheet" href="https://crystal-ui.netlify.app/components.css" />

Colors

CrystalUi comes with pre-defined color, which can be used directly in your css. We can use these colors for background of elements or on text-colors. We have losts of varients for colors as well as their weights.

Colors of Library

Color pallete of CrystalUi

primary #02bfc9;
text #393e46;
heading #222831;
body #f9f9f9;

Colors

Colors CrystalUi provides.

gray-100 #efefef
gray-300 #d1d5db;
gray-500 #6b7280;
gray-700 #374151;
gray-900 #1f2937;
violet-300 #d8cffc;
violet-500 #8b5cf6;
violet-700 #6d28d9;
indigo-300 #a5b4fc;
indigo-500 #6366f1;
indigo-700 #4338ca;
blue-300 #bee3f8;
blue-500 #3182ce;
blue-700 #0b5fbe;
green-300 #c6f6d5;
green-500 #38a169;
green-700 #15803d;
yellow-300 #fff1ac;
yellow-500 #f59e0b;
yellow-700 #b45309;
red-300 #fed7d7;
red-500 #e53e3e;
red-700 #b91c1c;

Avatar

The Avatar component is used to represent a user, and displays the profile picture, we have avatar in different sizes and shapes. You have to add ct-avatar class in img tag to use it as avatar. By default the avatar size is 32px.

Round Avatar Sizes

You have to apply ct-avatar, ct-round class to use round avatar, which has four different sizes ct-sm | 32px, ct-md | 40px, ct-lg | 64px, ct-xlg | 96px.

avatar avatar avatar avatar 

<img class="ct-avatar ct-round ct-sm" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-round ct-md" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-round ct-lg" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-round ct-xlg" src="image-url" alt="avatar"/>

Squared Avatar

Use ct-square class to add Squared avatar. Which also has all the four sizes. 


<img class="ct-avatar ct-square ct-sm" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-square ct-md" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-square ct-lg" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-square ct-xlg" src="image-url" alt="avatar"/>

Fallback Avatar

You can use fallback avatar if the user has not given any image or removed it. put ct-fallback.

fallback fallback fallback fallback 

<img class="ct-fallback ct-sm" src="image-url" alt="avatar"/>
<img class="ct-fallback ct-md" src="image-url" alt="avatar"/>
<img class="ct-fallback ct-lg" src="image-url" alt="avatar"/>
<img class="ct-fallback ct-xlg" src="image-url" alt="avatar"/>

Alert

Alerts are use to show a state to user that something affected to a system, feature or page. We have four types of alerts with icons and button, which can you use adding class ct-alert in it.

Status Alert

Use ct-error for Error alert, ct-update for success, ct-report for report, ct-info for information.

error There was an error processing your request
check_circle Data uploaded to the server. Fire on!
report Seems your account is about expire, upgrade now
lightbulb Mangalyaan is going live on 5 November 2013. Get ready! 

<div class="ct-error ct-alert"> <span class="material-icons"> error </span>
There was an error processing your request </div>
<div class="ct-update ct-alert"> <span class="material-icons"> check_circle </span>
Data uploaded to the server. Fire on! </div>
<div class="ct-report ct-alert"> <span class="material-icons"> report </span>
Seems your account is about expire, upgrade now </div>
<div class="ct-info ct-alert"> <span class="material-icons"> lightbulb </span>
Mangalyaan is going live on 5 November 2013. Get ready! </div>

Status Alert with Border

Add ct-error-bd, ct-update-bd... etc classes to add outer border alert. -bd stands for border.

error There was an error processing your request
check_circle Data uploaded to the server. Fire on!
report Seems your account is about expire, upgrade now
lightbulb Mangalyaan is going live on 5 November 2013. Get ready! 

<div class="ct-error-bd ct-alert"> <span class="material-icons"> error </span>
There was an error processing your request </div>
<div class="ct-update-bd ct-alert"> <span class="material-icons"> check_circle </span>
Data uploaded to the server. Fire on! </div>
<div class="ct-report-bd ct-alert"> <span class="material-icons"> report </span>
Seems your account is about expire, upgrade now </div>
<div class="ct-info-bd ct-alert"> <span class="material-icons"> lightbulb </span>
Mangalyaan is going live on 5 November 2013. Get ready! </div>

Alert with Button

We have close button in this alert type. You can use both default and outer alert types in it using those classes.

error There was an error processing your request close
check_circle There was an error processing your request close 

<div class="ct-error ct-alert"> <span class="material-icons"> error </span>
  There was an error processing your request <span class="material-icons"> close </span>
</div>
<div class="ct-update-bd ct-alert"> <span class="material-icons">check_circle </span>
  There was an error processing your request <span class="material-icons"> close </span>
</div>

Badge

Badges can be usefull in showing notification pop-up, user is online or not, on CTA buttons. we have badges on icons, buttons and avatar also.

Badge on Icons

Badge on icons has basic-badge class, inside that we have badge-pop class which is a badge and includes four colors by default it has blue color but you can add these classes to make it different, ct-green, ct-red, ct-violet.

mail 4
mail 4
favorite 4
cart 4 
 
<div class="basic-badge">
  <img src="img.svg-url" alt="mail" /> <span class="badge-pop">4</span>
</div>
<div class="basic-badge">
  <img src="img.svg-url" alt="mail" /> <span class="badge-pop ct-green">4</span>
</div>
<div class="basic-badge">
  <img src="img.svg-url" alt="favorite" /> <span class="badge-pop ct-red">4</span>
</div>
<div class="basic-badge">
  <img src="img.svg-url" alt="cart" /> <span class="badge-pop ct-violet">4</span>
</div>

Large Badge

Large badge which is mostly usefull in larger viewports. to use simply add large-badge class in component.

mail 4
favorite 4 
               
<div class="large-badge"> <img src="img.svt-url" alt="mail" /> 
<span class="large-pop">4</span> </div>
<div class="large-badge"> <img src="img.svt-url" alt="favorite" /> 
<span class="large-pop ct-red">4</span> </div>

Badge on Button

Badge for CTA buttons in your web app. add btn-badge class to use.

4 

<div class="basic-badge">
  <button class="btn-badge">Action</button>
  <span class="badge-pop">4</span>
</div>

Badge on Avatar

Badge on avatar is used to check wether the user in online or offline. 

 
<div class="basic-badge"> <img src="img-url" alt="" class="ct-avatar ct-lg" />
  <span class="plane-badge"></span>
</div>
<div class="basic-badge"> <img src="img-url" alt="" class="ct-avatar ct-lg" />
  <span class="plane-badge"></span>
</div>

Button

Buttons are most important component of a web page also term as CTA(call to action). We have different types of button to give user simple and clean experience.

Primary Button

Primary buttons are the main buttons or CTA of the page. use ct-btn class to use primary button. it also has four colors which can you use adding respective classes. ct-red, ct-blue, ct-green, ct-gray 

 
<button class="ct-btn ct-red">Primary</button>
<button class="ct-btn ct-blue">Primary</button>
<button class="ct-btn ct-green">Primary</button>
<button class="ct-btn ct-gray">Primary</button>

Link Button

Link buttons are usefull to link other pages like social media handles or wiki of some terms. Add ct-red-bd, ... classes to watch in action. 

 
<button class="ct-btn ct-red-bd">Link</button>
<button class="ct-btn ct-blue-bd">Link</button>
<button class="ct-btn ct-green-bd">Link</button>
<button class="ct-btn ct-gray-bd">Link</button>

Icon Button

Buttons with icons also very usefull for the people who don't understands a language or can't read. We have four types of icon buttons shown below to use add respective classes. 


<button class="ct-btn ct-addcart">
  <span class="material-icons">shopping_cart</span>
  ADD TO CART
</button>
<button class="ct-btn ct-wishlist">
  <span class="material-icons">favorite</span>
  WISHLIST
</button> 
<button class="ct-btn ct-pay">
  <span class="material-icons">attach_money</span>
  PAYMENT
</button>
<button class="ct-btn ct-store">
  <span class="material-icons">store</span>
  STORE
</button>

Floating Button

Floating buttons to show a list on button click or it can be use for search bar. 


<button class="ct-btn">
  <span class="material-icons ct-float">search</span></button>
<button class="ct-btn"><span class="material-icons ct-float">add</span>
</button>
<button class="ct-btn">
  <span class="material-icons ct-float">save</span>
</button>

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.

Basic input

Basic input field with label. Include ct-input class to use. 


<div class="ct-input-div">
<label for="ct-input">Label*</label>
<input type="text" id="ct-input" class="ct-input" placeholder="Basic input" />
</div>

Input with Icon

Input with icons, we have two types 1. input with error 2. input with success

warning_amber
done 

<div class="ct-input-error">
<input type="text" class="ct-error-icon" name="input" placeholder="input text"/>
  <span class="material-icons">warning_amber</span>
</div>
<div class="ct-input-check"> 
<input type="text" class="ct-check-icon" name="input" placeholder="input text"/>
  <span class="material-icons">done</span>
</div>

Input types

Checkbox and radio buttons are use to make a choice. to agree a policy, and choose the gender. 


<div class="ct-wrapper">
<input type="checkbox" checked id="checkbox1" class="ct-checkbox"/>
<label for="checkbox1">Checked</label> </div>
<div class="ct-wrapper">
<input type="checkbox" id="checkbox2" class="ct-checkbox" disabled/>
  <label for="checkbox2">Checkbox</label> </div>
<div class="ct-wrapper">
  <input type="radio" name="radio" id="radio1" class="ct-radio" />
  <label for="radio1">Male</label> </div>
<div class="ct-wrapper">
  <input type="radio" class="ct-radio" name="radio" id="radio2" />
  <label for="radio2">Female</label> </div>

Input form

Every site has a form to get data of user it can be usefull in different ways. You can directly use below form dy copy and pasting into your page.

Sign up

warning_amber
done 

<form class="ct-form"> <h2>Sign up</h2> <div class="ct-input-div">
  <input type="text" class="ct-input" placeholder="Enter name..." required /> </div>
  <div class="ct-input-error">
  <input type="email" class="ct-error-icon" placeholder="Email..." required />
  <span class="material-icons">warning_amber</span> </div>
  <div class="ct-input-check">
  <input type="tel" class="ct-check-icon" placeholder="Phone No..." required />
  <span class="material-icons">done</span> </div>
  <div class="ct-checkbox-div">
  <input type="checkbox" id="checkbox3" required class="ct-checkbox" />
  <label for="checkbox3">Privacy</label> </div>
  <div class="ct-radio-div">
  <input type="radio" id="radio3" required class="ct-radio" />
  <label for="radio3">Male</label> </div>
  <div class="ct-radio-div"> <input type="radio" id="radio4" class="ct-radio" required /> 
  <label for="radio4">Female</label> </div>
  <button class="ct-form-btn" type="submit">SUBMIT</button> 
</form>

Image

Image Components are used to dsiplay Images on websites, which are screen responsive. They expand upto the width of the container they are in.

Image in size

This are default square images with three sizes. ct-img-sm | small, ct-img-md | medium, ct-img-lg | large.

small = 96px, medium = 128px, and large = 192px.
fish fish fish 

<img src="img-url" lass="ct-img-sm" alt="fish"/>
<img src="img-url" class="ct-img-md" alt="fish"/>
<img src="img-url" class="ct-img-lg" alt="fish"/>

Round image

Round images are used as profile or logo also.

fish fish fish 

<img src="image-url" alt="fish" class="ct-img-round ct-img-sm" />
<img src="image-url" alt="fish" class="ct-img-round ct-img-md" />
<img src="image-url" alt="fish" class="ct-img-round ct-img-lg" />

Responsive image

Responsive images are much important because it can response to the viewport, and we don't need to add styles for different viewports. we have below example of responsive image which adjust its width and height respect to its parent element.

fish 

<div class="ct-landing-div">
  <img src="your-img-url" alt="fish" class="ct-img" />
</div>

Card

Cards are boxes that display content and actions. 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.

Cards with buttons, badges, icons and Text overlay

Cards are the important component in e-commerce site. We can show our product, its stats and price in single card.

fish

Product name

Product by Dev

Lorem ipsum dolor sit, amet consectetur adipisicing.

NEW favorite fist

Product name

Product by Dev

Lorem ipsum dolor sit amet, consectetur adipisicing.

fish

Product name

Product by Dev

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, blanditiis! 


Simple card  
<a class="ct-basic-card"> 
  <img src="your-img-url" alt="fish" class="ct-card-img" />
  <div class="ct-product-stats"> <h3>Product name</h3> <small>Product by Dev</small> 
  <p class="ct-product-info"> Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
  <div class="ct-card-btns"> <button class="ct-btn ct-gray-bd">ADD TO CART</button> 
  <button class="ct-btn ct-blue">BUY NOW</button> </div> </div> 
</a>

Card with badge and buttons
<a class="ct-basic-card ct-card-badge-div">
  <span class="titled-badge ct-violet ct-card-badge">NEW</span>
  <span class="material-icons ct-card-wish">favorite</span>
  <img src="your-img-url" alt="fist" class="ct-card-img"/>
  <div class="ct-product-stats"><h3>Product name</h3><small>Product by Dev</small>
  <p class="ct-product-info">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  <div class="ct-card-btns"><button class="ct-btn ct-ebtn ct-addcart">
  <span class="material-icons">shopping_cart</span>ADD TO CART</button>
  <button class="ct-btn ct-ebtn ct-pay"><span class="material-icons">attach_money
  </span>BUY</button></div></div>
</a>

Card on Text overlay
<a class="ct-basic-card"> 
  <img src="your-img-url" alt="fish" class="ct-card-img"/> 
  <div class="ct-product-stats"> <div class="product-title">
  <h3>Product name</h3> <small>Product by Dev</small> </div> 
  <p class="ct-product-info"> Lorem, ipsum dolor sit
  amet consectetur adipisicing elit. Laudantium, blanditiis! </p>
  <div class="ct-card-btns"> <button class="ct-btn ct-gray-bd">ADD TO CART</button> 
  <button class="ct-btn ct-blue">BUY NOW</button> </div> </div> 
</a>

Horizontal card/ Text card

Horizontal card and Text only cards to inform user about your new idea.

close product

Product name

Product by Dev

Lorem ipsum dolor sit amet consectetur adipisicing.

close

Thank you for visiting!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit quod mollitia explicabo quo iusto

favorite 

Horizontal card
<a class="ct-horizontal-card ct-card-badge-div"> 
  <span class="material-icons ct-card-close">close</span> 
  <img src="your-img-url" class="ct-card-img ct-img-lg" alt="product"/> 
  <div class="ct-product-stats"><h3>Product name</h3> 
  <small>Product by Dev</small><p class="ct-product-info"> 
  Lorem ipsum dolor sit amet consectetur adipisicing. </p> 
  <div class="ct-card-btns"><button class="ct-btn ct-gray-bd">THANKS</button> 
  <button class="ct-btn"><span class="material-icons wishlist-btn">favorite</span> 
  <span class="material-icons share-btn">share</span> </button> </div> </div>
</a>

Text only card 
<a class="ct-basic-card text-card">
  <span class="material-icons ct-card-close">close</span>
  <div class="text-container"> <h2>Thank you for visiting!</h2>
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Fugit quod mollitia explicabo quo iusto
  </p> </div> <div class="text-card-btn">
  <span class="material-icons wishlist-btn">favorite</span>
  <span class="material-icons share-btn">share</span> </div>
</a>

Text Utilities

Text component is the used to render text and paragraphs within an interface. It renders all paragraph, Headings tag by default.

Text Headings

Text Utilities for Headings only, we have six heading types with different font sizes. just add a classes to use ct-h6, ct-h5, ct-h4, ct-h3, ct-h2, ct-h1.

h6. "this" this is a javascript joke
h5. "this" this is a javascript joke

h4. "this" this is a javascript joke

h3. "this" this is a javascript joke

h2. "this" this is a javascript joke

h1. "this" this is a javascript joke


<div class="ct-text-headings">
  <h6 class="ct-h6">h6. "this" this is a javascript joke</h6>
  <h5 class="ct-h5">h5. "this" this is a javascript joke</h5>
  <h4 class="ct-h4">h4. "this" this is a javascript joke</h4>
  <h3 class="ct-h3">h3. "this" this is a javascript joke</h3>
  <h2 class="ct-h2">h2. "this" this is a javascript joke</h2>
  <h1 class="ct-h1">h1. "this" this is a javascript joke</h1>
</div>

Text alignments

Three types of text alignments, use ct-text-start class for align text at start, ct-text-center for center, ct-text-end for end.

"this" this is a javascript joke

"this" this is a javascript joke

"this" this is a javascript joke


<p class="ct-text-start">"this" this is a javascript joke</p>
<p class="ct-text-center">"this" this is a javascript joke</p>
<p class="ct-text-end">"this" this is a javascript joke</p>

Gray Text

Gray text for better reading experience. add ct-text-gray class.

"this" this is a javascript joke.


<p class="ct-text-gray">"this" this is a javascript joke.</p>

Lists

List component is used to display list items. It renders a unorder-lists by default. But we also have some ordered as well as icons with list also.

Simple lists

Simple list components ordered and unorder. use respective classes.

  • Item
  • Item
  • Item
  • Item
  1. Item
  2. Item
  3. Item
  4. Item

<ul class="ct-ul-list">       
 <li>Item</li>            
 <li>Item</li>             
 <li>Item</li>             
 <li>Item</li>             
</ul>
<ol class="ct-ol-list">
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
</ol>

Icon lists

List with icons good to use for better UX to user. add respective classes to ul element.

  • check_circleItem
  • check_circleItem
  • check_circleItem
  • infoItem

<ul class="ct-icon-list">
  <li><span class="material-icons">check_circle</span>Item</li>
  <li><span class="material-icons">check_circle</span>Item</li>
  <li><span class="material-icons">check_circle</span>Item</li>
  <li><span class="material-icons">info</span>Item</li>
</ul>

Stacked lists

Stacked lists are also usefull to display list of users with name, avatar, and status. In that case use our stacked list.

  • User name

    Online

  • User name

    Offline

  • User name

    Online

  • User name

    Online 

<ul class="ct-stacked-list">
<li>
  <img src="img-url" class="ct-round ct-md" alt="fallback"/>
  <div class="ct-list-item"><h4>User name</h4><small>Online</small></div>
</li>
<li>
  <img src="img-url" class="ct-round ct-md" alt="fallback"/>
  <div class="ct-list-item"><h4>User name</h4><small>Offline</small></div>
</li>
<li>
  <img src="img-url" class="ct-round ct-md" alt="fallback"/>
  <div class="ct-list-item"><h4>User name</h4><small>Offline</small></div>
  </li>
<li>
  <img src="img-url" class="ct-round ct-md" alt="fallback"/>
  <div class="ct-list-item"><h4>User name</h4><small>Offline</small></div>
</li>
</ul>

Navigation bar is first and most important component of any website. Without navbar user will not know which brand is it, where to look more and to connect with brand.

Navbar

We are providing the navbar for e-commerce site you can make changes on your own, for your personal use cases. Make sure to copy and check all the classes are same.

  • Link 1

  • Link 2

  • Link 3

  • Link 4

  • Link 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, voluptate dolor sint, id itaque atque odit maxime voluptatibus aut autem dolore eaque eum laudantium nihil molestias ducimus labore expedita exercitationem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus placeat, sunt cumque possimus voluptas unde laborum aperiam, ab aliquid, amet saepe. Ratione enim rerum praesentium reiciendis, dolor impedit harum dolores. 

<nav class="nav-bar">
  <div class="ct-nav-logo"> <h1>Navbar</h1> </div>
    <div class="ct-right-nav"> <div class="nav-searchbar">
        <input type="search" placeholder="Search..." class="ct-input" />
        <button class="ct-btn ct-gray">Search</button>
    </div>
    <div class="ct-nav-user"> <div class="ct-nav-icons"> <div class="basic-badge">
        <span class="material-icons"> shopping_cart </span>
        <span class="badge-pop ct-blue">4</span>
  </div> Cart </div>
  <div class="ct-nav-icons"> <div class="basic-badge">
        <span class="material-icons"> person </span>
  </div> Sign in </div> </div> </div>
</nav>

Modals are a variant of dialog used to present critical information or request user input needed to complete a user’s workflow.

Below is a modal body we are Crafted for you.

Modal title

close

Modal body text goes here.


  <div class="ct-modal">
  <div class="ct-modal-header">
    <h2>Modal title</h2>
    <span class="material-icons">close</span>
  </div>
  <div class="ct-modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="ct-modal-footer">
    <button class="ct-btn ct-blue">Save</button>
    <button class="ct-btn ct-gray">Close</button>
  </div>
</div>

Click on button to watch modal in action. Make sure when you use this modal its position must be absolute to the body.

Modal title

close

Modal body text goes here.


<button class="ct-btn ct-blue ct-modal-btn" id="modal-btn">
  Launch Demo Modal
</button>
---------------------------------------------------------- 
<div class="ct-modal-dialog">
  <div class="ct-modal ct-modal-action" id="ct-modal">
    <div class="ct-modal-header">
      <h2>Modal title</h2>
      <span class="material-icons modal-close">close</span>
    </div>
    <div class="ct-modal-body">
      <p>Modal body text goes here.</p>
    </div>
    <div class="ct-modal-footer">
      <button class="ct-btn ct-blue">Save</button>
      <button class="ct-btn ct-gray">Close</button>
    </div>
  </div>
</div>


JS of component- 
const modalBtn = document.querySelector("#modal-btn");
const ctModal = document.querySelector("#ct-modal");
const ctModalParent = document.querySelector(".ct-modal-dialog");
const modalClose = document.querySelector(".modal-close");
const body = document.querySelector("body");
modalBtn.addEventListener("click", () => {
  ctModal.classList.add("ct-modal-active");
  ctModalParent.classList.add("ct-dialog-active");
});
modalClose.addEventListener("click", () => {
  ctModal.classList.remove("ct-modal-active");
  ctModalParent.classList.remove("ct-dialog-active");
});

Rating.

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.

grade grade grade grade grade 

<div class="ct-rating">
  <a class="ct-star"> <span class="material-icons">grade</span></a>
  <a class="ct-star"> <span class="material-icons">grade</span></a>
  <a class="ct-star"> <span class="material-icons">grade</span></a>
  <a class="ct-star"> <span class="material-icons">grade</span></a>
  <a class="ct-star"> <span class="material-icons">grade</span></a>
</div>


Js code for component -
const ctRating = document.querySelector(".ct-rating");
const ctStar = document.querySelectorAll(".ct-star");
ctStar.forEach((star, index) => {
  star.addEventListener("click", (e) => {
    e.preventDefault();
    ctRating.classList.add("disabled");
    ctStar.forEach((newStar, newIndex) => {
      if (newIndex <= index) {
        newStar.classList.add("active");
      }
    });
  });
});

Toast.

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Simple & Icon toast

Below we have simple toast and toast with icons to use make sure to add classes respectively.

Your draft has been discarded.

Your draft has been archived.


<div class="ct-toast">
  <p>Your draft has been discarded.</p>
</div>
<div class="ct-toast-undo">
  <p>Your draft has been archived.</p>
  <button class="ct-undo">
    <span class="material-icons">unarchive</span>
  </button>
</div>

Toast in action

Make sure to check class names and Javascript file when you are using it in your site.

Message has been sent to your Ex.

close 

<button class="ct-btn ct-blue" id="ct-toast-btn">Show Toast</button>

<div class="ct-toast-undo ct-toast-action">
  <p>Message has been sent to your Ex.</p>
  <a id="ct-undo" class="ct-undo">
  <span class="material-icons">close</span>
  </a>
</div> 


Js code for component -
const toastBtn = document.querySelector("#ct-toast-btn");
const toast = document.querySelector(".ct-toast-action");
const undoBtn = document.querySelector("#ct-undo");
toastBtn.addEventListener("click", () => {
  toast.classList.add("ct-toast-active");
});
undoBtn.addEventListener("click", () => {
  toast.classList.remove("ct-toast-active");
});

Grids

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.

Two col grid

The ct-grid class makes the elements display : grid, and the ct-grid-2 class adds two columns which takes 50%, 50% width of parent element.

Col-1
Col-2

<main class="ct-grid-2 ct-grid">
  <section class="ct-child-1 ct-child">Col-1</section>
  <section class="ct-child-2 ct-child">Col-2</section>
</main>

Three col grid

The ct-grid class makes the elements display : grid, and the ct-grid-3 class adds three columns which takes equal width of parent element.

Col-1
Col-2
Col-3

<main class="ct-grid-3 ct-grid">
  <section class="ct-child-1 ct-child">Col-1</section>
  <section class="ct-child-2 ct-child">Col-2</section>
  <section class="ct-child-3 ct-child">Col-3</section>
</main>

Slider

Sliders allow users to make selections from a range of values.

Two Way slider

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, prices, brightness, or applying image filters. Just copy the below code to use it.

Slider

Min
-
Max 
<main class="ct-slider-wrapper">
  <header class="ct-slider-header">
    <h1>Slider</h1>
  </header>
  <div class="ct-slider-price">
    <div class="ct-slider-field">
      <span>Min</span>
      <input type="number" value="1000" class="ct-slider-input">
    </div>
    <span class="ct-slider-field-saperator">-</span>
    <div class="ct-slider-field">
      <span>Max</span>
      <input type="number" value="10000" class="ct-slider-input">
    </div>
  </div>
  <div class="ct-slider-body">
    <div class="ct-slider-progress"></div>
  </div>
  <div class="ct-slider-range">
    <input type="range" class="ct-range-min ct-range" min="0" max="10000" value="1000" step="100">
    <input type="range" class="ct-range-max ct-range" min="0" max="10000" value="9000" step="100">
  </div>
</main>