Installation

Create custome.css stylesheet in your and past below code in it. 

                         
@import 'https://getratha.netlify.app/styles.css';

Or you can download zip file from Github


Typography

Font size of header tags and paragraphs are use rem. Just use class name in your code to get different font sizes.


Header h1-h6 :

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
                    /*Header tag*/
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>
Paragraph :

Paragraph p1

Paragraph p2

Paragraph p3

Paragraph p4

                    /*Paragraph*/
<p class="p1">Paragraph <p1/p>
<p class="p2">Paragraph p2</p>
<p class="p3">Paragraph p3</p>
<p class="p4">Paragraph p4</p>
Colored Text :

grey text

primary text

secondary text

                    /*grey text*/
<p class="text-grey">grey text</p>

/*primary text*/
<p class="text-primary">primary text</p>

/*secondary text*/
<p class="text-secondary">secondary text</p>
Text align :

Text Start

Text Center

Text End

                    /*left / start align text*/
<p class="text-st">Text Start</p>

/*center text*/
<p class="text-md">Text Center</p>

/*right / end align text*/
<p class="text-ed">Text End</p>
Letter Spacing :

spacing-xs

spacing-s

spacing-m

spacing-l

spacing-xl

spacing-xxl


font Weight :

light

regular

semibold

bold

bolder


Round Border :


Avatar

Avatars are images that users can set as their profile picture. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.


Square avatar :
avatar component 50*50
avatar component 50*50
avatar component 50*50
avatar component 50*50
avatar component 50*50
                    /*Square Avatar*/
<div class="avatar avatar-xs"><img class="avatar-img"src="./image/hero-1.jpg" alt="avatar component 50*50"</div>
<div class="avatar avatar-s"><img class="avatar-img"src="./image/hero-2.jpg" alt="avatar component 50*50"</div>
<div class="avatar avatar-m"><img class="avatar-img"src="./image/hero-3.jpg" alt="avatar component 50*50"</div>
<div class="avatar avatar-l"><img class="avatar-img"src="./image/hero-4.jpg" alt="avatar component 50*50"</div>
<div class="avatar avatar-xl"><img class="avatar-img"src="./image/hero-5.jpg" alt="avatar component 50*50"</div>

Round avatar:
round avatar 50*50
round avatar 60*60
round avatar 70*70
round avatar 80*80
round avatar 90*90
                    /*Round Avatar*/
<div class="avatar avatar-xs avatar-rd"><img class="avatar-img"src="./image/hero-1.jpg" alt="round avatar 50*50"></div>
<div class="avatar avatar-s avatar-rd"><img class="avatar-img"src="./image/hero-2.jpg" alt="round avatar 60*60"></div>
<div class="avatar avatar-m avatar-rd"><img class="avatar-img"src="./image/hero-3.jpg" alt="round avatar 70*70"></div>
<div class="avatar avatar-l avatar-rd"><img class="avatar-img"src="./image/hero-4.jpg" alt="round avatar 80*80"></div>
<div class="avatar avatar-xl avatar-rd"><img class="avatar-img"src="./image/hero-5.jpg" alt="round avatar 90*90"></div>

Border avatar :
round avatar 50*50
round avatar 60*60
round avatar 70*70
round avatar 80*80
round avatar 90*90
                    /*Border Avatar*/
<div class="avatar avatar-xs border-dark"><img class="avatar-img" src="./image/hero-1.jpg" alt="round avatar 50*50"></div>
<div class="avatar avatar-s border-dark"><img class="avatar-img"src="./image/hero-2.jpg" alt="round avatar 60*60"></div>
<div class="avatar avatar-m border-danger"><img class="avatar-img"src="./image/hero-3.jpg" alt="round avatar 70*70"></div>
<div class="avatar avatar-l border-success"><img class="avatar-img"src="./image/hero-4.jpg" alt="round avatar 80*80"></div>
<div class="avatar avatar-xl border-info"><img class="avatar-img"src="./image/hero-5.jpg" alt="round avatar 90*90"></div>

Alert

Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.

This is a primary alert—check it out!close

This is a secondary alert—check it out!close

This is a success alert—check it out!close

This is a danger alert—check it out!close

This is a warning alert—check it out!close

This is a info alert—check it out!close

This is a white alert—check it out!close

This is a dark alert—check it out!close

                      /*Alert Section*/

/*Primary Alert*/
<div class="alert alert-primary">
    <p>This is a primary alert—check it out!<span class="material-icons-outlined">close</span></p>
</div>

/*Secondary Alert*/
<div class="alert alert-secondary">
    <p>This is a secondary alert—check it out!<span class="material-icons-outlined">close</span></p>
