# Importing in Html


<!-- ##### 
IMPORTING WITH HTML
For importing the library from the html copy this code inside the head tag of your html
#### -->
<link rel="stylesheet" href="https://alpha-dark-ui.netlify.app/css/styles.css">

# Importing in CSS


                
/* ##### 
IMPORTING WITH CSS
For importing the library from the css copy this code at the top of your css file 
#### */
@import url("https://alpha-dark-ui.netlify.app/css/styles.css");

# Headings

Hello world

Class	Font-size	Line-height
h1	4.8rem	6.4rem
h2	3.2rem	4rem
h3	2.4rem	3.2rem
h4	1.6rem	2.4rem
h5	1.2rem	1.6rem
h6	0.8rem	1.2rem

# Grey Texts

color-grey

color-light-grey-1

color-light-grey-2

color-dark-grey-1

color-dark-grey-2

# Text aligns

Class	text-align
text-center	center
text-left	left
text-right	right

# Paragraphs

Hello texts

Class	Font-size	Line-height
text-1	4.8rem	6.4rem
text-2	3.2rem	4rem
text-3	2.4rem	3.2rem
text-4	1.6rem	2.4rem
text-5	1.2rem	1.6rem
text-6	0.8rem	1.2rem

# Font-weight

Hello world

Class	Font-weight
light	100
regular	200
semibold	400
bold	600
ultrabold	700

# Margins

Class	Margin
m-1	1rem
m-2	2rem
m-4	4rem
m-6	6rem
m-8	8rem

# Paddings

Class	Padding
p-1	1rem
p-2	2rem
p-4	4rem
p-6	6rem
p-8	8rem

# Border-radius

Class	Radius
rounded-s	0.5rem
rounded-m	1rem
rounded-l	1.5rem
rounded-f	50%

# Avatar

# Avatar Basic


                
<!-- ##### AVATAR : small #### -->
<div class="avatar__basic-s rounded-f">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

<!-- ##### AVATAR : medium #### -->
<div class="avatar__basic-m rounded-f">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

<!-- ##### AVATAR : large #### -->
<div class="avatar__basic-l rounded-f">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

<!-- ##### AVATAR : extra-large #### -->
<div class="avatar__basic-xl rounded-f">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

# Avatar Variants


<!-- ##### 
AVATAR : small rounded border 
#### -->
<div class="avatar__basic-l rounded-s">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

<!-- ##### 
AVATAR : medium rounded border 
#### -->
<div class="avatar__basic-l rounded-m">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

<!-- ##### 
AVATAR : large rounded border 
#### -->
<div class="avatar__basic-l rounded-l">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

<!-- ##### 
AVATAR : full rounded border
#### -->
<div class="avatar__basic-l rounded-f">
  <img
    class="avatar__img"
    src="https://i.pravatar.cc/300"
    srcset="
      https://i.pravatar.cc/300 1x,
      https://i.pravatar.cc/300 2x
    "
    alt="face demo"
  />
</div>

# Avatar Text/Icon

AT


<!-- ##### 
AVATAR TEXT / ICONS 
Icons are from linea fonts which comes integrated with this library . 
#### -->
<div class="avatar__text-m rounded-f bg-pink">
  <h2 class="h2">AT</h2>
</div>
<div class="avatar__text-m rounded-s bg-alpha">
  <h2 class="h2">AT</h2>
</div>
<div class="avatar__text-m rounded-l bg-red">
  <i
    class="feature-box__icon icon-basic-world h1 flex justify-center items-center"
  ></i>
</div>
<div class="avatar__text-m rounded-f bg-orange">
  <i
    class="feature-box__icon icon-basic-compass h1 flex justify-center items-center"
  ></i>
</div>

# Alerts

# Alert Basic

This is an error alert — check it out !

✖

This is a warning alert — check it out!

✖

This is an info alert — check it out!

✖

This is a success alert — check it out!

✖


<!-- ##### 
COMPONENT BLOCK : ALERTS BASIC
#### -->

<div class="alert__basic-error h4 rounded-s">
  <i class="fas fa-exclamation alert__icon"></i>
  <p class="alert__text">
    This is an error alert — check it out !
  </p>
  <span class="alert__close">✖</span>
