Demo Page

<table class="table-cell">
</table>

Note: Just add class 'table-cell' to the 'table' element

To Wrap: class="wrap"

column 1 column 2 column 3 column 4 column 5 column 6 column 7 column 8
Row 1 100 100 100 100 100 100 100
RoW 2 100 100 100 100 100 100 100
ROW 3 100 100 100 100 100 100 100

<table border="1" cellpadding="1" cellspacing="1">
  <tbody>
    <tr>
      <td colspan="2"><a id="title-1" name="Sample Table">Sample Table 2</a></td>
    </tr>
    <tr>
      <td>Item 1</td> <td>6/18/2018</td>
    </tr>
    <tr><td>Item 2</td> <td>Open until filled</td>
    </tr>
    <tr><td>Item 3</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
  </tbody>
</table>

Sample Table 2
Item 1 6/18/2018
Item 2 Open until filled
Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Location 4567 California St., San Francisco, CA 94118
Schedule Flexible until project is complete
Compensation $200.00/hour
Item 4 Students who qualify for Federal Work Study program
About this section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices. Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit. Nam pulvinar pretium nunc vitae mattis. Mauris rutrum hendrerit lectus et pretium. Vestibulum sollicitudin tempus ante eu vulputate. Suspendisse rhoncus sapien at nibh pretium, at porttitor lectus sodales. Phasellus at convallis arcu, imperdiet dapibus nisl.

Responsibilities

  • Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit.
  • Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit.

Qualifications

  • High personal motivation, self-management, meticulous attention to detail, and an ability to work under supervision
  • Excellent interpersonal, and oral and written communication skills, with an ability to work in large office setting
  • Working knowledge of Microsoft Office Suite – Excel and Word
  • Comfortable learning new software
  • Experience organizing and presenting information to different audiences

======= header divider =================================

<h1 class="header-demarcation">This is the header h1</h1>
<h2 class="header-demarcation">This is the header h2</h2>
<h3 class="header-demarcation">This is the header h3</h3>
<h4 class="header-demarcation">This is the header h4</h4>
<h5 class="header-demarcation">This is the header h5</h5>
<h6 class="header-demarcation">This is the header h6</h6>

 

 This is the header h1

This is the header h2

This is the header h3

This is the header h4

This is the header h5
This is the header h6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices. Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit. Nam pulvinar pretium nunc vitae mattis. Mauris rutrum hendrerit lectus et pretium. Vestibulum sollicitudin tempus ante eu vulputate. Suspendisse rhoncus sapien at nibh pretium, at porttitor lectus sodales. Phasellus at convallis arcu, imperdiet dapibus nisl.

 

======= section-divider =================================

<hr class="section-divider">

 

 

=======panels or boxed =================================

<div class="boxed"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices.

 

======= green bubble button =================================

<a class="button-bubble left" href="http://www.google.com">http://www.google.com</a>

 

http://www.google.com

Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Ut dignissim at massa id porttitor. Maecenas maximus odio eu leo viverra, et convallis nulla iaculis. Sed dapibus mi vel enim bibendum rutrum. Nulla gravida id leo vitae dictum. Maecenas accumsan et quam et blandit. Cras dignissim eros massa, sit amet cursus magna ornare non. Pellentesque vel tortor nisi. Integer consectetur quis velit sit amet semper. Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Ut dignissim at massa id porttitor. Maecenas maximus odio eu leo viverra, et convallis nulla iaculis. Sed dapibus mi vel enim bibendum rutrum. Nulla gravida id leo vitae dictum. Maecenas accumsan et quam et blandit. Cras dignissim eros massa, sit amet cursus magna ornare non. Pellentesque vel tortor nisi. Integer consectetur quis velit sit amet semper.

 

 

 

<a class="button-bubble right" href="http://www.google.com">http://www.google.com</a>

 

http://www.google.com

Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Ut dignissim at massa id porttitor. Maecenas maximus odio eu leo viverra, et convallis nulla iaculis. Sed dapibus mi vel enim bibendum rutrum. Nulla gravida id leo vitae dictum. Maecenas accumsan et quam et blandit. Cras dignissim eros massa, sit amet cursus magna ornare non. Pellentesque vel tortor nisi. Integer consectetur quis velit sit amet semper. Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Ut dignissim at massa id porttitor. Maecenas maximus odio eu leo viverra, et convallis nulla iaculis. Sed dapibus mi vel enim bibendum rutrum. Nulla gravida id leo vitae dictum. Maecenas accumsan et quam et blandit. Cras dignissim eros massa, sit amet cursus magna ornare non. Pellentesque vel tortor nisi. Integer consectetur quis velit sit amet semper.

 

=======ACCORDION - custom =================================

<ul class="accordion-list">
  <li>
    <div>List Item 1</div>  
    <div>Content 1 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam.
    </div>
  </li>
  <li>
    <div>List Item 2</div> 
    <div>Content 2 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et
    </div>
  </li>
  <li class="open">List Item 3 - with bullet list inside
    <div>Content 3 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et.
      <ul>
        <li>Item 1</li>
        <li>Item 2 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit.</li>
        <li>Item 3</li>
      </ul>
    </div>
  </li>
