Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

Ohio.gov / search

Full Site Feature List

This page presents almost all site features, including: headers of all sizes, dropcaps, lists, quotes, code, highlights, images, tables, columns, buttons, form elements and horizontal lines. All elements adapt to different screen sizes.

Photo with Credits

Sullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing consequat sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.

am eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing consequat sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.

Columns

The DNR site is based on a 10 column grid

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrer.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Typography

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

El illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Blockquote

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Blockquote.small

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio Someone Important

Inline Styles

  • Strong
  • Emphasis
  • Inline Link
  • Strike
  • Inline Icons
  • <h1>Sample Code</h1>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Address

1234 South Creek Lane
Calgary, Alberta, Canada
T4B–1S6

            <!-- Headings 1–6 -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
            <!-- Paragraph -->
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</p>
<p>El illum dolore eu feugiat nulla facilisis at vero eros et accumsan...</p>
            <!-- Blockquote -->
<blockquote>
<p>
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio
<span>Someone Important</span>
</p>
</blockquote>
            <!-- Blockquote Small -->
<blockquote class="small">
<p>
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
<span>Someone Important</span>
</p>
</blockquote>
            <!-- Strong -->
<strong>Strong</strong>

<!-- Emphasis -->
<em>Emphasis</em>

<!-- Inline Link -->
<a href="">Inline Link</a>

<!-- Strike -->
<strike>Strike</strike>

<!--Inline Icons -->
Inline <span class="icon" data-icon="2"></span> Icons

<!--Sample Code (encoded entities) -->
<code>&lt;h1&gt;Sample Code&lt;/h1&gt;</code>
            <!-- Address -->
<address><p>
1234 South Creek Lane<br />
Calgary, Alberta, Canada<br />
T4B–1S6
</p>
</address>

Lists

Unordered List

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

Ordered List

  1. tation ullamcorper suscipit lobortis
  2. Nam liber tempor cum soluta nobis
  3. imperdiet doming id quod mazim
  4. suscipit lobortis nisl ut aliquip ex

UL.checks

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

UL.alt

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex
Note: unordered lists can be styled with one of a hundred icon options by using ul.list.icon-name See examples below. A full list of icions is available upon request.

.list.edit

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

.list.cv

  • tation ullamcorper suscipit lobortis
  • Nam liber tempor cum soluta nobis
  • imperdiet doming id quod mazim
  • suscipit lobortis nisl ut aliquip ex

.list.link

.list.plus

  • cras ultricies
  • turpis hendrerit fringilla
  • vestibulum ante ipsum
  • primis in faucibus orci
    <!-- Unordered List -->
<ul>
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ul>
    <!-- Ordered List -->
<ol>
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ol>
    <!-- List Checks -->
<ul class="checks">
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ul>
    <!-- List Alternative Style -->
<ul class="alt">
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ul>

Notices

Example Notice Bars

This is an Error Notice
This is a Warning Notice
This is a Success Notice
            <!-- Error -->
<div class="notice error">This is an Error Notice</div>

<!-- Warning -->
<div class="notice warning">This is a Warning Notice</div>

<!-- Success -->
<div class="notice success">This is a Success Notice</div>
            <!-- Error -->
<div class="notice error">
<span class="icon medium" data-icon="X"></span>
This is an Error Notice<a href="#close" class="icon close" data-icon="x"></a>
</div>

Tables

Table (default)

Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3

Table.striped

  Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3

Table.tight

Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3
Item1 Item2 Item3

Table.sortable

Name Number Color Actions
Joshua 555-4325 Blue
Peter 555-5698 Gold
Mary 666-7654 Red
Gretty 555-6732 Pink
<!-- Table -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
</tr></thead>
<tbody><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr></tbody>
</table>
<!-- Table w/Side -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
<th> </th>
<th>Item2</th>
<th>Item3</th>
</tr></thead>
<tbody><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr></tbody>
</table>
<!-- Table striped -->
<table class="striped">
...</table>

<!-- Table tight -->
<table class="tight">
...</table>

<!-- Table sortable -->
<table class="sortable">
...</table>

<!-- Table combined Styles -->
<table class="striped tight sortable">
...</table>

ToolTips

Tooltips

Tooltips are awesome. These tooltips are designed to mimic the default browser tooltips - smart, aware of the edge of the browser window. Simple.

Hover over the examples on the right to preview.

Use:
class="tooltip" +
title="my tooltip content"

Tooltip Positions

  • .tooltip (default)
  • .tooltip-top
  • .tooltip-right
  • .tooltip-left
  • .tooltip-bottom

Tooltips with HTML Content

.tooltip + data-content="#ID"
 
HTML Content

This is more HTML content. You can place any HTML in this tooltip.

        <!-- Tooltip Default (top) -->
<span class="tooltip" title="This is a default (top) tooltip">.tooltip</span>

<!-- Tooltip Top -->
<span class="tooltip-top" title="This is a Top tooltip">.tooltip-top</span>

<!-- Tooltip Right -->
<span class="tooltip-right" title="This is a Right tooltip">.tooltip-right</span>

<!-- Tooltip Left -->
<span class="tooltip-left" title="This is a Left tooltip">.tooltip-left</span>

<!-- Tooltip Bottom -->
<span class="tooltip-bottom" title="This is a Bottom tooltip">.tooltip-bottom</span>
        <!-- Hover Action -->
<button class="tooltip medium orange pill" data-content="#tooltipcontentID">Hover Over Me</button>

<!-- Click Action -->
<button class="tooltip medium blue pill" data-content="#tooltipcontentID" data-action="click">Click Me</button>