</div>

<div class="alert__basic-warning h4 rounded-s">
  <i class="fas fa-exclamation-triangle alert__icon"></i>
  <p class="alert__text">
    This is a warning alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>

<div class="alert__basic-info h4 rounded-s">
  <i class="fas fa-info-circle alert__icon"></i>
  <p class="alert__text">
    This is an info alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>

<div class="alert__basic-success h4 rounded-s">
  <i class="fas fa-check-circle alert__icon"></i>
  <p class="alert__text">
    This is a success alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>

# Alert Outline

This is an error alert — check it out !

✖

This is a warning alert — check it out!

✖

This is an info alert — check it out!

✖

This is a success alert — check it out!

✖


<!-- ##### 
COMPONENT BLOCK : ALERTS OUTLINE
#### -->
<div class="alert__outline-error h4 rounded-s">
  <i class="fas fa-exclamation alert__icon"></i>
  <p class="alert__text">
    This is an error alert — check it out !
  </p>
  <span class="alert__close">✖</span>
</div>
<div class="alert__outline-warning h4 rounded-s">
  <i class="fas fa-exclamation-triangle alert__icon"></i>
  <p class="alert__text">
    This is a warning alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>
<div class="alert__outline-info h4 rounded-s">
  <i class="fas fa-info-circle alert__icon"></i>
  <p class="alert__text">
    This is an info alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>
<div class="alert__outline-success h4 rounded-s">
  <i class="fas fa-check-circle alert__icon"></i>
  <p class="alert__text">
    This is a success alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>

# Alert Fill

This is an error alert — check it out !

✖

This is a warning alert — check it out!

✖

This is an info alert — check it out!

✖

This is a success alert — check it out!

✖


<!-- ##### 
COMPONENT BLOCK : ALERTS FILL
#### -->
<div class="alert__fill-error h4 rounded-s">
  <i class="fas fa-exclamation alert__icon"></i>
  <p class="alert__text">
    This is an error alert — check it out !
  </p>
  <span class="alert__close">✖</span>
</div>
<div class="alert__fill-warning h4 rounded-s">
  <i class="fas fa-exclamation-triangle alert__icon"></i>
  <p class="alert__text">
    This is a warning alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>
<div class="alert__fill-info h4 rounded-s">
  <i class="fas fa-info-circle alert__icon"></i>
  <p class="alert__text">
    This is an info alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>
<div class="alert__fill-success h4 rounded-s">
  <i class="fas fa-check-circle alert__icon"></i>
  <p class="alert__text">
    This is a success alert — check it out!
  </p>
  <span class="alert__close">✖</span>
</div>

# Badges

Letters	Size
s	0.8rem
m	1.2rem
l	1.6rem
xl	2rem

# Badge Icon


<!-- ##### 
BADGES BASICS ICONS
#### -->

<i
  class="feature-box__icon icon-basic-cloud badge__basic-icon-xl h1"
></i>
<i
  class="feature-box__icon icon-basic-folder-multiple badge__basic-icon-l h2"
></i>
<i
  class="feature-box__icon icon-basic-mail badge__basic-icon-m h3"
></i>
<i
  class="feature-box__icon icon-basic-message badge__basic-icon-s h4"
></i>

# Badge Text

TEXT


<!-- ##### 
BADGES BASICS TEXT
#### -->

<h1 class="h1 badge__basic-text-xl">TEXT</h1>
<h2 class="h2 badge__basic-text-l">TEXT</h2>
<h3 class="h3 badge__basic-text-m">TEXT</h3>
<h4 class="h4 badge__basic-text-s">TEXT</h4>

# Badge Content

TEXT


<!-- ##### 
BADGES BASICS CONTENT
#### -->

<i
class="feature-box__icon icon-basic-server2 badge__basic-content-xl h1"
></i>
<i
class="feature-box__icon icon-basic-todolist-pen badge__basic-content-l h2"
></i>
<i
class="feature-box__icon icon-basic-rss badge__basic-content-m h3"
></i>
<h3 class="badge__basic-content-s h3">TEXT</h3>

# Buttons

# Button Types

text contained outlined link


<!-- ##### 
COMPONENT BLOCK : BUTTON TEXT
#### -->