</ul>

  • List Item 1
    Content 1 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam.
  • List Item 2
    Content 2 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et.
  • List Item 3 - with bullet list inside and open by default
    Content 3 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et.
    • List Item 1
      Content 1 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam.
    • List Item 2
      Content 2 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et.
    • Item 1
    • Item 2 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit.
      • Sub item 1
      • Sub item 2
      • Sub item 3
      • Item 3

 

  • List Item 1
    Content 1 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam.
  • List Item 2
    Content 2 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et.
  • List Item 3 - with bullet list inside and open by default
    Content 3 Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et.

     

    Month Savings
    January $100
    February $120

     

    Month Savings Column 3 Column 4
    January $100 $100 $100
    February $120 $100 $100

 

=======ACCORDION -- custom default =================================

<div class="accordion-tab">
  <h3>Accordion tab 1</h3>
  <div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit.</p>
    </div>
  </div>
</div>
<div class="accordion-tab">
  <h3>Accordion tab 2</h3>
  <div>
    <div>
      <h2>This is a h2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit.</p>
    </div>
  </div>
</div>

Accordion tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit.

Accordion tab 2

This is a h2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit.

 

=======ACCORDION using template=================================

<div class="collapse-item">
   <div aria-expanded="true" class="header-text" role="button" tabindex="0">
      <p>Item 1</p>
   </div>

   <div aria-hidden="false" class="content-text" role="region" tabindex="-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </div>
</div>

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices. Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit. Nam pulvinar pretium nunc vitae mattis. Mauris rutrum hendrerit lectus et pretium. Vestibulum sollicitudin tempus ante eu vulputate. Suspendisse rhoncus sapien at nibh pretium, at porttitor lectus sodales. Phasellus at convallis arcu, imperdiet dapibus nisl.

Item 2

Donec semper mi eu nibh faucibus, at vehicula tellus efficitur. Fusce cursus id augue et varius. Etiam faucibus mi purus, non consectetur nisl lacinia et. Ut dignissim at massa id porttitor. Maecenas maximus odio eu leo viverra, et convallis nulla iaculis. Sed dapibus mi vel enim bibendum rutrum. Nulla gravida id leo vitae dictum. Maecenas accumsan et quam et blandit. Cras dignissim eros massa, sit amet cursus magna ornare non. Pellentesque vel tortor nisi. Integer consectetur quis velit sit amet semper.

 

=======STEPS=================================

<div class="steps">
  <div class="step">Step 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="step">Step 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="step">Step 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="step">Step 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices. Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit. Nam pulvinar pretium nunc vitae mattis. Mauris rutrum hendrerit lectus et pretium. Vestibulum sollicitudin tempus ante eu vulputate. Suspendisse rhoncus sapien at nibh pretium, at porttitor lectus sodales. Phasellus at convallis arcu, imperdiet dapibus nisl.</div>
</div>

Step 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Step 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Step 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices. Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit. Nam pulvinar pretium nunc vitae mattis. Mauris rutrum hendrerit lectus et pretium. Vestibulum sollicitudin tempus ante eu vulputate. Suspendisse rhoncus sapien at nibh pretium, at porttitor lectus sodales. Phasellus at convallis arcu, imperdiet dapibus nisl.
Step 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Nam mattis lacus quis tortor pellentesque ultrices. Vivamus non nunc sollicitudin, elementum mauris at, pretium leo. Curabitur cursus turpis viverra quam vulputate cursus. Ut quis sem elit. Nam pulvinar pretium nunc vitae mattis. Mauris rutrum hendrerit lectus et pretium. Vestibulum sollicitudin tempus ante eu vulputate. Suspendisse rhoncus sapien at nibh pretium, at porttitor lectus sodales. Phasellus at convallis arcu, imperdiet dapibus nisl.

 

=======popup=================================

<div class="popup-trigger">This is popup trigger 1.</div>

<div class="popup-target">This is the popup target 1.</div>

This is popup trigger 1.
This is the popup target 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur.

 

This is popup trigger 2.
This is the popup target 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor sodales odio, a sodales velit venenatis sit amet. Ut sollicitudin magna vel est eleifend, in feugiat sem suscipit. Integer vel tortor vitae urna feugiat tincidunt in sit amet diam. Sed sed interdum est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet mauris eget risus vehicula consectetur.

 

=======hover box=================================

<p>
   <a align="center" class="thumbnail" href="/about-us/policies-and-guidelines" style="text-align: center">
      <img alt="policies-and-guidelines" src="/sites/g/files/tkssra336/f/UCSF_20160203_UCOP_003.jpg" />
   </a>
</p>

<h4>
   <a align="center" class="thumbnail" href="/about-us/policies-and-guidelines" style="text-align: center">Policies & Guidelines</a>
</h4>

policies-and-guidelines 

Policies & Guidelines