alert

The alert component has six variants alert-primary, alert-secondary, alert-danger, alert-info, alert-success and alert-warning

standard alerts

primary: An alert for a message!

secondary: An alert for a message!

danger: An alert for a message!

info: An alert for a message!

success: An alert for a message!

warning: An alert for a message!

<!-- Alert  -->

 <div class="alert alert-primary">
   <strong>primary</strong>: An alert for a message!
 </div>
 <div class="alert alert-secondary">
   <strong>secondary</strong>: An alert for a message!
 </div>
 <div class="alert alert-danger">
   <strong>danger</strong>: An alert for a message!
 </div>

avatar

The avatar component has 5 sizes, avatar-xl, avatar-lg, avatar-md, avatar-sm, avatar-xs, having rd,for round avatar, sq,for square avatar,

standard avatars

<!-- Avatar -->

<span class="avatar av-xl">
  <img src="..." alt="..." class="rd" />
</span>
<span class="avatar av-lg">
  <img src="..." alt="..." class="sq" />
</span>
<span class="avatar av-md">
  <img src="..." alt="..." class="rd" />
</span>

Badge

The Badge component has 5 sizes, av_badge_lg, av_badge_md, av_badge_sm, having 3 states, online, offline, idle,having rd,for round badge, sq,for square badge,

standard badge

<!-- Badge -->

<span class="avatar av-xl">
  <img src="..." alt="..." class="rd" />
  <div
     class="av_badge_lg online rd"
  ></div>
</span>

<span class="avatar av-sm">
  <icon />
  <div
    class="av_badge_sm bell_badge flex-center"
  >
    6
  </div>
</span>

Button

The Button component i.e. btn, comes in two catagories, solid buttons and outlined buttons.

solid Buttons

The Solid button is contained with filled colors inside, has five variants btn-primary, btn-cta, btn-danger, btn-link, btn disabled

<!-- Button Contained-->

<button class="btn btn-primary">primary</button>
<button class="btn btn-cta">button</button>
<button class="btn btn-danger">danger</button>
<button class="btn-link">Link to</button>

Outlined Buttons

The Solid button is Outlined, and has five variants out-primary, out-cta, out-danger, out-success, out-info

<!-- Button Outlined -->

<button class="btn out-primary">primary</button>
<button class="btn out-cta">button</button>
<button class="btn out-danger">danger</button>
<button class="btn out-success">success</button>

icon and floating action Button

The floating action button fa-btn and button with an icon btn-icon,

<!-- icon and floating action button-->

<button class="btn fa-btn">
  <i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>

<button class="btn btn-cta">
  Sign Up
  <i class="fa btn-icon fa-arrow-right" aria-hidden="true"></i>
</button>

Card

The Card component has three variants, 1. basic Card or vertical card, 2. shopping card or horizontal card and 3. pricing card

basic Cards (vertical card)

The basic Card component has 4 catagories, 1. Cards with badges, 2. Cards with dismiss and 3. Cards with text overlay and 4. text only cards

Title

sub-title

Ex ad et excepteur ad qui adipisicing velit excepteur ea. Eiusmod sint proident magna excepteur quis officia ullamco. Cillum exercitation commodo esse aliquip nostrud esse ex tempor ex.

Title

sub-title

Ex ad et excepteur ad qui adipisicing velit excepteur ea. Eiusmod sint proident magna excepteur quis officia ullamco. Cillum exercitation commodo esse aliquip nostrud esse ex tempor ex.

Our Changing Planet

by Kurt Wagner

Tempor ea ad dolor esse eiusmod proident incididunt commodo.

Our Changing Planet

by Kurt Wagner

Do velit dolor labore irure fugiat laboris pariatur nulla. Ut irure laboris commodo voluptate duis tempor eu ad incididunt irure consectetur non veniam adipisicing.

<!-- Card - Basic -->