<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__alpha-text"
>
  text
</a>

<!-- ##### 
COMPONENT BLOCK : BUTTON CONTAINED
#### -->

<a
  href="#"
  class="uppercase h4 btn--medium rounded-s bg-alpha btn__alpha-contained"
>
  contained
</a>

<!-- ##### 
COMPONENT BLOCK : BUTTON OUTLINE 
#### -->

<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__alpha-outlined border-solid border-m border-alpha"
>
  outlined
</a>

<!-- ##### 
COMPONENT BLOCK : BUTTON LINK 
#### -->

<a href="#" class="captilize h4 btn--medium btn__alpha-link">
  link
</a>

# Button Sizes

small medium large


<!-- ##### 
COMPONENT BLOCK : BUTTON SIZES
#### -->

<a
  href="#"
  class="uppercase h4 btn--small rounded-s bg-alpha"
>
  small
</a>
<a
  href="#"
  class="uppercase h4 btn--medium rounded-s bg-alpha"
>
  medium
</a>
<a
  href="#"
  class="uppercase h4 btn--large rounded-s bg-alpha"
>
  large
</a>

# Button Styles

Primary Secondary Success Danger Warning Info Light


<!-- ##### 
COMPONENT BLOCK : BUTTON BASIC
#### -->

<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__basic-primary"
>
  Primary
</a>
<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__basic-secondary"
>
  Secondary
</a>
<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__basic-success"
>
  Success
</a>
<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__basic-danger"
>
  Danger
</a>
<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__basic-warning"
>
  Warning
</a>
<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__basic-info"
>
  Info
</a>
<a
  href="#"
  class="uppercase h4 btn--medium rounded-s btn__basic-light"
>
  Light
</a>

# Button Icons


<!-- ##### 
COMPONENT BLOCK : BUTTON ICONS
#### -->

<a
  href="#"
  class="uppercase h4 icon btn__icon-s rounded-f bg-alpha"
  data-icon="W"
>
</a>
<a
  href="#"
  class="uppercase h3 icon btn__icon-m rounded-f bg-alpha"
  data-icon="W"
>
</a>
<a
  href="#"
  class="uppercase h2 icon btn__icon-l rounded-f bg-alpha"
  data-icon="W"
>
</a>
<a
  href="#"
  class="uppercase h1 icon btn__icon-xl rounded-f bg-alpha"
  data-icon="W"
>
</a>

# Button Floating Actions

Get Started
Typography
Utilities
Components
Layouts


<!-- ##### 
COMPONENT BLOCK : BUTTON FLOATING ACTION
#### -->

<label class="btn__floating__action h4 bg-black-1 border-m border-purple border-solid box-shadow rounded-f fixed" for="action__input">
  <input type="checkbox" class="action__input" id="action__input" />
  <span class="fa-thin fa-angle-up action__logo color-purple"></span>
  
  <ul class="action__options w-max p-2 rounded-m bg-black-1 absolute">
    <li class="action__list h4 color-white">Get Started</li>
    <li class="action__list h4 color-white">Typography</li>
    <li class="action__list h4 color-white">Utilities</li>
    <li class="action__list h4 color-white">Components</li>
    <li class="action__list h4 color-white">Layouts</li>
  </ul>
</label>

# Cards

# Card Types

Our Changing planet

by kurt Wagner

Lorem ipsum dolor sit amet consectetur adipisicing elit. At deserunt pariatur dolorum sit quod possimus molestias accusamus corporis accusantium.

READ BOOKMARK


<!-- ##### 
COMPONENT BLOCK : CARDS
#### -->

<!-- ##### 
Change the class name of this main container
 to change the layout 

<div class="card card__basic">
<div class="card card__basic__header">
<div class="card card__basic__text-over-media">
<div class="card card__basic__only-buttons">
<div class="card card__basic__only-icons">
<div class="card card__horizontal-image-and-text">
#### -->

