# 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 / 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>
              

# Alert Basic

<!-- ##### 
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

<!-- ##### 
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

<!-- ##### 
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>
              

# 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

<!-- ##### 
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

<!-- ##### 
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>
              

# Button Types

<!-- ##### 
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

<!-- ##### 
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

<!-- ##### 
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

<!-- ##### 
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>
              

# Card Types

card__basic card__basic__header card__basic__text-over-media card__basic__only-buttons card__basic__only-icons card__horizontal-image-and-text card__dismiss

<!-- ##### 
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

<!-- ##### 
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 Types

<!-- ##### 
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>
              

<!-- ##### 
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>
              

# Text Inputs

<!-- ##### 
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

<!-- ##### 
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

<!-- ##### 
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>
              

# Spaced Lists

<!-- ##### 
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

<!-- ##### 
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>
              

# 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>
              

<!-- ##### 
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 2 Columns Layout

<!-- ##### 
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

<!-- ##### 
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

<!-- ##### 
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>