Go to search Go to page navigation Go to main content

Sitename

Navigation Toggle light/dark mode

Design patterns

Switch to RTL layout

Article containing examples of various inline/block elements that should be considered and styled within any theme. Supported browsers: Chrome, Edge, Firefox, Safari and Opera the last two recent stable releases. Development environment uses Grunt and Sass.

Dark/Light Mode images

Grab the latest source code from the GitHub repository.

Colourways

Neutral

--clr-bkgd

--clr-bkgd-box

--clr-grad-from

--clr-grad-to

--clr-brdr-x-lite

--clr-brdr-lite

--clr-brdr

--clr-brdr-dark

--clr-brdr-x-dark

--clr-text-demoted

--clr-text

--clr-text-promoted

Accent

--clr-hilite-box

--clr-strong-hilite-box

--clr-hilite

Interaction

--clr-selected

--clr-selecting

--clr-focus

--clr-a-interact

--clr-a

State

--clr-success-bkgd

--clr-success-text

--clr-warning-bkgd

--clr-warning-text

--clr-error-bkgd

--clr-error-text

--clr-info-bkgd

--clr-info-text

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. Requires a parent container with class="layout-container" stated. Can also be used without gaps between cells by using class="layout-container gap-0", and various sizes of gap via gap-1, gap-2, gap-3 or gap-4.

Code:

<div class="layout-container">

    <div class="layout-1col">Opt1: 1col</div>

    <div class="layout-2col">Opt2: 2col cell1</div>
    <div class="layout-2col">Opt2: 2col cell2</div>

    <div class="layout-3col">Opt3: 3col cell1</div>
    <div class="layout-3col">Opt3: 3col cell2</div>
    <div class="layout-3col">Opt3: 3col cell3</div>

    <div class="layout-3col-2span">Opt4: 3col cell1and2</div>
    <div class="layout-3col">Opt4: 3col cell3</div>

    <div class="layout-3col">Opt5: 3col cell1</div>
    <div class="layout-3col-2span">Opt5: 3col cell2and3</div>

    <div class="layout-4col">Opt6: 4col cell1</div>
    <div class="layout-4col">Opt6: 4col cell2</div>
    <div class="layout-4col">Opt6: 4col cell3</div>
    <div class="layout-4col">Opt6: 4col cell4</div>

    <div class="layout-4col-2span">Opt7: 4col cell1and2</div>
    <div class="layout-4col">Opt7: 4col cell3</div>
    <div class="layout-4col">Opt7: 4col cell4</div>

    <div class="layout-4col-alt">Opt8: 4col cell1</div>
    <div class="layout-4col-2span">Opt8: 4col cell2and3</div>
    <div class="layout-4col-alt">Opt8: 4col cell4</div>

    <div class="layout-4col">Opt9: 4col cell1</div>
    <div class="layout-4col">Opt9: 4col cell2</div>
    <div class="layout-4col-2span">Opt9: 4col cell3and4</div>

    <div class="layout-4col-3span">Opt10: 4col cell1and2and3</div>
    <div class="layout-4col-alt">Opt10: 4col cell4</div>

    <div class="layout-4col-alt">Opt11: 4col cell1</div>
    <div class="layout-4col-3span">Opt11: 4col cell2and3and4</div>

</div>

Example:

Opt1: 1col
Opt2: 2col cell1
Opt2: 2col cell2
Opt3: 3col cell1
Opt3: 3col cell2
Opt3: 3col cell3
Opt4: 3col cell1and2
Opt4: 3col cell3
Opt5: 3col cell1
Opt5: 3col cell2and3
Opt6: 4col cell1
Opt6: 4col cell2
Opt6: 4col cell3
Opt6: 4col cell4
Opt7: 4col cell1and2
Opt7: 4col cell3
Opt7: 4col cell4
Opt8: 4col cell1
Opt8: 4col cell2and3
Opt8: 4col cell4
Opt9: 4col cell1
Opt9: 4col cell2
Opt9: 4col cell3and4
Opt10: 4col cell1and2and3
Opt10: 4col cell4
Opt11: 4col cell1
Opt11: 4col cell2and3and4

Image slider/carousel

Via Glide.js.

  • Slide 1
  • Slide 2
    This is a figcaption for slide 2 in the carousel.
  • Slide 3

Typography

Code:

<h1>

Example:

h1 Heading h1 Heading h1 Heading

Code:

<h2>

Example:

h2 Heading h2 Heading h2 Heading h2 Heading

Code:

<h3>

Example:

h3 Heading h3 Heading h3 Heading h3 Heading h3 Heading

Code:

<h4>

Example:

h4 Heading h4 Heading h4 Heading h4 Heading h4 Heading h4 Heading

Code:

<h5>

Example:

h5 Heading h5 Heading h5 Heading h5 Heading h5 Heading h5 Heading h5 Heading

Code:

<h6>

Example:

h6 Heading h6 Heading h6 Heading h6 Heading h6 Heading h6 Heading h6 Heading h6 Heading

Code:

<p>

Example:

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.

Code:

<p class="footnote">

Example:

1 Here is the footnote.

Contact details

Uses both the Schema.org and hCard microformats.

Organisation Name

13 Mystreet, Mytown, Myshire, GU1 0AB, United Kingdom

Customer Service +44-1234-456789

Emergency +44-7900-123456

Email

Website

Text ranged left

Code:

<p class="align-left">

Example:

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

Code:

<p class="align-right">

Example:

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

Code:

<p class="align-center">

Example:

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

Code:

<p class="align-justify">

Example:

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 2 column span (when breakpoints allow)

Code:

<p class="layout-text2col">

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Text 3 column span (when breakpoints allow)

Code:

<p class="layout-text3col">

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Text 4 column span (when breakpoints allow)

Code:

<p class="layout-text4col">

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Inline text-level semantics

Anchor

Code:

<a>

Example:

The a element example

Abbreviation

Code:

<abbr>

Example:

The abbr element and abbr element with title examples

Bold

Code:

<b>

Example:

The non-semantic b element example

Citation

Code:

<cite>

Example:

The cite element example

Code

Code:

<code>

Example:

The code element example

Deleted

Code:

<del>

Example:

The del element example

Definition

Code:

<dfn>

Example:

The dfn element and dfn element with title examples

Emphasis

Code:

<em>

Example:

The em element example

Italic

Code:

<i>

Example:

The non-semantic i element example

Inserted

Code:

<ins>

Example:

The ins element example

Keyboard Input

Code:

<kbd>

Example:

The kbd element example

Mark

Code:

<mark>

Example:

The mark element example

Meter

Code:

<meter></meter>

Example:

Memory usage: 120GB out of 256GB used

Quote

Code:

<q>

Example:

The q element inside a q element

Strikethrough

Code:

<s>

Example:

The s element example

Sample

Code:

<samp>

Example:

The samp element example

Small

Code:

<small>

Example:

The small element example

Span

Code:

<span>

Example:

The span element example

Strong

Code:

<strong>

Example:

The strong element example

Subscript

Code:

<sub>

Example:

The sub element example

Superscript

Code:

<sup>

Example:

The sup element example

Underline

Code:

<u>

Example:

The u element example

Variable

Code:

<var>

Example:

The var element example

Progress indicators

Progress indicator

Code:

<progress value="0.66"></progress>

Example:

66%

100%

Progress indicator (indeterminate value)

Code:

<progress></progress>

Example:

Block text-level semantics

Disclosure (details/summary)

Code:

<details>
    <summary>System requirements</summary>
    <p>Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage.</p>
    <p>An input device as well as some form of output device is recommended.</p>
</details>

Example:

System requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage.

An input device as well as some form of output device is recommended.

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.

Somebody said this

Thematic break (hr tag)

Either plain <hr>or as a flourish <hr class="flourish">.

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).

A proper responsive image

Images

Alt text

Images with links

Alt text

Rounded images

Alt text

Circular images

Alt text

Figures

Figcaption content

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. 160x160px placeholder 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. 160x160px placeholder 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. 160x160px placeholder 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.

Videos

Video copyright 2008, Blender Foundation / www.bigbuckbunny.org.

Audio

“Moonlight Reprise” from “Irsen’s Tale” by Kai Engel. License: Attribution-NonCommercial 3.0 International License.

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.

Pill boxes

Pill message: success

Latest

Pill message: warning

Prelease

Pill message: error

Obsolete

Pill message: information (no semantic meaning)

Deprecated

Alert bubbles

Alert bubble: under (default position)

A suitable message goes here.

Alert bubble: over

A suitable message goes here.

Pagination

Breadcrumbs

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

Lists

Ordered

Code:

<ol>

Example:

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

Unordered

Code:

<ul>

Example:

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

Plain

Code:

<ul class="list--no-bullets">

Example:

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

Description

Code:

<dl>

Example:

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 and a highlighted row, but no <caption>.

This describes the table as microdata if no caption is used.

Primary Secondary Tertiary
Roast duck Seasonal vegetables New potatoes
Grilled lobster Mixed seafood Side salad
Chicken dinosaurs Baked beans Waffles

Bordered table

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

This is a table caption
Sector Planet Government Population
Alpha Diso Democracy 4.137 B
Lave Dictatorship 2.5 B
Leesti Corporate State 5.01 B
Beta Reorte Dictatorship 3.119 B
Zaonce Corporate State 5.3 B
This is the tfoot

Forms

Inputs





















Form Groups

Fieldset legend

Buttons

Link tag