<div class="card card__basic">
  <div class="card__content-box">
    <img src="https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg" alt="Card Image" class="card__content-box--image"></img>
    <div class="card__heading p-1 m-1">
      <h1
        class="card__heading--main h3 color-black bold"
      >
        Our Changing planet
      </h1>
      <h2
        class="card__heading--sub h4 semibold color-light-grey-2"
      >
        by kurt Wagner
      </h2>
    </div>
    <p class="card__text text-3 m-1 p-1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. At deserunt pariatur dolorum sit quod possimus molestias accusamus corporis accusantium.
    </p>
  </div>
  <div class="card__links">
    <div class="card__buttons p-1">
      <a href="#" class="card__button btn__alpha-text color-purple h4 semibold p-1 rounded-s"> READ </a>
      <a href="#" class="card__button btn__alpha-text color-purple h4 semibold p-1 rounded-s"> BOOKMARK </a>
    </div>

    <div class="card__icons">
      <a href="#" class="card__icons--heart">
        <i class="far fa-heart"></i>
      </a>
      <a href="#" class="card__icons--share">
        <i class="fas fa-share-alt"></i>
      </a>
      <a href="#" class="card__icons--options">
        <i class="fas fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</div>

# Card Badges

Latest

Hello world

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.

NEW

Hello world

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.

NEW

Hello world

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.

50%

Hello world

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.


<!-- ##### 
COMPONENT BLOCK : CARD BADGES 
#### -->

<!-- card__badge__basic -->
<div class="card_with_badges color-white flex flex-col justify-end items-center p-1 rounded-s">
  <div class="card__badge__basic absolute w-max h4 color-black bg-orange p-1 rounded-s bold box-shadow">Latest</div>
  <h2 class="h2 my-2 w-full pl-1">Hello world </h2>
  <p class="text-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.</p>
</div>

<!-- card__badge__right-point -->
<div class="card_with_badges color-white flex flex-col justify-end items-center p-1 rounded-s">
  <div class="card__badge__right-point absolute w-max h4 color-black bg-orange p-1 bold box-shadow">NEW</div>
  <h2 class="h2 my-2 w-full pl-1">Hello world </h2>
  <p class="text-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.</p>
</div>

<!-- card__badge__left-point -->
<div class="card_with_badges color-white flex flex-col justify-end items-center p-1 rounded-s">
  <div class="card__badge__left-point  absolute w-max h4 color-black bg-orange p-1 bold box-shadow">NEW</div>
  <h2 class="h2 my-2 w-full pl-1">Hello world </h2>
  <p class="text-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.</p>
</div>

<!-- card__badge__nonagon -->
<div class="card_with_badges color-white flex flex-col justify-end items-center p-1 rounded-s">
  <div class="card__badge__nonagon absolute w-max h4 color-black bg-orange p-1 rounded-s bold box-shadow">50%</div>
  <h2 class="h2 my-2 w-full pl-1">Hello world </h2>
  <p class="text-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sint ipsa corrupti nesciunt maxime quas? Voluptatum non magni quos error corporis.</p>
</div>

# Snackbar

#Snackbar Types

Something went worng . . .

Reset ✖

Snackbar careted successfully!

✖

Could not do the thing

✖

Alert! Something is happening that you may not expect!

✖

Heres some info for you

✖


<!-- ##### 
COMPONENT BLOCK : SNACKBARS
#### -->

<!-- COMPONENT BLOCK : SNACKBAR BASIC -->
<div class="w-max max-w-screen p-1 flex justify-center align-center flex-row flex-nowrap py-1 bg-dark-grey-1 rounded-s">
  <p class="pr-2 text-4 ">Something went worng . . .</p>
  <a href="#" class="color-purple underline  h4">Reset</a>
  <span class=" h4 h-max w-max pl-2 pointer color-white">✖</span>
</div>

<!-- COMPONENT BLOCK : SNACKBAR SUCCESS -->
<div class="snackbar__success w-max max-w-screen p-1 flex justify-center align-center flex-row flex-nowrap py-1 bg-dark-grey-1 rounded-s relative overflow-hide">
  <p class="pl-1 pr-2 text-4 ">Snackbar careted successfully!</p>
  <span class=" h4 h-max w-max pl-2 pointer color-white">✖</span>
</div>

<!-- COMPONENT BLOCK : SNACKBAR DANGER -->
<div class="snackbar__danger w-max max-w-screen p-1 flex justify-center align-center flex-row flex-nowrap py-1 bg-dark-grey-1 rounded-s relative overflow-hide">
  <p class="pl-1 pr-2 text-4 ">Could not do the thing</p>
  <span class=" h4 h-max w-max pl-2 pointer color-white">✖</span>
