Headings

You can find demos for the heading tags <h1>-<h6> below:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

<p>Put your paragraph text in here

<p class="uppercase">This text is all uppercase

<p class="lowercase">This text is all lowercase

<p class="capitalize">This text is capitalized

Inline styles

<strong>Bolded
<em>Italicized
<a href="#">Link
<q>quote
<cite>Cite
<code>this is sample code
<var>variables
<abbr>abbr

<address>
 

<blockquote>

This is a blockquote

Buttons

Buttons Usage

4 sizes for <button> tag have been included. Buttons are also stylized to color change for the :hover and :active states.

Buttons Demo

X-Small
Small
Medium
Large

Buttons HTML

  <button class="btnxsmall">X-Small</button>
  <button class="btnsmall">Small</button>
  <button class="btnmedium">Medium</button>
  <button class="btnlarge">Large</button>
     

Lists

Lists Usage

Lists and nested lists are stylized to fit every need.

Lists Demo

• ul Item 1
• Nested ul Item 1
• Nested ul Item 2
• ul Item 2
• ul Item 3

1. ol Item 1
1. Nested ol Item 1
2. Nested ol Item 2
2. ol Item 2
3. ol Item 3

Lists HTML

  <ul>
    <li>ul Item 1</li>
      <ul>
        <li>Nested ul Item 1</li>
        <li>Nested ul Item 2</li>
      </ul>
    <li>ul Item 2</li>
    <li>ul Item 3</li>
  </ul>

  <ol>
    <li>ol Item 1</li>
      <ol>
        <li>Nested ol Item 1</li>
        <li>Nested ol Item 2</li>
        </ol>
    <li>ol Item 2</li>
    <li>ol Item 3</li>
  </ol>
               

Tables

Tables Usage

Responsive table designed with only CSS. Use <table> tag and the code below to get started.

Tables Demo

Tables HTML

• For a responsive table, use class="tresponsive" on the <table> tag
• For striped rows, use class="striped" on the <table> tag
• For a border around your table, use class="border" on the <table> tag

  <table class="tresponsive">
    <thead>
      <tr>
        <th>Title 1</th>
        <th>Title 2</th>
        <th>Title 3</th>
        <th>Title 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Title 1">T1 Row 1</td>
        <td data-label="Title 2">T2 Row 1</td>
        <td data-label="Title 3">T3 Row 1</td>
        <td data-label="Title 4">T4 Row 1</td>
      </tr>
      <tr>
        <td data-label="Title 1">T1 Row 2</td>
        <td data-label="Title 2">T2 Row 2</td>
        <td data-label="Title 3">T3 Row 2</td>
        <td data-label="Title 4">T4 Row 2</td>
      </tr>
      <tr>
        <td data-label="Title 1">T1 Row 3</td>
        <td data-label="Title 2">T2 Row 3</td>
        <td data-label="Title 3">T3 Row 3</td>
        <td data-label="Title 4">T4 Row 3</td>
      </tr>
    </tbody>
  </table>
                   

Forms

Forms Usage

Stylized, beautiful, sleek. Easily integrate HTML forms into your website.

Forms Demo

Forms HTML

  <form>
    <fieldset>
      <label for="name">Single Line Textbox:</label>
        <input type="text" name="name" id="name"><br>
      <label>Checkboxes</label>
        <input type="checkbox">Check 1<br>
        <input type="checkbox">Check 2<br>
        <input type="checkbox">Check 3<br>
      <label>Radio Buttons</label>
        <input type="radio">Radio 1<br>
        <input type="radio">Radio 2<br>
        <input type="radio">Radio 3<br>
    </fieldset>
    <label>Dropdown Menu</label>
      <select>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
      </select><br>
    <label>Dropdown (Multiple Selects)</label>
      <select size="3" multiple>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
      </select><br>
    <label>Textarea</label>
      <textarea></textarea>
    <input type="submit" value="Submit Form">
  </form>