<div class="card">
  <div class="img"></div>
  <div class="card-content">
    <div class="title">Our Changing Planet</div>
    <div class="sub-title">by Kurt Wagner</div>
    <div class="content">
      Visit ten places on our planet that are undergoing the biggest
      changes today.
    </div>
    <div class="footer flex-center">
      <div class="btn_wrapper flex-center">
        <button class="btn btn-cta">Read</button>
        <button class="btn out-cta">Bookmark</button>
      </div>
      <div class="icons flex-center">
          ....
      </div>
    </div>
  </div>
</div>
</div>

shopping Cards (horizontal cards)

Card are used to show user related data collectively, like product details.

Xbox One Series S

Platform : Xbox One

Go all-digital and enjoy disc-free, next-gen gaming with the smallest Xbox console ever made Xbox game Pass ultimate includes over 100 high-quality games.

m.r.p.: $400

deal of the day: $200

<!-- Card - horizontal -->

<div class="card_hr flex">
  <div class="card_hr_img">
    <img src="..." alt="..." />
  </div>
  <div class="card_hr_content">
    <h2>Xbox One Series S</h2>
    <p class="p-lg"><strong>Platform</strong> : Xbox One</p>
    <p class="card_hr_desc">
      Go all-digital and enjoy disc-free, next-gen gaming with the
      smallest Xbox console ever made Xbox game Pass ultimate
      includes over 100 high-quality games.
    </p>
    <div class="card_hr_price text_cl">
      <div class="p-lg">
        m.r.p.: <span class="text_line_th">$400</span>
      </div>
      <div class="p-lg">
        deal of the day:<span class="h2 dod_price"> $200</span>
      </div>
    </div>
  </div>
  <div class="flex btn_wrapper btn_wrapper_hr">
    <button class="btn out-cta">add to cart</button>
    <button class="btn btn-cta">buy now</button>
  </div>
</div>

pricing Cards

Pricing card is used in subscription plans

$20/month

starter

all limited links
own analytic platform
chat support
optimize hashtag
optimize hashtags
unlimited users

$100/month

pro

all limited links
own analytic platform
chat support
optimize hashtag
optimize hashtags
unlimited users

$200/month

enterprise

all limited links
own analytic platform
chat support
optimize hashtag
optimize hashtags
unlimited users

<!-- Card - pricing -->

<div class="card_pricing card_starter">
  <div class="plan">
    <span class="price h1">$20</span
    ><span class="duration h3">/month</span>
  </div>
  <div class="pack h1">starter</div>
  <hr class="line" />
  <ul class="feature p-lg">
    <li>all limited links</li>
    <li>own analytic platform</li>
    <li>chat support</li>
    <li>optimize hashtag</li>
    <li>optimize hashtags</li>
    <li>unlimited users</li>
  </ul>
</div>

Image

Responsive Image

The Image component has two variants img-res, for full size Responsive image.

<!-- Image Responsive (img_res)  -->

<div class="img_res">
  <img src="..." alt="..." />
</div>

Round and squared Image

The Image component has four variants img-xl, for extra large image, img_lg, for large image, img_md, for medium image, img_sm, for small image. with round rd and square edges sq.

<!-- Image round(rd) and square(sq)  -->

<div class="img_lg">
  <img src="..." alt="..." class="sq" />
</div>
<div class="img_md">
  <img src="..." alt="..." class="rd" />
</div>

input

The input component has two variants input sizes and input type

input sizes

inp_lg, inp_md, inp_sm

input large:

input medium:

input small:

<!-- Image round(rd) and square(sq)  -->

<input class="basic_inp inp_lg" type="text" />
<input class="basic_inp inp_md" type="text" />
<input class="basic_inp inp_sm" type="text" />

input type

The input component has one type i.e. Input error inp_err

input error (inp_err):

<!-- Input error  -->

<input class="inp_lg inp_err" type="text" />

Typography

heading

.h1, .h2, .h3, .h4,

This is heading 1.

This is heading 2.

This is heading 3.

This is heading 4.

<!-- typography - headings  -->

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>

paragraph - gray text

.p, .p-lg, .p-sm,

This is paragraph large. (p-lg)

This is paragraph. (p)

This is paragraph small. (p-sm)

