<div class="alert alert--success">Primary Color / Success Alert</div>
<div class="alert alert--secondary">Secondary Alert</div>
<div class="alert alert--danger">Danger Alert</div>
<div class="alert alert--info">Info Alert</div>
<div class="alert alert--warning">Warning Alert</div>

<img alt="me" class="avatar avatar--xs" src="src/assets/me.jpg"/>
<img alt="me" class="avatar avatar--sm" src="src/assets/me.jpg"/>
<img alt="me" class="avatar avatar--md" src="src/assets/me.jpg"/>
<img alt="me" class="avatar avatar--lg" src="src/assets/me.jpg"/>
<img alt="me" class="avatar avatar--xl" src="src/assets/me.jpg"/>
<img alt="me" class="avatar avatar--xxl" src="src/assets/me.jpg"/>

<div class="badge--container">
    <img alt="me" class="avatar avatar--lg" src="src/assets/me.jpg"/>
    <span class=" badge badge--avatar"></span>
</div>
<div class="badge--container">
    <img alt="me" class="avatar avatar--sm" src="src/assets/me.jpg"/>
    <span class=" badge badge--avatar"></span>
</div>
<div class="badge--container">
    <i class="fas fa-shopping-cart" style="font-size: 2rem; color: dimgrey"></i>
    <span class="badge badge--icon">2</span>
</div>

Primary Secondary Outline Primary Borderless Button

<button class="button button--primary">Primary</button>
<button class="button button--secondary">Secondary</button>
<button class="button button--outline-primary">Outline Primary</button>
<button class="button button--borderless">Borderless Button</button>

<div class="card card--fluid card__border">
    <img src="src/assets/me.jpg" class="card__image" alt="me">
    <div class="card__body">    <h1 class="card__heading">Fluid Card / Horizontal Card</h1>
        <small>Tagline</small><p>Some text here</p>
        <span class="card__badge">new</span>
        <div class="card__button-group"><button class="button button--primary">Checkout</button>
            <button class="button button--secondary">Checkout</button></div>
    </div>
</div>
<br/>
<div class="card card__border">
    <img src="src/assets/me.jpg" class="card__image" alt="me">
    <div class="card__body">
        <h1 class="card__heading">Card</h1>
        <small>Tagline</small>
        <p>Some text here</p>
        <span class="card__badge">Special Offer</span>
        <button class="button button--primary">Action</button>
    </div>
</div>

Stacked List

• Notification Title

  Some Text
• 

  Notification Title

  Some Text
• 

  Notification Title

  Some Text

Unstyled List

• Item 1
• Item 2
• Item 3

Square Styled List

• Item 1
• Item 2
• Item 3

<ul class="stacked--list">
    <li>
        <div class="notification"> <div class="notification__title">Notification Title</div> <div class="notification__text"> Some Text </div> </div>
    </li>
    <li>
        <div class="notification"> <img src="src/assets/me.jpg" alt="me" class="avatar avatar--sm notification__avatar"/> <div class="notification__title">Notification Title</div> <div class="notification__text"> Some Text </div> </div>
    </li>
    <li>
        <div class="notification"> <img src="src/assets/me.jpg" alt="me" class="avatar avatar--sm notification__avatar"/> <div class="notification__title">Notification Title</div> <div class="notification__text"> Some Text </div> </div>
    </li>
</ul>
<ul class="unstyled--list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul class="styled--square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<nav class="navigation">
    <ul class="nav--primary">
        <li><a href="#" class="nav-link active">Home</a></li>
        <li><a href="#" class="nav-link">Blog</a></li>
        <li><a href="#" class="nav-link">Pages</a></li>
        <li><a href="#" class="nav-link">Projects</a></li>
    </ul>
    <ul class="nav--secondary">
        <li><a href="#" class="nav-link"><i class="fab fa-facebook-square"></i></a></li>
        <li><a href="#" class="nav-link"><i class="fab fa-twitter-square"></i></a></li>
        <li><a href="#" class="nav-link"><i class="fas fa-moon"></i></a></li>
    </ul>
</nav>

<div class="notification">
    <img src="src/assets/me.jpg" alt="me" class="avatar avatar--sm notification__avatar"/>
    <div class="notification__title">
        Notification Title
    </div>
    <div class="notification__text">Some Text</div>
</div>