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. As of Textpattern v4.8, additional 3 column layouts are also supported.
Code:
<div class="txp-layout">
<div class="txp-layout-1col">Opt1: 1col</div>
<div class="txp-layout-2col">Opt2: 2col cell1</div>
<div class="txp-layout-2col">Opt2: 2col cell2</div>
<div class="txp-layout-3col">Opt3: 3col cell1</div>
<div class="txp-layout-3col">Opt3: 3col cell2</div>
<div class="txp-layout-3col">Opt3: 3col cell3</div>
<div class="txp-layout-3col-2span">Opt4: 3col cell1and2</div>
<div class="txp-layout-3col">Opt4: 3col cell3</div>
<div class="txp-layout-3col">Opt5: 3col cell1</div>
<div class="txp-layout-3col-2span">Opt5: 3col cell2and3</div>
<div class="txp-layout-4col">Opt6: 4col cell1</div>
<div class="txp-layout-4col">Opt6: 4col cell2</div>
<div class="txp-layout-4col">Opt6: 4col cell3</div>
<div class="txp-layout-4col">Opt6: 4col cell4</div>
<div class="txp-layout-4col-2span">Opt7: 4col cell1and2</div>
<div class="txp-layout-4col">Opt7: 4col cell3</div>
<div class="txp-layout-4col">Opt7: 4col cell4</div>
<div class="txp-layout-4col-alt">Opt8: 4col cell1</div>
<div class="txp-layout-4col-2span">Opt8: 4col cell2and3</div>
<div class="txp-layout-4col-alt">Opt8: 4col cell4</div>
<div class="txp-layout-4col">Opt9: 4col cell1</div>
<div class="txp-layout-4col">Opt9: 4col cell2</div>
<div class="txp-layout-4col-2span">Opt9: 4col cell3and4</div>
<div class="txp-layout-4col-3span">Opt10: 4col cell1and2and3</div>
<div class="txp-layout-4col-alt">Opt10: 4col cell4</div>
<div class="txp-layout-4col-alt">Opt11: 4col cell1</div>
<div class="txp-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
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:
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
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
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:
Image (styled) new v4.5
Code:
<img class="content-image" src="" alt="">
Example:
Image (styled) with link new v4.5
Code:
<a href="" title=""><img class="content-image" src="" alt=""></a>
Example:
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. 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. 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. 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:
- this is an example
- of a numbered
- (ordered) list
- and a second level
- 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
- Ordered list
- items within
- 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
- Ordered list
- items within
- 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.
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:
jQuery UI widgets new v4.6
Collection of all the available jQuery UI widgets.
Interactions: Draggable
Interactions: Resizable
Interactions: Selectable
Interactions: Sortable
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.
Widgets: Autocomplete
Widgets: Button
Default functionality buttons
Icon buttons
<a> icon only <a> icon on the left <a> icon on the right <a> two icons
Disabled buttons
Widgets: Checkboxradio
Checkboxes
Checkboxes (without icons)
Radiobuttons
Widgets: Controlgroup
Controlgroup horizontal (checkboxes and select)
Controlgroup horizontal (radiobuttons)
Controlgroup vertical
Widgets: Datepicker
Widgets: 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.
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.
Widgets: Menu
Note: Currently jQuery UI does not support horizontal menus.
Widgets: Progressbar
Determinate value
Indeterminate value
Widgets: Selectmenu
Selectmenu - standard
Selectmenu - with link-style button
Selectmenu - with option groups
Selectmenu - with disabled options
Selectmenu - with disabled optgroup
Widgets: Slider
Slider - horizontal
Slider - vertical
Widgets: Spinner
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.
Widgets: Tooltip
Here is an example of a link with a tooltip, mouseover to reveal it.
Styles: Icons
Additions to standard jQuery UI icon set
Icons inline with text
Lorem ipsum dolor sit amet,
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).
Secondary text new v4.8
Code:
<span class="secondary-text">...content...</span>
Example:
An example of inline secondary text is here.
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.