</div>

/*Success Alert*/
<div class="alert alert-success">
    <p>This is a success alert—check it out!<span class="material-icons-outlined">clos<</span></p>
</div>

/*Danger Alert*/
<div class="alert alert-danger">
    <p>This is a danger alert—check it out!<span class="material-icons-outlined">close</span></p>
</div>

/*Warning Alert*/
>div class="alert alert-warning">
    <p>This is a warning alert—check it out!<span class="material-icons-outlined">close</span></p>
</div>

/*Info Alert*/
<div class="alert alert-info">
    <p>This is a info alert—check it out!<span class="material-icons-outlined">close</span></p>
</div>

/*White Alert*/
<div class="alert alert-dark">
    <p>This is a white alert—check it out!<span class="material-icons-outlined">close</span></p>
</div>

/*Dark Alert*/
<div class="alert alert-dark">
    <p>This is a dark alert—check it out!<span class="material-icons-outlined">close</span></p>
</div>

Badge

Use the Badge Component Symbol to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it.


Icon with a badge on the left


Icon with a badge on the right


Icon with a badge on the right-bottom


Button with a badge on the left


Button with a badge on the right

                    /*Badge Components*/
    Include link in header 
    <link href="//fonts.googleapis.com/css2?family=Material+Icons+Outlined&v=1644152679482" rel="stylesheet">

    /*Icon with a badge on the left*/
    <button class="badge badge-icon">
        <span class="badge-init badge-left">4</span>
        <span class="material-icons-outlined">home</span>
    </button>

    /*Icon with a badge on the right*/
    <button class="badge badge-icon"> 
        <span class="material-icons-outlined">home</span>
        <span class="badge-init badge-right">4</span>
    </button>

    /*Icon with a badge on the right-bottom*/
    <button class="badge badge-icon">
        <span class="material-icons-outlined">home</span>
        <span class="badge-init badge-right-bottom">4</span>
    </button>

    /*Button with a badge on the left*/
    <button class="badge badge-button button-primary"><span class="badge-init badge-left">4</span>home</button>

    /*Button with a badge on the right*/
    <button class="badge badge-button button-secondary">home<span class="badge-init badge-right">4</span></button>

Button

The HTML element represents a clickable button, used to submit ... the user agent runs on, but you can change buttons' appearance with CSS

Link-button 
                    /*Button Component*/
/*Default Button*/
<button class="button">Buttonv/button>
/*Primary Button*/
<button class="button button-primary">Primary Button</button>
/*Secondary Button*/
<button class="button button-secondary">Secondary Button</button>
/*Text with Icon Button*/
<button class="button button-icon"><span class="material-icons-outlined icon">home</span>Text Icon Button</button>
/*Disable Button*/
<button class="button button-disable button-primary" disabled>Disable</button>
/*Danger Button*/
<button class="button button-danger">Delete</button>
/*Success Button*/
<button class="button button-success">Success</button>
/*Info Button*/
<button class="button button-info">Info</button>
/*Fluid Button*/
<button class="button-icon button-primary button-round"><span class="material-icons-outlined icon">add</span></button>
/*Link Button*/
<a class="link button" href="#"L>ink-button</a>

Card

Vertical Card

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.
                    /*Vertical Card*/
<div class="card">
<div class="card__primary-action">
<div class="card__media-column">
<img class="card-img" src="" alt="">
</div>
<div class="card__primary card-text-over text-center">
<h2 class="card__title">Our Changing Planet</h2>
<h3 class="card__subtitle">by Kurt Wagner</h3>
</div>
<div class="card__secondary card-hover card__secondary--space">Visit ten places on our planet that are undergoing the biggest changes today.</div>
</div>
<div class="card__actions">
<div class="card__action-buttons">
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Read</button>
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Bookmark</button>
</div>
<div class="card__action-icons">
<button class="card-icon-button card-hover" aria-pressed="false" aria-label="Add to favorites" title="Add to favorites">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-icon-button card-hover" title="Share" data-mdc-ripple-is-unbounded="true"><ion-icon name="share-social-outline"></ion-icon></button>
<button class="card-icon-button card-hover" title="More options" data-mdc-ripple-is-unbounded="true"><ion-icon name="ellipsis-horizontal-outline"></ion-icon></button>
</div>
</div>
Card with Test Overlay

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.
                    /*Card With Text Over*/