</div>

<!-- COMPONENT BLOCK : SNACKBAR WARNING -->
<div class="snackbar__warning w-max max-w-screen p-1 flex justify-center align-center flex-row flex-nowrap py-1 bg-dark-grey-1 rounded-s relative overflow-hide">
  <p class="pl-1 pr-2 text-4 ">Alert!  Something is happening that you may not expect!</p>
  <span class=" h4 h-max w-max pl-2 pointer color-white">✖</span>
</div>

<!-- COMPONENT BLOCK : SNACKBAR INFO -->
<div class="snackbar__info w-max max-w-screen p-1 flex justify-center align-center flex-row flex-nowrap py-1 bg-dark-grey-1 rounded-s relative overflow-hide">
  <p class="pl-1 pr-2 text-4 ">Heres some info for you</p>
  <span class=" h4 h-max w-max pl-2 pointer color-white">✖</span>
</div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis qui nesciunt quam, dolore quaerat fugiat, sapiente laboriosam dicta fuga consequatur, hic labore pariatur accusantium consectetur culpa! Sunt tenetur libero vel?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis qui nesciunt quam, dolore quaerat fugiat, sapiente laboriosam dicta fuga consequatur, hic labore pariatur accusantium consectetur culpa! Sunt tenetur libero vel? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis qui nesciunt quam, dolore quaerat fugiat, sapiente laboriosam dicta fuga consequatur, hic labore pariatur accusantium consectetur culpa! Sunt tenetur libero vel?


<!-- ##### 
COMPONENT BLOCK : MODALS
#### -->


<!-- MODAL BASIC LARGE -->
<div class="modal__basic modal__large bg-black-1 box-shadow rounded-s p-1">
  <div class="modal__header flex justify-between align-center ">
    <h2 class="h2 p-1">Modal Title</h2>
    <button class=" h3 btn--small h-max w-max rounded-s btn__alpha-text pointer bg-black-1 color-white">✖</button>
  </div>
  <div class="modal__main p-1">
    <p class="p2 w-full text-left text-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis qui nesciunt quam, dolore quaerat fugiat, sapiente laboriosam dicta fuga consequatur, hic labore pariatur accusantium consectetur culpa! Sunt tenetur libero vel?</p>
  </div>
  <div class="modal__footer flex justify-end align-center gap-1 p-1">
    <button
    class="uppercase h5 btn--small rounded-s btn__basic-secondary color-white "
    >
    Close
  </button>
  <button
    class="uppercase h5 btn--small rounded-s btn__basic-primary color-white "
  >
    Save Changes
  </button>
  </div>
</div>


<!-- MODAL SCROLL SMALL -->
<div class="modal__scroll modal__small bg-black-1 box-shadow rounded-s p-1">
  <div class="modal__header flex justify-between align-center ">
    <h2 class="h2 p-1">Modal Title</h2>
    <button class=" h3 btn--small h-max w-max rounded-s btn__alpha-text pointer bg-black-1 color-white">✖</button>
  </div>
  <div class="modal__main p-1 overflow-y-auto ">
    <p class="p2 w-full text-left text-4 ">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis qui nesciunt quam, dolore quaerat fugiat, sapiente laboriosam dicta fuga consequatur, hic labore pariatur accusantium consectetur culpa! Sunt tenetur libero vel?
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis qui nesciunt quam, dolore quaerat fugiat, sapiente laboriosam dicta fuga consequatur, hic labore pariatur accusantium consectetur culpa! Sunt tenetur libero vel?
    </p>
  </div>
  <div class="modal__footer flex justify-end align-center gap-1 p-1">
    <button
    class="uppercase h5 btn--small rounded-s btn__basic-secondary color-white "
    >
    Close
  </button>
  <button
    class="uppercase h5 btn--small rounded-s btn__basic-primary color-white "
  >
    Save Changes
  </button>
  </div>
</div>

# Images

# Responsive Images


<!-- ##### 
COMPONENT BLOCK : IMAGE RESPONSIVE 
#### -->

