Go to search Go to page navigation Go to main content

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

Grab the latest source code from the GitHub repository.

## Colourways

### Neutral

`--clr-bkgd`

`--clr-bkgd-box-subtle`

`--clr-bkgd-box-strong`

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

- This is a `figcaption` for slide 2 in the carousel.

## 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

Customer Service +44-1234-456789

Emergency +44-7900-123456

Email anon@example.com

Website https://hive-framework.philwareham.co.uk/

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

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

### Images

### Images with links

### Rounded images

### Circular images

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

### Videos

I’m sorry, your browser doesn’t support HTML5 video in MP4 with H.264 or WebM with VP8/VP9.

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

### Audio

I’m sorry, your browser doesn’t support HTML5 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

Test checkbox 1 Test checkbox 2 Test checkbox 3 (disabled) Test checkbox 4 (disabled checked)

Test radio 1 Test radio 2 Test radio 3 (disabled)

Inline form elements

Inline form elements (disabled)

File upload

Select multiple

Textarea

Colour

Date

Datetime local

Email

Month

Number

Password

Range
0 25 50 75 100

Search

Tel (phone)

Text *

Text with data list

Time

URL

Week

### Form Groups

Fieldset legend

Yes No Maybe

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

Card link

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.

Go somewhere

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.

### Text and image cards/article tiles

FEATURED

### 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

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

Go somewhere small

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

Card link

## Social media

### Full colour

- Facebook
- GitHub
- Instagram
- LinkedIn
- Mastodon
- Pinterest
- Twitter
- YouTube

### Monochrome

- Facebook
- GitHub
- Instagram
- LinkedIn
- Mastodon
- Pinterest
- Twitter
- YouTube

### Monochrome inverse

- Facebook
- GitHub
- Instagram
- LinkedIn
- Mastodon
- Pinterest
- Twitter
- YouTube

## 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

Countries

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

Dogs Cats Ferrets Disabled Disabled checked

#### Checkboxes (and without icons)

Dogs Cats Ferrets

#### Radiobuttons

Yes Maybe No

Full documentation

### Widgets: Controlgroup

#### Controlgroup horizontal (checkboxes and select)

B I U

#### Controlgroup horizontal (radiobuttons)

Off On

#### Controlgroup vertical

Favourite drink

Tea Coffee Tequila

Add milk Add ice Add vodka

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

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

#### Selectmenu - with option groups

Select a file

#### Selectmenu - with disabled options

Select a number

#### Selectmenu - with disabled optgroup

Select a file 2

Full documentation

### Widgets: Slider

#### Slider - horizontal

#### Slider - vertical

88 77 55 33 40 45 70

Full documentation

### Widgets: Spinner

Select a value:

Full documentation

### Widgets: Tabs

#### Tabs - horizontal

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

- Carnivore
- Herbivore
- Omnivore

#### 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
- Vegetarian
- Vegan

#### 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

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

## Miscellaneous

### Loading spinner

### Spin any element

Via CSS3 Animation.

Example of a subtle zebra stripe.

Example of a strong zebra stripe.

Example of a subtle highlight zebra stripe.

Example of a strong highlight zebra stripe.