Colourways

Responsive grid

Grid layout with 1 to 4 column options.

Current active breakpoint

1. No breakpoint
2. Breakpoint 1
3. Breakpoint 2
4. Breakpoint 3

Main layout grid

The main layout grid blocks used for layout throughout a site.

Image slider/carousel

Via Slick.

Typography

h1 Heading 1 h1 Heading 1 h1 Heading 1

h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2

h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3

h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4

h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5

h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

This text has a reference in the footnote¹.

¹ Here is the footnote.

Contact details

Uses both the Schema.org and hCard mircoformats.

Text ranged left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Text ranged right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Text centred

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Text justified

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Inline text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The u element example
The var element example

Block text-level semantics

Pre-formatted text blocks

This is an example of a non-code
    pre-formatted text block
        preserving white spaces

Pre-formatted code blocks

<section role="alert" class="alert alert-error fade in">
    <a class="close" data-dismiss="alert">&amp;times;</a>
    <h3>Message pane</h3>
    <p>Error message goes here.</p>
</section>

Pre-formatted code blocks with line numbers

<section role="alert" class="alert alert-error fade in">
    <a class="close" data-dismiss="alert">&amp;times;</a>
    <h3>Message pane</h3>
    <p>Error message goes here.</p>
</section>

Blockquotes

Here is an example of a block quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Thematic break (hr tag)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.

Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Embedded content

Proper responsive images

Uses <img>> along with sizes and srcset attributes to provide images optimised for both screen size and pixel density (DPI).

Images

Images with links

Rounded images

Circular images

Figures

Left ranged image

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Right ranged image

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Centred image

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

SVG

Videos

Via Flowplayer (GPL version).

Inline text labels

Safe

This is an example of a span success label and a strong success label.

Warning

This is an example of a span warning label and a strong warning label.

Danger

This is an example of a span error label and a strong error label.

Information (no semantic meaning)

This is an example of a span information label and a strong information label.

Alert boxes

System message: success

Success: a suitable success message goes here.

System message: warning

Warning: a suitable warning message goes here.

System message: error

Error: a suitable error message goes here.

System message: information (no semantic meaning)

Information: a suitable information message goes here.

Pagination

Breadcrumbs

Two style options available: .breadcrumbs or .breadcrumbs--path.

Lists

Number list

1. this is an example
2. of a numbered
3. (ordered) list
   1. and a second level
   2. numbered list example

Bullet list

• this is an example
• of a bulletpoint
• (unordered) list
  • and a second level
  • bulletpoint list example

Plain list

• this is an example
• of a .list--no-bullets
• (unordered) list
  • and a second level
  • .list--no-bullets list example

Definition list

This is a definition list term 1

Definition of term 1 here

Another definition of term 1

A sub term

With

Subs

Tables

Plain table

Plain table with <thead> included, but no <caption>.

Bordered table

Bordered table with <caption>, <thead> and <tfoot> included.

Forms

Social media

External social media links

• Facebook
• Flickr
• GitHub
• Google+
• LinkedIn
• Pinterest
• Twitter
• YouTube

Social media buttons

Change the Twitter attribute data=via="twitterapi" to the Twitter username of the production site.

+1 Tweet

jQuery UI widgets

Collection of all the available jQuery UI widgets.

Interactions: Draggable

Full documentation

Interactions: Resizable

Full documentation

Interactions: Selectable

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7

Full documentation

Interactions: Sortable

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7

Full documentation

Widgets: Accordion

Full documentation

Widgets: Autocomplete

Countries

Full documentation

Widgets: Button

Default functionality buttons

<button> button <a> button

Icon buttons

<button> icon only <button> icon on the left <button> icon on the right <button> two icons

<a> icon only <a> icon on the left <a> icon on the right <a> two icons

Full documentation

Widgets: Checkboxradio

Checkboxes (and without icons)

Dogs Cats Ferrets

Radiobuttons

Yes Maybe No

Full documentation

Widgets: Controlgroup

Controlgroup horizontal (checkboxes and select)

B I U Zoom 50% 75% 90% 100% 125% 150% 200%

Controlgroup horizontal (radiobuttons)

Off On

Controlgroup vertical

Full documentation

Widgets: Datepicker

Full documentation

Widgets: Dialog

Open basic dialog…

Open modal dialog…

Full documentation

Widgets: Menu

• Aberdeen
• Ada
• Adamsville
• -
• Addyston
• Delphi
  • Ada
  • Saarland
  • Salzburg
• Saarland
• Salzburg
  • Delphi
    • Ada
    • Saarland
    • Salzburg
  • Delphi
    • >Ada
    • Saarland
    • Salzburg
  • Perch
• Amesville
  • Ada
  • Saarland

Note: Currently jQuery UI does not support horizontal menus.

Full documentation

Widget: Progressbar

Determinate value

Animate to random number

Indeterminate value

Full documentation

Widgets: Selectmenu

Selectmenu - standard

Select a speed Slower Slow Medium Fast Faster

Selectmenu - with option groups

Select a file jQuery.js ui.jQuery.js Some unknown file Some other file with a very long option text

Selectmenu - with disabled options

Select a number 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Selectmenu - with disabled optgroup

Select a file 2 jQuery.js ui.jQuery.js Some unknown file Some other file

Full documentation

Widgets: Slider

Slider - horizontal

Slider - vertical

Full documentation

Widgets: Spinner

Select a value:

Full documentation

Widgets: Tabs

Full documentation

Widgets: Tooltip

Here is an example of a link with a tooltip, mouseover to reveal it.

Full documentation

Styles: Icons

My additions to standard jQuery UI icon set

Icons inline with text

Lorem ipsum dolor sit amet, Search consectetuer adipiscing elit.

Icons in a (plain) list

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5

Icon colour states

Success text.

Warning text.

Error text.

Information text.

Inversed text.

Miscellaneous

Loading spinner (for light backgrounds)

Loading spinner (for dark backgrounds)

Spin any element

Via CSS3 Animation.