Hive theme design patterns
v4.8

The purpose of this guide is to document UI elements used within this theme in order to streamline development, avoid conflicts and inconsistencies, and as a reference for admin theme authors and plugin authors.

Switch to RTL layout
Switch light/dark mode

Colourways

Neutral

background

background-box

gradient-from

gradient-to

border-extra-light

border-light

border

border-dark

border-extra-dark

text-footnote

text

Accent

highlight-box

strong-highlight-box

accent-gradient-from

accent-gradient-to

Interaction

selected

selecting

link-focus

link-hover

link

State

success-background

success-text

warning-background

warning-text

error-background

error-text

info-background

info-text

Columns and grids

Page layout columns new v4.6

Responsive page layout grid.

Code:

<div class="txp-layout">

    <div class="txp-layout-1col">...Opt1: 1col - content here...</div>

    <div class="txp-layout-2col">...Opt2: 2col cell1 - content here...</div>
    <div class="txp-layout-2col">...Opt2: 2col cell2 - content here...</div>

    <div class="txp-layout-4col">...Opt3: 4col cell1 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell2 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell3 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-2span">...Opt4: 4col cell1and2 - content here...</div>
    <div class="txp-layout-4col">...Opt4: 4col cell3 - content here...</div>
    <div class="txp-layout-4col">...Opt4: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-alt">...Opt5: 4col cell1 - content here...</div>
    <div class="txp-layout-4col-2span">...Opt5: 4col cell2and3 - content here...</div>
    <div class="txp-layout-4col-alt">...Opt5: 4col cell4 - content here...</div>

    <div class="txp-layout-4col">...Opt6: 4col cell1 - content here...</div>
    <div class="txp-layout-4col">...Opt6: 4col cell2 - content here...</div>
    <div class="txp-layout-4col-2span">...Opt6: 4col cell3and4 - content here...</div>

    <div class="txp-layout-4col-3span">...Opt7: 4col cell1and2and3 - content here...</div>
    <div class="txp-layout-4col-alt">...Opt7: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-alt">...Opt8: 4col cell1 - content here...</div>
    <div class="txp-layout-4col-3span">...Opt8: 4col cell2and3and4 - content here...</div>

</div>

Example:

Opt1: 1col

Opt2: 2col cell1

Opt2: 2col cell2

Opt3: 4col cell1

Opt3: 5col cell2

Opt3: 6col cell3

Opt3: 7col cell4

Opt4: 4col cell1and2

Opt4: 4col cell3

Opt4: 4col cell4

Opt5: 4col cell1

Opt5: 4col cell2and3

Opt5: 4col cell4

Opt6: 4col cell1

Opt6: 4col cell2

Opt6: 4col cell3and4

Opt7: 4col cell1and2and3

Opt7: 4col cell4

Opt8: 4col cell1

Opt8: 4col cell2and3and4

Text columns changed v4.6

This is the standard column width for any text-based content in the admin-side, such as a plugin help page. Larger than the golden ratio at full width spans but a good trade-off between readability and economic use of screen estate. Please note this replaces the old .plugin-help 4.4.x and .text-column 4.5 classes.

Code:

<div class="txp-layout-textbox">
    <p>...content here...</p>
</div>

Example:

Text column (independent of grid columns)

Inline grids changed v4.7

Flexible inline grid content layouts.

Code:

<div class="txp-grid">
    <div class="txp-grid-cell">
        <p>Grid item 1</p>
    </div><div class="txp-grid-cell">
        <p>Grid item 2</p>
    </div><div class="txp-grid-cell txp-grid-cell-2span">
        <p>Grid item 3</p>
    </div><div class="txp-grid-cell highlight">
        <p>Grid item 4</p>
    </div>
    ...etc...
</div>

Example:

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Longer text item example to show how Flexbox stretches vertically to fill the addtional area

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Short text item.

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Notes:

You should define a specific width for any .txp-grid-cell which you want to span more than one standard cell width, using an additonal classname of .txp-grid-cell-Xspan, where X can be 2 to 4 (corresponding to a span of 2 to 4 standard cell widths).

Headings changed v4.5

Code:

<h1 class="txp-heading">