Primary button Large button Small button

Span tag (disabled)

Cards

Text-only cards/article tiles

Card with default text

No card header or footer. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header content

Card with centred text

Also has a card header and footer. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Footer content

NEW

Card with aligned right text

Also has a card footer and alert pill. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footer content

Text and image cards/article tiles

FEATURED Alt text

Card with default text

No card header or footer, also has alert pill. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

FEATURED

Header content

Alt text

Card with centred text

Also has a card header, footer and alert pill. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Footer content

Card with default text

Also has a card footer. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alt text

Footer content

Social media

Full colour

Monochrome

Monochrome inverse

jQuery UI widgets

Collection of all the available jQuery UI widgets.

Interactions: Draggable

Drag me around!

Full documentation

Interactions: Resizable

Resize me!

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

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Full documentation

Widgets: Autocomplete


Full documentation

Widgets: Button

Default functionality buttons

<a> button

Icon buttons

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

Full documentation

Widgets: Checkboxradio

Checkboxes

Checkboxes (and without icons)

Radiobuttons

Full documentation

Widgets: Controlgroup

Controlgroup horizontal (checkboxes and select)

Controlgroup horizontal (radiobuttons)

Controlgroup vertical

Favourite drink

Full documentation

Widgets: Datepicker

Full documentation

Widgets: Dialog

Open basic dialog…

Non-modal dialog

Lorem ipsum dolor sit amet, Testlink quo epicuri volutpat no. Causae option accusamus in est. Mea id ignota meliore facilis, cu vim omnium appareat mediocrem. Eu oblique voluptua electram his. Mei eu movet recteque. Vis nulla graeci praesent ad, mediocrem expetenda pro ad.

Open modal dialog…

Modal dialog

Lorem ipsum dolor sit amet, Testlink quo epicuri volutpat no. Causae option accusamus in est. Mea id ignota meliore facilis, cu vim omnium appareat mediocrem. Eu oblique voluptua electram his. Mei eu movet recteque. Vis nulla graeci praesent ad, mediocrem expetenda pro ad.

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

Selectmenu - with option groups

Selectmenu - with disabled options

Selectmenu - with disabled optgroup

Full documentation

Widgets: Slider

Slider - horizontal

Slider - vertical

88 77 55 33 40 45 70

Full documentation

Widgets: Spinner

Full documentation

Widgets: Tabs

Tabs - horizontal

Note: Horizontal tabs switch to vertical tabs at smaller screen widths.

Carnivore tab contents

Lorem ipsum dolor sit amet, Testlink quo epicuri volutpat no. Causae option accusamus in est. Mea id ignota meliore facilis, cu vim omnium appareat mediocrem. Eu oblique voluptua electram his. Mei eu movet recteque. Vis nulla graeci praesent ad, mediocrem expetenda pro ad.

Herbivore tab contents

Timeam mentitum an nam. Mei ne prima perfecto adversarium. Quo eu tamquam invidunt verterem, albucius dissentiet ea eum Testlink. Facete fabellas referrentur et qui. Cu harum tempor vivendum vel. Nec quem movet nullam in. No stet tota pri.

Omnivore tab contents

Inermis indoctum vis in, has soleat complectitur te Testlink. Ut est stet civibus, mucius iriure ad duo. Sumo tantas et est, ea duo elitr utroque, ne mea dicant tincidunt scribentur. Sit dico accusata et. Sint inimicus cu nam, odio velit minim sit ut.

Tabs - vertical

Meat eater tab contents

Lorem ipsum dolor sit amet, Testlink quo epicuri volutpat no. Causae option accusamus in est. Mea id ignota meliore facilis, cu vim omnium appareat mediocrem. Eu oblique voluptua electram his. Mei eu movet recteque. Vis nulla graeci praesent ad, mediocrem expetenda pro ad.

Vegetarian tab contents

Timeam mentitum an nam. Mei ne prima perfecto adversarium. Quo eu tamquam invidunt verterem, albucius dissentiet ea eum Testlink. Facete fabellas referrentur et qui. Cu harum tempor vivendum vel. Nec quem movet nullam in. No stet tota pri.

Vegan tab contents

Inermis indoctum vis in, has soleat complectitur te Testlink. Ut est stet civibus, mucius iriure ad duo. Sumo tantas et est, ea duo elitr utroque, ne mea dicant tincidunt scribentur. Sit dico accusata et. Sint inimicus cu nam, odio velit minim sit ut.

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 size medium (24px)

Icons size large (32px)

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

Icons in a (plain) list as links

Icon colour states

  • Success text.
  • Warning text.
  • Error text.
  • Information text.

Miscellaneous

Loading spinner

Spin any element

Via CSS3 Animation.

Hello world!

Example of a subtle zebra stripe.

Example of a strong zebra stripe.