<img src="https://source.unsplash.com/random/500x500" alt="random demo image" class="w-full object-cover ">

# Rounded Images


<!-- ##### 
COMPONENT BLOCK : IMAGE ROUNDED 
#### -->

<img src="https://source.unsplash.com/random/500x500" alt="random demo image" class="w-full object-cover rounded-l mb-2">
<img src="https://source.unsplash.com/random/500x500" alt="random demo image" class="w-full object-cover rounded-f">

# Inputs

# Text Inputs

Full name

Email

Must be a valid email address.

Password

Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.


<!-- ##### 
COMPONENT BLOCK : TEXT INPUTS  
#### -->
<div class="input__text-group">
  <input
  type="text"
  class="input__text-input"
  placeholder="Full Name"
  id="name"
  required
  />
  <label for="name" class="input__text-label">Full name</label>
</div>

<div class="input__text-group">
  <input
    type="email"
    class="input__text-input"
    placeholder="Email address"
    id="email"
    required
  />
  <label for="email" class="input__text-label">Email</label>
  <div class="h5 input__error color-red"><i>Must be a valid email address.</i></div>
</div>

<div class="input__text-group">
  <input
    type="password"
    class="input__text-input"
    placeholder="Password"
    id="email"
    required
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" 
  />
  <label for="email" class="input__text-label">Password</label>
  <div class="h5 input__error color-red"><i>Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.</i></div>
</div>

# Radio Inputs

Radio Input 1

Radio Input 2


<!-- ##### 
COMPONENT BLOCK : RADIO INPUTS  
#### -->

<div class="input__radio-group mt-1">
  <input
    type="radio"
    class="input__radio-input"
    id="small"
    name="size"
  />
  <label for="small" class="input__radio-label h4 color-purple">
    <span class="input__radio-button"></span>
    Radio Input 1
  </label>
</div>

<div class="input__radio-group">
  <input
    type="radio"
    class="input__radio-input"
    id="large"
    name="size"
  />
  <label for="large" class="input__radio-label h4 color-purple">
    <span class="input__radio-button"></span>
    Radio Input 2
  </label>
</div>

# Range Inputs

Price


<!-- ##### 
COMPONENT BLOCK : RANGE INPUTS  
#### -->

<label for="priceRange" class="input__range-label h3 mb-2 w-full ml-1 ">Price</label>
<input
  type="range"
  min="0"
  max="1000"
  value="50"
  step="250"
  list="tickmarks"
  id="priceRange"
  class="input__range-input mt-1 mb-1"
/>
<datalist id="tickmarks" class="input__range-datalist h5 color-grey flex justify-between">
  <option>0</option>
  <option>250</option>
  <option>500</option>
  <option>750</option>
  <option>1000</option>
</datalist>

# Lists

# Spaced Lists

Simple Lists

⇒ Item 1
⇒ Item 2
⇒ Item 3
⇒ Item 4

Simple Lists

⇒ Item 1
⇒ Item 2
⇒ Item 3
⇒ Item 4


<!-- ##### 
COMPONENT BLOCK : SPACED LISTS  
#### -->
<ul class="w-max bg-black-1 p-1 flex justify-center items-start flex-col gap-1 rounded-m box-shadow">
  <h2 class="h3 color-purple">
    Simple Lists
  </h2>
  <li class="list__item w-full h4 color-pink">⇒ Item 1</li>
  <li class="list__item w-full h4 color-pink">⇒ Item 2</li>
  <li class="list__item w-full h4 color-pink">⇒ Item 3</li>
  <li class="list__item w-full h4 color-pink">⇒ Item 4</li>
</ul>
<ul class="w-max bg-black-1 p-1 flex justify-center items-start flex-col gap-1 rounded-m box-shadow">
  <h2 class="h3 color-purple">
    Simple Lists
  </h2>
  <li class="list__item w-full h4 color-pink">⇒ Item 1</li>
  <li class="list__item w-full h4 color-pink">⇒ Item 2</li>
  <li class="list__item w-full h4 color-pink">⇒ Item 3</li>
  <li class="list__item w-full h4 color-pink">⇒ Item 4</li>
</ul>

# Stacked Lists

Stacked Lists

⇒ Item 1
⇒ Item 2
⇒ Item 3
⇒ Item 4