Example:

h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 heading 1

Notes:

Top level headings in the Textpattern admin area, we advise adding the class="txp-heading" attribute which allows advanced users to optionally hide headings throughout the admin area.

Code:

<h2>

Example:

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

Code:

<h3>

Example:

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

Paragraphs and footnotes

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:

This is a footnote and is smaller and lighter than standard paragraph text.

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 (non-semantic)

Code:

<b>

Example:

The 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 (non-semantic)

Code:

<i>

Example:

The 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

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 native

Code:

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

Example:

(66%)

(100%)

Progress indicator native (indeterminate value)

Code:

<progress></progress>

Example:

Progress indicator styled

Code:

<progress class="txp-upload-progress" value="0.66"></progress>

Example:

(66%)

(100%)

Progress indicator styled (indeterminate value)

Code:

<progress class="txp-upload-progress"></progress>

Example:

Inline text labels

Safe new v4.5

Code:

<span class="success">...message...</span>

<strong class="success">...message...</strong>

Example:

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

Warning new v4.5

Code:

<span class="warning">...message...</span>

<strong class="warning">...message...</strong>

Example:

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

Danger new v4.5

Code:

<span class="error">...message...</span>

<strong class="error">...message...</strong>

Example:

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

Information (no semantic meaning) new v4.5

Code:

<span class="information">...message...</span>

<strong class="information">...message...</strong>

Example:

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

Alert boxes

System message: success new v4.5

Code:

<p class="alert-block success"><span class="ui-icon ui-icon-check"></span> ...message...</p>

Example:

Success: a suitable success message goes here.

System message: warning changed v4.5

Code:

<p class="alert-block warning"><span class="ui-icon ui-icon-alert"></span> ...message...</p>

Example:

Warning: a suitable warning message goes here.

System message: error new v4.5

Code:

<p class="alert-block error"><span class="ui-icon ui-icon-alert"></span> ...message...</p>

Example:

Error: a suitable error message goes here.

System message: information (no semantic meaning) new v4.5

Code:

<p class="alert-block information"><span class="ui-icon ui-icon-info"></span> ...message...</p>

Example:

Information: a suitable information message goes here.

System messagepanes new v4.5

Article posted. Close
Filename sanitized. Close
Username(s) not found. Close

Alert pills

Pill message: success new v4.8

Code:

<span class="alert-block alert-pill success">...message...</span>

Example:

Latest

Pill message: warning new v4.8

Code:

<span class="alert-block alert-pill warning">...message...</span>

Example:

Prelease

Pill message: error new v4.8

Code:

<span class="alert-block alert-pill error">...message...</span>

Example:

Obsolete

Pill message: information (no semantic meaning) new v4.8

Code:

<span class="alert-block alert-pill information">...message...</span>

Example:

Deprecated

Block text-level semantics

Pre-formatted text blocks

Code:

<pre dir="auto">...content...</pre>

Example:

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

Notes:

Changed at 4.6: Added dir="auto" attribute, which allows the browser to determine whether text direction should be LTR or RTL depending on content.

Pre-formatted code blocks

Code:

<pre dir="ltr"><code>...content...</code></pre>

Example:

<div class="messagepane" id="messagepane" role="alert">
    <span class="success" id="message">Article posted. <a class="close" title="Close" aria-label="Close">&<span role="presentation">times;</span></a></span>
</div>

Notes:

Changed at 4.6: Added dir="ltr" attribute, which ensures computer code text direction is LTR.

Pre-formatted code blocks with syntax highlighting new v4.5

Uses Prism to provide syntax highlighting. We include support for the following languages:

  • class="language-markup" (HTML)
  • class="language-css" (CSS)
  • class="language-clike" (C-like)
  • class="language-javascript" (JavaScript)
  • class="language-json" (JSON)
  • class="language-php" (PHP)
  • class="language-markdown" (Markdown)
  • class="language-textile" (Textile)

Code:

<pre dir="ltr"><code class="language-markup">...content...</code></pre>

Example:

<div class="messagepane" id="messagepane" role="alert">
    <span class="success" id="message">Article posted. <a class="close" title="Close" aria-label="Close">&<span role="presentation">times;</span></a></span>