<!-- typography - paragraph  -->

<p class="p-lg">This is paragraph large.</p>
<p class="p">This is paragraph.</p>
<p class="p-sm">This is paragraph small.</p>

text center

.text-center,

This is a paragraph in center.

<!-- typography - text-center  -->


<p class="text-center">This is a paragraph in center.</p>

text styles

Text styles are, text line through .text_line_th , text uppercase .text_uc , and text capitalize .text_cl

This is a line through text.

This is a uppercase text.

This is a capitalize text.

<!-- typography - text styles  -->

<p class="text_line_th">This is a line through text.</p>
<p class="text_uc">This is a uppercase text.</p>
<p class="text_cl">This is a capitalize text.</p>

Modal

Modals are used to show some important information to the user and they are closed only when the user selects some option.

<!-- Modal  -->

<div  class="modal">
  <div class="card card-content modal_box">
    <div class="flex modal_title">
      <div class="title">Modal</div>
      <button class="btn_modal">
        <i
          class="fa fa-times"
          aria-hidden="true"
        ></i>
      </button>
    </div>

    <div class="content">
      Ex ad et excepteur ad qui adipisicing velit excepteur ea.
      Eiusmod .Laboris voluptate ad in nostrud dolore do commodo.
      Eiusmod aliqua dolore aliqua laboris voluptate excepteur
    </div>
    <div class="footer btn_wrapper_cwd flex">
        <button class="btn btn-cta">action 1</button>
        <button class="btn out-cta">action 2</button>
    </div>
  </div>
</div>

List

List style

Item-1
Item-2
Item-3

Item-1
Item-2
Item-3

Item-1
Item-2
Item-3

Item-1
Item-2
Item-3

<!--  List -->
<ul>
  <li>Item-1</li>
  <li>Item-2</li>
  <li>Item-3</li>
</ul>
<ul class="list-circle">
  <li>Item-1</li>
  <li>Item-2</li>
  <li>Item-3</li>
</ul>
<ul class="list-square">
  <li>Item-1</li>
  <li>Item-2</li>
  <li>Item-3</li>
</ul>
<ul class="list-none">
  <li>Item-1</li>
  <li>Item-2</li>
  <li>Item-3</li>
</ul>

List Category

categories-

Clothing
Electronics
Kitchen
Music
Posters
Scuba gear
Sweatshirts

<!-- Category List -->
<ul class="list-item p-lg list-none">
  <div class="catagory h4 text_cl">categories-</div>

  <li>Clothing</li>
  <li>Electronics</li>
  <li>Kitchen</li>
  <li>Music</li>
  <li>Posters</li>
  <li>Scuba gear</li>
  <li>Sweatshirts</li>
</ul>

rating

Rating components can be used as read-only badge or in reviews section. Can be used in reviews section as form too.

<!-- Rating-->

<nav class="h3 wrapper_nav flex">
  <div class="nav_brand_text">Brand text</div>
  <div>Middle Item</div>
  <div>
    <ul class="flex nav_icons list-none">
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
    </ul>
  </div>
</nav>

Navigation

<!-- Navigation -->

<nav class="h3 wrapper_nav flex">
  <div class="nav_brand_text">Brand text</div>
  <div>Middle Item</div>
  <div>
    <ul class="flex nav_icons list-none">
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
    </ul>
  </div>
</nav>

slider

Allows users to make selections from a range of values.

<!-- slider-->

<label for="range"></label>
<input
  type="range"
  min="1"
  max="100"
  value="50"
  class="slider-pixel"
  id="range"
/>

Toast/Notify/Snackbar

Rating components can be used as read-only badge or in reviews section. Can be used in reviews section as form too.

Can't send photo. Retry in 5 seconds.

Your photo has been archived.

This item already has the label "travel". You can add a new label.

<!-- snackbar - leading-->

<div class="snackbar_wrapper sb-leading">
  <div class="sb-text">Your photo has been archived.</div>
  <div><button class="sb-retry">undo</button></div>
  <div><button class="sb-btn cross_leading">x</button></div>
</div>