Stacked Lists

⇒ Item 1
⇒ Item 2
⇒ Item 3
⇒ Item 4

Stacked Lists

⇒ Item 1
⇒ Item 2
⇒ Item 3
⇒ Item 4

Stacked Lists

⇒ Item 1
⇒ Item 2
⇒ Item 3
⇒ Item 4


<!-- ##### 
COMPONENT BLOCK : STACKED LISTS  
#### -->
<ul class="list__stack w-max flex justify-center items-start flex-col gap-1 rounded-m ">
  <h2 class="h3 color-red">
    Stacked Lists
  </h2>
  <li class="list__item w-full h4 color-orange">⇒ Item 1</li>
  <li class="list__item w-full h4 color-orange">⇒ Item 2</li>
  <li class="list__item w-full h4 color-orange">⇒ Item 3</li>
  <li class="list__item w-full h4 color-orange">⇒ Item 4</li>
</ul>
<ul class="list__stack w-max flex justify-center items-start flex-col gap-1 rounded-m ">
  <h2 class="h3 color-alpha">
    Stacked Lists
  </h2>
  <li class="list__item w-full h4 color-purple">⇒ Item 1</li>
  <li class="list__item w-full h4 color-purple">⇒ Item 2</li>
  <li class="list__item w-full h4 color-purple">⇒ Item 3</li>
  <li class="list__item w-full h4 color-purple">⇒ Item 4</li>
</ul>
<ul class="list__stack w-max flex justify-center items-start flex-col gap-1 rounded-m ">
  <h2 class="h3 color-red">
    Stacked Lists
  </h2>
  <li class="list__item w-full h4 color-orange">⇒ Item 1</li>
  <li class="list__item w-full h4 color-orange">⇒ Item 2</li>
  <li class="list__item w-full h4 color-orange">⇒ Item 3</li>
  <li class="list__item w-full h4 color-orange">⇒ Item 4</li>
</ul>
<ul class="list__stack w-max flex justify-center items-start flex-col gap-1 rounded-m ">
  <h2 class="h3 color-alpha">
    Stacked Lists
  </h2>
  <li class="list__item w-full  h4 color-purple">⇒ Item 1</li>
  <li class="list__item w-full  h4 color-purple">⇒ Item 2</li>
  <li class="list__item w-full  h4 color-purple">⇒ Item 3</li>
  <li class="list__item w-full  h4 color-purple">⇒ Item 4</li>
</ul>

# Navigation

# Desktop Simple


<!-- ##### 
COMPONENT BLOCK : DESKTOP NAVIGATION 
#### -->

<nav class="alpha__nav p-1 flex justify-between items-center flex-wrap gap-1">
  <h2 class="alpha__nav--logo h3">
    <a href="#" class="alpha__nav--logo-main">ALPHA</a>
     UI
  </h2>

  <div class="h4 flex justify-end items-center gap-2 pr-1 color-white">
    <a href="#">
      <i class="fas fa-envelope "> mail</i>
    </a>
      <a href="#">
      <i class="fab fa-twitter "> twitter</i>
    </a>
      <a href="#">
      <i class="fab fa-github "> github</i> 
    </a>
  </div>
</nav>

# Floating Grid Layouts

Col 1 of 2

Col 1 of 3

Col 2 of 3

Col 1 of 4

Col 2 of 4

Col 1 of 4

Col 3 of 4


<!-- ##### 
COMPONENT BLOCK : Floating Grid Layouts
#### -->

<div class="row">
  <div class="col-1-0f-2 p-1 bg-orange text-center rounded-s">Col 1 of 2</div>
  <div class="col-1-0f-2 p-1 bg-orange text-center rounded-s">Col 1 of 2</div>
</div>
<div class="row">
  <div class="col-1-0f-3 p-1 bg-orange text-center rounded-s">Col 1 of 3</div>
  <div class="col-1-0f-3 p-1 bg-orange text-center rounded-s">Col 1 of 3</div>
  <div class="col-1-0f-3 p-1 bg-orange text-center rounded-s">Col 1 of 3</div>
</div>
<div class="row">
  <div class="col-1-0f-3 p-1 bg-orange text-center rounded-s">Col 1 of 3</div>
  <div class="col-2-0f-3 p-1 bg-orange text-center rounded-s">Col 2 of 3</div>
