• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
  • View the code

    Header with Background Color

     
    <h1 class="with-background">Header with Background Color</h1>
  • View the code

    Header with Icon

     
    <h1>Header with Icon
        <span class="icon-default"></span>
    </h1>
  • View the code

    Header with Icon on the Left

     
    <h1>Header with Icon on the Left
        <span class="icon-default left"></span>
    </h1>
  • View the code

    Header with Icon on the Right

     
    <h1>Header with Icon on the Right
        <span class="icon-default right"></span>
    </h1>
  • View the code

    Header with Background Color and Icon

     
    <h1 class="with-background">Header with Background Color and Icon
        <span class="icon-default"></span>
    </h1>
    • Generic
    • Showcase
    • View the code

      Indented Text

       
      <p class="indented"<Indented Text</p>
    • View the code

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

       
      <p class="indented">Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
    • Generic
    • Showcase
    • View the code

      Drop Caps Text

       
      <p class="drop-caps">Drop Caps Text</p>
    • View the code

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

       
      <p class="drop-caps">Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
  • View the code

    Highlighted Text

     
    <p class="highlighted"<Highlighted Text</p>
  • View the code

    Underlined Text

     
    <p class="underlined"<Underlined Text</p>
  • View the code

    Stroked Text

     
    <p class="stroked"<Stroked Text</p>
    • Generic
    • Showcase
    • View the code

      This is a Dotted Overflown Text

       
      <p class="overflowed">This is a Dotted Overflown Text</p>
    • View the code

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

       
      <p class="overflowed">Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
    • Generic
    • Showcase
    • View the code

      Eye-Popping Text

       
      <p class="eye-popping">Eye-Popping Text</p>
    • View the code

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

       
      <p class="eye-popping">Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
    • Generic
    • Showcase
    • View the code

      Inline Code Snippet

      Code in Here
       
      <code>Code in Here</code>
    • View the code .my-class
       
      <code>.my-class</code>
    • Generic
    • Showcase
    • View the code Label
       
      <span class="label">Label</span>
    • View the code Proceedclick this button to proceed with your registration
       
      <a href="#" class="button">Proceed</a><span class="label">click this button to proceed with your registration</span>
    • Generic
    • Showcase
    • View the code

      Unordered List

      • list item
      • list item
      • list item
      • list item
       
      <ul class="list with-bullet">
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
      </ul>
    • View the code Grocery List
      • Potatoes
      • Tomatoes
      • Bread
      • Olives
       
      <span class="label">Grocery List</span>
      <ul class="list with-bullet">
          <li class="item">
              Potatoes
          </li>
          <li class="item">
              Tomatoes
          </li>
          <li class="item">
              Bread
          </li>
          <li class="item">
              Olives
          </li>
      </ul>
    • Generic
    • Showcase
    • View the code

      Ordered List

      1. list item
      2. list item
      3. list item
      4. list item
       
      <ol class="list with-bullet">
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
      </ol>
    • View the code Grocery List
      1. Potatoes
      2. Tomatoes
      3. Bread
      4. Olives
       
      <span class="label">Grocery List</span>
      <ol class="list with-bullet">
          <li class="item">
              Potatoes
          </li>
          <li class="item">
              Tomatoes
          </li>
          <li class="item">
              Bread
          </li>
          <li class="item">
              Olives
          </li>
      </ol>
    • Generic
    • Showcase
    • View the code

      List without Bullets

      • list item
      • list item
      • list item
      • list item
       
      <ul class="list">
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
          <li class="item">
              list item
          </li>
      </ul>
    • View the code Grocery List
      • Potatoes
      • Tomatoes
      • Bread
      • Olives
       
      <span class="label">Grocery List</span>
      <ul class="list">
          <li class="item">
              Potatoes
          </li>
          <li class="item">
              Tomatoes
          </li>
          <li class="item">
              Bread
          </li>
          <li class="item">
              Olives
          </li>
      </ul>
    • Generic
    • Showcase
    • View the code

      Definition List

      Term 1
      Definition
      Term 2
      Definition
      Term 3
      Definition
       
      <dl class="terms">
          <dt>Term 1</dt>
          <dd>Definition</dd>
          <dt>Term 2</dt>
          <dd>Definition</dd>
          <dt>Term 3</dt>
          <dd>Definition</dd>
      </dl>
    • View the code
      whappened
      Whappened is a slang word used for saying "What happened?"
      cringe attack
      To feel massively ashamed of past actions that you have personally done so that the suffered embarrassment tricks your body that you're about to have a heart attack. It is followed by episodes of further awkwardness and feeling uncomfortable for the rest of the day.
      happy drink
      A fun, strong, alcoholic drink to put u in a happy mood such as margeritas, strawberry daiquiries, mud slides, mojitos, etc.
       
      <dl class="terms">
          <dt>whappened</dt>
          <dd>Whappened is a slang word used for saying "What happened?"</dd>
          <dt>cringe attack</dt>
          <dd>To feel massively ashamed of past actions that you have personally done so that the suffered embarrassment tricks your body that you're about to have a heart attack. It is followed by episodes of further awkwardness and feeling uncomfortable for the rest of the day.</dd>
          <dt>happy drink</dt>
          <dd>A fun, strong, alcoholic drink to put u in a happy mood such as margeritas, strawberry daiquiries, mud slides, mojitos, etc.</dd>
      </dl>
    • Generic
    • Showcase
    • View the code

      Horizontal Definition List

      Term 1
      Definition
      Term 2
      Definition
      Term 3
      Definition
       
      <dl class="horizontal-terms">
          <dt>Term 1</dt>
          <dd>Definition</dd>
          <dt>Term 2</dt>
          <dd>Definition</dd>
          <dt>Term 3</dt>
          <dd>Definition</dd>
      </dl>
    • View the code
      whappened
      Whappened is a slang word used for saying "What happened?"
      cringe attack
      To feel massively ashamed of past actions that you have personally done so that the suffered embarrassment tricks your body that you're about to have a heart attack. It is followed by episodes of further awkwardness and feeling uncomfortable for the rest of the day.
      happy drink
      A fun, strong, alcoholic drink to put u in a happy mood such as margeritas, strawberry daiquiries, mud slides, mojitos, etc.
       
      <dl class="horizontal-terms">
          <dt>whappened</dt>
          <dd>Whappened is a slang word used for saying "What happened?"</dd>
          <dt>cringe attack</dt>
          <dd>To feel massively ashamed of past actions that you have personally done so that the suffered embarrassment tricks your body that you're about to have a heart attack. It is followed by episodes of further awkwardness and feeling uncomfortable for the rest of the day.</dd>
          <dt>happy drink</dt>
          <dd>A fun, strong, alcoholic drink to put u in a happy mood such as margeritas, strawberry daiquiries, mud slides, mojitos, etc.</dd>
      </dl>
    • Generic
    • Showcase
    • View the code Base Red Color
       
      <span class="red-color">Base Red Color</span>
    • View the code

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

       
      <p>Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span class="red-color">Nullam rhoncus vulputate pharetra.</span> Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
  • View the code Base Green Color
     
    <span class="green-color">Base Green Color</span>
  • View the code Base Blue Color
     
    <span class="blue-color">Base Blue Color</span>
  • View the code Base Yellow Color
     
    <span class="yellow-color">Base Yellow Color</span>
  • View the code Base Orange Color
     
    <span class="orange-color">Base Orange Color</span>
  • View the code Base Pink Color
     
    <span class="pink-color">Base Pink Color</span>
  • View the code Base Purple Color
     
    <span class="purple-color">Base Purple Color</span>
  • View the code Base Brown Color
     
    <span class="brown-color">Base Brown Color</span>
    • Generic
    • Showcase
    • View the code Base Background-Color Red
       
      <span class="background-red">Base Background-Color Red</span>
    • View the code

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

       
      <p class="background-red">Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
  • View the code Base Background-Color Green
     
    <span class="background-green">Base Background-Color Green</span>
  • View the code Base Background-Color Blue
     
    <span class="background-blue">Base Background-Color Blue</span>
  • View the code Base Background-Color Yellow
     
    <span class="background-yellow">Base Background-Color Yellow</span>
  • View the code Base Background-Color Orange
     
    <span class="background-orange">Base Background-Color Orange</span>
  • View the code Base Background-Color Pink
     
    <span class="background-pink">Base Background-Color Pink</span>
  • View the code Base Background-Color Purple
     
    <span class="background-purple">Base Background-Color Purple</span>
  • View the code Base Background-Color Brown
     
    <span class="background-brown">Base Background-Color Brown</span>
    • Generic
    • Showcase
    • View the code Quote Paragraph
       
      <span class="quote"><span class="icon right"></span>Quote Paragraph</span>
    • View the code Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.
       
      <span class="quote"><span class="icon right"></span>Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</span>
    • Generic
    • Showcase
    • View the code

      Element with Tag 12

       
      <h3 class="with-background with-tag">Element with Tag <span class="tag">12</span></h3>
    • View the code New Messages 5
       
      <span class="label with-tag">New Messages <span class="tag">5</span></span>
  • View the code

    Scrollable Item

    Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus. Mauris libero nisl, blandit quis varius quis, scelerisque aliquam urna. Duis eu dictum nisl. Proin tincidunt, neque non consequat sollicitudin, nisl orci condimentum ipsum, ac varius sem dolor rutrum eros. Mauris scelerisque enim ac turpis sollicitudin aliquam. Nam at nisl id nisi sodales aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla lacinia ligula odio, id pulvinar metus adipiscing quis. Quisque vulputate suscipit condimentum. Suspendisse dictum enim at diam facilisis tristique. Pellentesque velit nisl, dapibus vitae arcu nec, vestibulum posuere eros. Etiam at urna sed lectus malesuada eleifend a eu ligula. Maecenas sed eros a tellus volutpat dignissim.

     
    <p class="scrollable quarter-width">...</p>
Blackhole - Released under MIT license