<!-- Tooltip Content -->
<div class="tooltip-content" id="tooltipcontentID"><h5>HTML Content</h5>
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<p>This is more HTML content. You can place any HTML in this tooltip.</p></div>

Horizontal Rules

HR


HR.alt1


HR.alt2


        <!-- HR -->
<hr />

<!-- HR.alt1 -->
<hr class="alt1" />

<!-- HR.alt2 -->
<hr class="alt2" />

Icons/Glyphs

Select an Icon below and copy the HTML to use:

<span class="icon x-large gray" data-icon="!"></span>

Code/Pre

PRE HTML

<html>
<head><title>This is a title</title></head>
<body class="subpage">
<!-- Content Here -->
</body>
</html>

PRE CSS

body{font-weight:bold;color:#000;line-height:150%;}

PRE JS

$(document).ready(function(){	alert('jQuery');});
<!-- Code HTML -->
<pre>
…code goes here…
</pre>
<!-- Code CSS -->
<pre>
…code goes here…
</pre>
<!-- Code Javascript -->
<pre>
…code goes here…
</pre>
<!-- Code PHP -->
<pre>
…code goes here…
</pre>

Buttons

Button Styles


Link button



Buttons Icons/features

Pop button




Button Colors


.orange


        <!-- Button Sizes -->
<button>Button</button>
<a class="button" href="">A.button</a>
<button class="small">Small</button>
<button class="small" disabled="disabled">Small (disabled)</button>
<button class="medium">Medium</button>
<button class="large">Large</button>
<!-- Buttons w/Icons -->
<button class="small"><span class="icon">0</span>Small</button>
<button class="medium"><span class="icon medium">M</span>Medium</button>
<button class="large"><span class="icon large">F</span>Large</button></pre>
<!-- Buttons w/Colors -->
<button class="blue">.blue</button>
<a class="button orange" href="">.orange</a>
<button class="small pink">.pink</button>
<button class="small" disabled="disabled">Small (disabled)</button>
<button class="medium green">.green</button>
<button class="large red">.red</button>
<!-- Default (no style) -->
<button>default</button>

<!-- Pill -->
<button class="pill"><span class="icon" data-icon="f"></span>.pill</button>

<!-- Pop -->
<a class="button pop" href=""><span class="icon" data-icon="3"></span>.pop</a>

<!-- Inset -->
<button class="inset"><span class="icon" data-icon="p"></span>.inset</button>

<!-- Square -->
<button class="square"><span class="icon" data-icon="M"></span>.square</button>

Tabs

Tabs.left

Tab1
Tab2
Tab3

Tabs.center

Tab1
Tab2 has an icon.
Tab3

Tabs.right

Tab1
Tab2
Tab3
<!-- Tabs Left -->
<ul class="tabs left">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>

<div id="tabr1" class="tab-content columns">Tab1</div>
<div id="tabr2" class="tab-content columns">Tab2</div>
<div id="tabr3" class="tab-content columns">Tab3</div>
<!-- Tabs Center -->
<ul class="tabs center">
<li><a href="#tabc1">Tab1</a></li>
<li><a href="#tabc2"><span class="icon">=</span>Tab2</a></li>
<li><a href="#tabc3">Tab3</a></li>
</ul>

<div id="tabc1" class="tab-content columns">Tab1</div>
<div id="tabc2" class="tab-content columns">Tab2 has an icon.</div>
<div id="tabc3" class="tab-content columns">Tab3</div>

<!-- Tabs Right -->
<ul class="tabs right">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>

<div id="tabr1" class="tab-content columns">Tab1</div>
<div id="tabr2" class="tab-content columns">Tab2</div>
<div id="tabr3" class="tab-content columns">Tab3</div>

Images

Placeholder

IMG.style1

IMG.style2

IMG.style3

 
 

IMG.align-left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.align-right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

IMG.full-width

<!-- Placeholder -->
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />

<!-- Style1 -->
<img class="style1" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />

<!-- Style2 -->
<img class="style2" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />

<!-- Style3 -->
<img class="style3" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />

<!-- Caption -->
<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />

<!-- Align Left -->
<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat.</p>
<!-- Align Right -->
<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat.</p>
<!-- Full Width -->
<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />

Media

Video Placeholder

Map Placholder

Calendar

<!-- Video Placeholder -->
<a class="video-placeholder" href="http://youtu.be/lfnAb11wKQc"><img src="http://placehold.it/250x200/222222/999999.png" width="250" height="200" /></a>
<!-- Map Placeholder -->
<iframe class="map-placeholder" width="100%" height="200" src="http://maps.google.com/maps?f=q&t=m&z=5&output=embed" frameborder="0"></iframe>
<!-- Calendar -->
<div class="calendar" data-month="2" data-year="2012"></div>

<!-- Set Calendar Month -->
data-month="2"

<!-- Set Calendar Year -->
data-year="2012"

Extras/Helpers

Item Description
.left .center .right Align Text
a.lightbox Open Link in lightbox. Auto Detects, iframe, inline content, etc.
.clear Add this class to a div or other element to clear floats.
.clearfix Add this class to containers that have floating children inside to clear inner floats.
a href="#anchor" Automatically scrolls the page to the desired object with id="anchor".
li.first li.last First and Last <li></li> items automatically get classes .first and .last respectively.
.column All columns have the class .column added to them automatically for easy global styling.
.visible Add this to columns to view during production. Adds light grey background color to columns.
div.inner All columns have an div.inner container automatically generated inside for easy CSS styling, adding and removing of padding inside columns.
.hide .show .hide to hide content (display:none). .show to show content (display:block).
tr.first tr.last First and Last <tr></tr> items automatically get classes .first and .last respectively.
tr.alt Every second table row automatically gets class .alt.