</div>

Embedded content

Image (unstyled)

Code:

<img src="" alt="">

Example:

160×160px placeholder

Image (styled) new v4.5

Code:

<img class="content-image" src="" alt="">

Example:

160×160px placeholder

Image (styled) with link new v4.5

Code:

<a href="" title=""><img class="content-image" src="" alt=""></a>

Example:

160×160px placeholder

Left ranged image new v4.5

Code:

<img class="align-left" src="" alt="">

Example:

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. 120×120px 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 new v4.5

Code:

<img class="align-right" src="" alt="">

Example:

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. 120×120px 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 new v4.5

Code:

<img class="align-center" src="" alt="">

Example:

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. 120×120px 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.

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="plain-list">

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 changed v4.6.1

Code:

<table>
    <thead>
        <tr>
            <th scope="col">Primary</th>
            <th scope="col">Secondary</th>
            <th scope="col">Tertiary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Roast duck</th>
            <td>Seasonal vegetables</td>
            <td>New potatoes</td>
        </tr>
        <tr>
            <th scope="row">Grilled lobster</th>
            <td>Mixed seafood</td>
            <td>Side salad</td>
        </tr>
        <tr>
            <th scope="row">Chicken dinosaurs</th>
            <td>Baked beans</td>
            <td>Waffles</td>
        </tr>
    </tbody>
</table>

Example:

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

Notes:

Changed at 4.6.1: Moved some listtable styling to basic tables.

List tables changed v4.6

Code:

<div class="txp-listtables">
    <table class="txp-list">
        <thead>
            <tr>
                <th class="desc" scope="col"><a href="">...</a></th>
                <th scope="col">...</th>
                <th scope="col">...</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr>
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr class="highlight">
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">...</td>
            </tr>
        </tfoot>
    </table>
</div>

Example:

Planet Population Government
Diso 4.1 B Democracy
Lave 2.5 B Dictatorship
Leesti 5.0 B Corporate State
Reorte 3.1 B Dictatorship
Zaonce 5.3 B Corporate State
This is the tfoot (optional)

Notes:

Changed at 4.6: Added scope attribute to columns and rows. Each <tbody> row now has a <th> cell.

Progress summaries new v4.5

Code:

<aside class="progress-meter">
    <p class="txp-accessibility">There are 4 steps to this installation process:</p>
    <ol>
        <li class="active"><strong>Add database details</strong></li>
        <li>Add config.php file</li>
        <li>Create database</li>
        <li>Go!</li>
    </ol>
</aside>

Example:

Summary/details boxes changed v4.6

Collapsible

Code:

<section class="txp-details" id="regionname1_group" aria-labelledby="regionname1_group-label">
    <h3 class="txp-summary expanded" id="regionname1_group-label"><a href="#name-of-details" role="button" aria-controls="name-of-details" aria-pressed="true">Heading (lever)</a></h3>
    <div class="toggle" id="name-of-details" role="group" aria-expanded="true">
        ...content...
    </div>
</section>

Example:

Heading (lever)

Standard paragraph text within a collapsible details box.

  • Unordered list
  • items within
  • a collapsible details box
  1. Ordered list
  2. items within
  3. a collapsible details box
  • Plain (unstyled) list
  • items within
  • a collapsible details box

Notes:

The WAI-ARIA attribute states and expanded class are managed via JavaScript. May eventually be changed to use HTML5.1 <details> and <summary> tags when browser support is better.

Non-collapsible

Code:

<section class="txp-details" id="regionname1_group" aria-labelledby="regionname1_group-label">
    <h3 id="regionname1_group-label">Heading</h3>
    <div role="group">
        ...content...
    </div>
</section>

Example:

Heading

Standard paragraph text within a non-collapsible details box.

  • Unordered list
  • items within
  • a non-collapsible details box
  1. Ordered list
  2. items within
  3. a non-collapsible details box
  • Plain (unstyled) list
  • items within
  • a non-collapsible details box

Notes:

This replaces the <fieldset> boxes used in Textpattern v4.5 and below.

Forms

Textareas

Code:

<textarea id="" name="">

Example:

Text fields large new v4.5

Code:

<input class="input-large" id="" name="" size="64" type="text">

Example:

Text fields standard

Code:

<input id="" name="" type="text" size="32">

Example:

Text fields medium new v4.5

Code:

<input class="input-medium" id="" name="" type="text" size="16">

Example:

Text fields small new v4.5

Code:

<input class="input-small" id="" name="" type="text" size="8">

Example:

Text fields extra small new v4.5

Code:

<input class="input-xsmall" id="" name="" type="text" size="4">

Example:

Password fields

Code:

<input id="" name="" type="password" size="32">

Example:

Date fields

Code:

<div class="txp-form-field">
    <div class="txp-form-field-label">Date</div>
    <div class="txp-form-field-value">
        <input class="input-year" id="year" name="year" type="text" size="4" maxlength="4" title="Year" placeholder="yyyy">
        <span role="separator">/</span>
        <input class="input-month" id="month" name="month" type="text" size="2" maxlength="2" title="Month" placeholder="mm">
        <span role="separator">/</span>
        <input class="input-day" id="day" name="day" type="text" size="2" maxlength="2" title="Day" placeholder="dd">
    </div>
</div>

Example:

/ /

Time fields

Code:

<div class="txp-form-field">
    <div class="txp-form-field-label">Time</div>
    <div class="txp-form-field-value">
        <input class="input-hour" id="hour" name="hour" type="text" size="2" maxlength="2" title="Hour" placeholder="hh">
        <span role="separator">:</span>
        <input class="input-minute" id="minute" name="minute" type="text" size="2" maxlength="2" title="Minute" placeholder="mm">
        <span role="separator">:</span>
        <input class="input-second" id="second" name="second" type="text" size="2" maxlength="2" title="Second" placeholder="ss">
    </div>
</div>

Example:

: :

File uploads

Code:

<div class="inline-file-uploader">
    <label for="file-upload">Upload file</label>
    <input type="file" multiple>
    <span class="inline-file-uploader-actions">
        <label for="file_example_category">Category</label>
        <select id="file_example_category">
            <option value="" selected> </option>
            <option value="file-example-category">Example category</option>
        </select>
    </span>
    <span class="inline-file-uploader-actions">
        <input type="submit" value="Upload">
    </span>
</div>

Example:

Checkboxes

Code:

<input type="checkbox" id="test_checkbox_1" name="test_checkbox_1">
<label for="test_checkbox_1">Test checkbox 1</label>

Example:

Radiobuttons

Code:

<input type="radio" id="test_radio_1" name="test_radio_group">
<label for="test_radio_1">Test radio 1</label>

Example:

Selects

Single select

Code:

<select id="" name="">
    <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
    </optgroup>
</select>

Example:

Multiple select

Code:

<select id="" name="" multiple="multiple" size="10">
    <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
    </optgroup>
</select>

Example:

Disabled form elements

Code:

<select disabled>
<input type="text" disabled>
<input type="button" disabled>

Example:

Buttons

Primary and standard buttons

Code:

<input class="publish" type="submit" value="">
<input type="submit" value="Input Submit">
<input type="button" value="Input Button">
<button>Button Tag</button>
<a class="txp-button" href="">Link (txp-button)</a>
<a class="navlink" href="">Link (navlink)</a>

Example:

Link (txp-button) Link (navlink)

Primary and standard buttons disabled

Code:

<input class="publish" type="submit" value="" disabled>
<input type="submit" value="Input Submit" disabled>
<input type="button" value="Input Button" disabled>
<button disabled>Button Tag</button>
<span class="txp-button disabled" href="">Link (txp-button)</span>
<span class="navlink" href="">Link (navlink)</span>

Example:

Link (txp-button) Link (navlink)

Delete buttons changed v4.6

Code (button version):

<button class="destroy" type="submit" title="Delete">
    <span class="ui-icon ui-icon-close">Delete</span>
</button>

Example (button verson):

Code (link version):

<a class="destroy ui-icon ui-icon-close" title="Delete" href="#">Delete</a>

Example (link verson):

Delete

Notes:

Changed at 4.6: Using button tag primarily.

Button sets

Code:

<p class="nav-tertiary">
    <a class="navlink-active" href="#">Page 1</a><a class="navlink" href="#">Page 2</a><a class="navlink" href="#">Page 3</a>
</p>

Example:

Page 1Page 2Page 3

Edit panes changed v4.6

Code:

<form class="txp-edit" method="post" action="#">
    <h2>Edit panel title</h2>

    <div class="txp-form-field prefs-example-1">
        <div class="txp-form-field-label"><label for="prefs_example_1">Long text</label></div>
        <div class="txp-form-field-value"><input id="prefs_example_1" name="prefs_example_1" type="text" size="32"></div>
    </div>
    <div class="txp-form-field prefs-example-2">
        <div class="txp-form-field-label"><label for="prefs_example_2">Medium text</label></div>
        <div class="txp-form-field-value"><input class="input-medium" id="prefs_example_2" name="prefs_example_2" type="text" size="8"></div>
    </div>
    <div class="txp-form-field prefs-example-3">
        <div class="txp-form-field-label"><label for="prefs_example_3">Select</label></div>
        <div class="txp-form-field-value">
            <select id="prefs_example_3" name="prefs_example_3">
                <option value="" selected> </option>
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
    </div>

    <div class="txp-form-field prefs-example-4">
        <div class="txp-form-field-label"><label for="prefs_example_4">Select multiple</label></div>
        <div class="txp-form-field-value">
            <select id="prefs_example_4" name="prefs_example_4" multiple="multiple" size="3">
                <option value="1">Some text goes here</option>
                <option value="2">Another choice could be here</option>
                <option value="3">Yet another item to be chosen</option>
                <option value="4">Yep, another item here</option>
                <option value="5">Finally, some text goes here</option>
            </select>
        </div>
    </div>
    <div class="txp-form-field prefs-example-5">
        <div class="txp-form-field-label">Radio buttons</div>
        <div class="txp-form-field-value">
            <input class="radio active" id="prefs_example_5_0" name="prefs_example_5" type="radio" value="0" checked>
            <label for="prefs_example_5_0">No</label>
            <input class="radio" id="prefs_example_5_1" name="prefs_example_5" type="radio" value="1">
            <label for="prefs_example_5_1">Yes</label>
        </div>
    </div>
    <div class="txp-form-field txp-form-field-textarea prefs-example-6">
        <div class="txp-form-field-label"><label for="prefs_example_6">Textarea</label></div>
        <div class="txp-form-field-value"><textarea id="prefs_example_6" name="prefs_example_6" cols="64" rows="4"></textarea></div>
    </div>
    ...etc...
    <p class="txp-edit-actions">
        <a class="txp-button" href="#">Cancel</a>
        <input class="publish" type="submit" value="Save">
    </p>

</form>

Example:

Edit panel title

Radio buttons

Cancel

jQuery UI widgets new v4.6

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

Disabled buttons

Update

Full documentation

Widgets: Checkboxradio

Checkboxes

Checkboxes (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…

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Open modal dialog…

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.

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

Widgets: Progressbar

Determinate value

Animate to random number

Indeterminate value

Full documentation

Widgets: Selectmenu

Selectmenu - standard

Selectmenu - with link-style button

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat.

Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing.

Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.

Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.

Tabs - vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat.

Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing.

Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.

Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.

Full documentation

Widgets: Tooltip

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

Full documentation

Styles: Icons

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

Icons in a (plain) list as links

Icon colour states

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

Miscellaneous

Accessibility text new v4.6

Code:

<p class="txp-accessibility">...content...</p>

Notes:

Accessibility text is hidden from the page but available to screen readers as an aid to those with visual impairments. This is accomplished via CSS visibility: hidden; not via display: hidden; (which would hide the text from most screen readers too).

AJAX loading spinner new v4.5

Code:

<span class="spinner ui-icon ui-icon-refresh"></span>

Example:

Disabled non-form elements new v4.5

Code:

<p class="disabled" aria-disabled="true">...message...</p>

Example:

This is an example of an element greyed out via a .disabled class.

Notes:

This class only gives a visual impression of disabled elements, any form elements therein may still be active and clickable. To truly disable form elements use the proper disabled attribute instead, see the forms section for more information.