</div>
<div class="row">
  <div class="col-1-0f-4 p-1 bg-orange text-center rounded-s">Col 1 of 4</div>
  <div class="col-1-0f-4 p-1 bg-orange text-center rounded-s">Col 1 of 4</div>
  <div class="col-1-0f-4 p-1 bg-orange text-center rounded-s">Col 1 of 4</div>
  <div class="col-1-0f-4 p-1 bg-orange text-center rounded-s">Col 1 of 4</div>
</div>
<div class="row">
  <div class="col-1-0f-4 p-1 bg-orange text-center rounded-s">Col 1 of 4</div>
  <div class="col-1-0f-4 p-1 bg-orange text-center rounded-s">Col 1 of 4</div>
  <div class="col-2-0f-4 p-1 bg-orange text-center rounded-s">Col 2 of 4</div>
</div>
<div class="row">
  <div class="col-1-0f-4 p-1 bg-orange text-center rounded-s">Col 1 of 4</div>
  <div class="col-3-0f-4 p-1 bg-orange text-center rounded-s">Col 3 of 4</div>
</div>

# Grid Layouts

# Grid 2 Columns Layout

Grid Items


<!-- ##### 
COMPONENT BLOCK : Grid 2 Columns Layout 
#### -->

<div class="grid grid-2 gap-2 w-full max-w-screen">
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
</div>

# Grid 3 Columns Layout

Grid Items


<!-- ##### 
COMPONENT BLOCK : Grid 3 Columns Layout 
#### -->

<div class="grid grid-3 gap-2 w-full max-w-screen">
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
  <div class="h4 bg-yellow color-black-1 text-center w-full p-1 rounded-s">Grid Items</div>
</div>

# The Holy Grail Layout

Header

Navbar

Article

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ut distinctio corporis laborum voluptate itaque hic est quo suscipit placeat, dolorem eligendi, sunt cupiditate minus repellat obcaecati autem magni facere.

Aside

Footer


<!-- ##### 
COMPONENT BLOCK : Grid 3 Columns Layout 
#### -->

<div class="grid grid-holy gap-1 w-full max-w-screen">
  <div class="h4 holy__header bg-orange text-center w-full p-1">
    Header
  </div>
  <div class="h4 holy__nav bg-blue-1 text-center w-full p-1">
    Navbar
  </div>
  <div class="h4 holy__article bg-light-green-1 text-center w-full p-1">
    Article

    <p class="my-1 text-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ut distinctio corporis laborum voluptate itaque hic est quo suscipit placeat, dolorem eligendi, sunt cupiditate minus repellat obcaecati autem magni facere.</p>
  </div>
  <div class="h4 holy__aside bg-pink text-center w-full p-1">
    Aside
  </div>
  <div class="h4 holy__footer bg-yellow text-center w-full p-1">
    Footer
  </div>
</div>

V 1.0

# Importing in Html

# Importing in CSS

# Headings

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

# Grey Texts

# Text aligns

# Paragraphs

# Font-weight

Hello world

Hello world

Hello world

Hello world

Hello world

# Margins

# Paddings

# Border-radius

# Avatar

# Avatar Basic

# Avatar Variants

# Avatar Text/Icon

AT

AT

# Alerts

# Alert Basic

# Alert Outline

# Alert Fill

# Badges

# Badge Icon

# Badge Text

TEXT

TEXT

TEXT

TEXT

# Badge Content

TEXT

# Buttons

# Button Types

# Button Sizes

# Button Styles

# Button Icons

# Button Floating Actions

# Cards

# Card Types

Our Changing planet

by kurt Wagner

# Card Badges

Hello world

Hello world

Hello world

Hello world

# Snackbar

#Snackbar Types

# Modals

Modal Title

Modal Title

# Images

# Responsive Images

# Rounded Images

# Inputs

# Text Inputs

# Radio Inputs

# Range Inputs

# Lists

# Spaced Lists

Simple Lists

Simple Lists

# Stacked Lists

Stacked Lists

Stacked Lists

Stacked Lists

Stacked Lists

# Navigation

# Desktop Simple

# Floating Grid Layouts