<div class="card">
<div class="card__primary-action">
<div class="card__media-column">
<img class="card-img" src="" alt="">
<div class="card__primary card-text-over card-text-center">
<h2 class="card__title">Our Changing Planet</h2>
<h3 class="card__subtitle">by Kurt Wagner</h3>
</div>
</div>
<div class="card__secondary card-hover card__secondary--space">
Visit ten places on our planet that are undergoing the biggest changes today.</div>
</div>
<div class="card__actions">
<div class="card__action-buttons">
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Read</button>
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Bookmark</button>
</div>
<div class="card__action-icons">
<button class="card-icon-button card-hover" aria-pressed="false" aria-label="Add to favorites" title="Add to favorites">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-icon-button card-hover" title="Share"
 data-mdc-ripple-is-unbounded="true"><ion-icon name="share-social-outline"></ion-icon></button>
<button class="card-icon-button card-hover" title="More options"
 data-mdc-ripple-is-unbounded="true"><ion-icon name="ellipsis-horizontal-outline"></ion-icon></button>
</div>
</div>
Card With Shadow

Our Changing Planet

by Kurt Wagner

                    /*Card With Shadow*/
<div class="card card-shadow">
<div class="card__primary-action card__primary-action-row">
<div class="card__media-row">
<img class="card-img" src="" alt="">
</div>
<div class="card__primary card-hover">
<h2 class="card__title">Our Changing Planet</h2>
<h3 class="card__subtitle">by Kurt Wagner</h3>
</div>
</div>
<div class="card__actions">
<div class="card__action-buttons">
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Read</button>
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Bookmark</button>
</div>
<div class="card__action-icons">
<button class="card-icon-button card-hover" aria-pressed="false" aria-label="Add to favorites" title="Add to favorites">
<ion-icon name="heart"></ion-icon>
</button>
<button class="card-icon-button card-hover" title="Share" data-mdc-ripple-is-unbounded="true"><ion-icon
 name="share-social-outline"></ion-icon></button>
<button class="card-icon-button card-hover" title="More options"
 data-mdc-ripple-is-unbounded="true"><ion-icon name="ellipsis-horizontal-outline"></ion-icon></button>
</div>
</div>
</div>
Card with Dismiss

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.
                    /*Card with Dismiss*/
<div class="card">
<div class="card__primary-action">
<ion-icon name="close-outline" class="badge-up-right-corner card-badge"></ion-icon>
<div class="card__media-column">
<img class="card-img" src="" alt="">
</div>
<div class="card__primary card-text-over text-center">
<h2 class="card__title">Our Changing Planet</h2>
<h3 class="card__subtitle">by Kurt Wagner</h3>
</div>
<div class="card__secondary card-hover card__secondary--space">
Visit ten places on our planet that are undergoing the biggest changes today.</div>
</div>
<div class="card__actions">
<div class="card__action-buttons">
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Read</button>
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Bookmark</button>
</div>
<div class="card__action-icons">
<button class="card-icon-button card-hover" aria-pressed="false" aria-label="Add to favorites" title="Add to favorites">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-icon-button card-hover" title="Share" data-mdc-ripple-is-unbounded="true">
<ion-icon name="share-social-outline"></ion-icon></button>
<button class="card-icon-button card-hover" title="More options" data-mdc-ripple-is-unbounded="true">
<ion-icon name="ellipsis-horizontal-outline"></ion-icon></button>
</div>
</div>
Card with Badges

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.
                    /*Card with Badges*/
<div class="card">
<div class="card__primary-action card__primary-action-column">
<ion-icon name="arrow-back-outline" class="badge-up-left-corner card-badge"></ion-icon>
<ion-icon name="heart-circle-outline" class="badge-up-right-corner card-badge"></ion-icon>
<div class="card__media-column">
<img class="card-img" src="" alt="">
</div>
<div class="card__primary card-text-over text-center">
<h2 class="card__title">Our Changing Planet</h2>
<h3 class="card__subtitle">by Kurt Wagner</h3>
</div>
<div class="card__secondary card-hover card__secondary--space">
Visit ten places on our planet that are undergoing the biggest changes today.</div>
</div>
<div class="card__actions">
<div class="card__action-buttons">
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Read</button>
<button class="card-button card-hover">  <span class="mdc-button__ripple"></span> Bookmark</button>
</div>
<div class="card__action-icons">
<button class="card-icon-button card-hover" aria-pressed="false" aria-label="Add to favorites" title="Add to favorites">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-icon-button card-hover" title="Share" data-mdc-ripple-is-unbounded="true">
<ion-icon name="share-social-outline"></ion-icon></button>
<button class="card-icon-button card-hover" title="More options" data-mdc-ripple-is-unbounded="true">
<ion-icon name="ellipsis-horizontal-outline"></ion-icon></button>
</div>
</div>
Text only card

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.
                    /*Text only card*/
<div class="card card-basic">
<div class="card__primary-action card__primary-action-column card-hover">
<div class="card__primary card-hover">
<h2 class="card__title">Our Changing Planet</h2>
<h3 class="card__subtitle">by Kurt Wagner</h3>
</div>
<div class="card__secondary">
Visit ten places on our planet that are undergoing the biggest changes today.</div>
</div>
</div>
</div>

Image

Image size is inherit from its container or it's parent element.


squire image 
                        /*Squire Image*/
<img class="image" src="" alt="squire image" srcset="">
round image 
                    /*Round Image*/
<img class="image image-round" src="" alt="round image">

Input

Please enter valid username.

Valid username.

                    /*Input Component*/
<form class="form-action" action="">
<label class="input-label" for="username">User Name :</label>
<input class="input-action" type="text" id="userName" name="username" placeholder="Enter user name.." required>
<label class="input-label" for="username">User Name :</label>
<input class="input-action input-danger border-danger" type="text" id="userName" name="username" placeholder="Enter user name.." required>
<p class="input-danger">Please enter valid username.</p>
<label class="input-label" for="username">User Name :</label>
<input class="input-action input-success border-success" type="text" id="userName" name="username" placeholder="Enter user name.." required>
<p class="input-success">Valid username.</p>
</form>

List

Default behaviour of our list tag in list-style-type:none to add style on list we can use following class name.


  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
                    /*Unordered list*/
<ul>
<li class="ul-squire">Unordered list</li>
</ul>
<ul>
<li class="ul-circle">Unordered list</li>
</ul>
<ul>
<li class="ul-fill-circle">Unordered list</li>
</ul>
<ul>
<li class="ul-none">Unordered list</li>
</ul>
  1. order list
  1. order list
  1. order list
  1. order list
  1. order list
  1. order list
                    /*order List*/
<ol>
<li class="ol-dec">order list</li>
</ol>
<ol>
<li class="ol-up-rom">order list</li>
</ol>
<ol>
<li class="ol-low-rom>order list</li>
</ol>
<ol>
<li class="ol-up-alp">order list</li>
</ol>
<ol>
<li class="ol-low-alp">order list</li>
</ol>
<ol>
<li class="ol-none">order list</liv>
</ol>
Notifiacatio Stack list
  • Massege From Omkar

    Notification list Satck

  • Massege From Omkar

    Notification list Satck

  • Massege From Omkar

    Notification list Satck 

                    /*Notification Stack*/
<ul class="ul-none">
<li class="li-stack-border">
&tspan class="li-stack-head">Massege From Omkar</span>
<p class="li-stack-sub">Notification list Satck </p>
</li>
<li class="li-stack-border">
<span class="li-stack-head">Massege From Omkar</span>
<p class="li-stack-sub">Notification list Satck </p>
</li>
<li class="li-stack-border">
<span class="li-stack-head">Massege From Omkar</span>
<p class="li-stack-sub">Notification list Satck </p>
</li>
</ul>

Model

Model is pop-up window which is use for request approvel like below example.


This site use cookies. Do you want to load cookies ?

                        /*Model*/
<section class="model-pop-up bold top-fix">
<p class="p3">This site use cookies. Do you want to load cookies ?</p>
<div class="flex-end">
<button class="button button-danger">Decline</button>
<button class="button button-secondary">Accept</button>
</div>
</section>

Rating


  • star_rate
  • star_rate
  • star_rate
  • star_rate
  • star_rate 
                        /*Rating*/
<ul class="flex">
<li><span class="material-icons-outlined checked">
star_rate
</span></li>
<li><span class="material-icons-outlined checked">
star_rate
</span></li>
<li><span class="material-icons-outlined checked">
star_rate
</span></li>
<li><span class="material-icons-outlined un-checked">
star_rate
</span></li>
<li><span class="material-icons-outlined un-checked">
star_rate
</span></li>
</ul>

Snackbar

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons


Product add to Cart.

                        /*Snackbar*/
<section class="snackbar">
<p class="p3 bold snackbar-msg">Product add to Cart.</p>
</section>

Snackbar

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 with 2 items

Our Changing Planet

by Kurt Wagner


Grid with 3 items

Our Changing Planet

by Kurt Wagner

Our Changing Planet

by Kurt Wagner

                        /*Grid*/
/*Grid with 2 items*/
<div class="grid col-2">
<div> Grid Item </div>
<div> Grid Item </div>
</div>

/*Grid with 3 items*/
<div class="grid col-3">
<div> Grid Item </div>
<div> Grid Item </div>
<div> Grid Item </div>
</div>
                    
                

                    < Made by @Omkar Chaskar >