Sitename

Menu

Design patterns

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, plus Internet Explorer 11. Development environment uses Grunt and Sass.

Grab the latest source code from the GitHub repository.

Colourways

Neutral

background

background-box

gradient-from

gradient-to

border-light

border

text-footnote

text

Accent

highlight-box

strong-highlight-box

highlight

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

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.

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.

  • Slide 01
  • Slide 02
  • Slide 03

Typography

Code:

<h1>

Example:

h1 Heading 1 h1 Heading 1 h1 Heading 1

Code:

<h2>

Example:

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

Code:

<h4>

Example:

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

Code:

<h5>

Example:

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

Code:

<h6>

Example:

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

Code:

<p>

Example:

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

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

Code:

<p class="footnote">

Example:

1 Here is the footnote.

Contact details

Uses both the Schema.org and hCard microformats.

Organisation Name

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

Customer Service +44-1234-456789

Emergency +44-7900-123456

Email

Website

Photo Photo

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)

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

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

Embedded content

Proper responsive images

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

A proper responsive image

Images

Alt text

Images with links

Alt text

Rounded images

Alt text

Circular images

Alt text

Figures

Figcaption content

Left ranged image

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

Right ranged image

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

Centred image

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

Videos

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

Audio

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

Inline text labels

Safe

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

Warning

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

Danger

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

Information (no semantic meaning)

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

Alert boxes

System message: success

Success: a suitable success message goes here.

System message: warning

Warning: a suitable warning message goes here.

System message: error

Error: a suitable error message goes here.

System message: information (no semantic meaning)

Information: a suitable information message goes here.

Pagination

Breadcrumbs

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

Lists

Ordered

Code:

<ol>

Example:

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

Unordered

Code:

<ul>

Example:

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

Plain

Code:

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

Example:

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

Description

Code:

<dl>

Example:

This is a definition list term 1
Definition of term 1 here
Another definition of term 1
A sub term
With
Subs

Tables

Plain table

Plain table with <thead> included and a highlighted row, but no <caption>.

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

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

Bordered table

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

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

Forms

Inputs





















Form Groups

Fieldset legend

Buttons

Link tag Span tag (disabled)

Social media

jQuery UI widgets

Collection of all the available jQuery UI widgets.

Interactions: Draggable

Drag me around!

Full documentation

Interactions: Resizable

Resize me!

Full documentation

Interactions: Selectable

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

Full documentation

Interactions: Sortable

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

Full documentation

Widgets: Accordion

Section 1

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

Section 2

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

Section 3

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

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

Section 4

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

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

Full documentation

Widgets: Autocomplete


Full documentation

Widgets: Button

Default functionality buttons

<a> button

Icon buttons

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

Full documentation

Widgets: Checkboxradio

Checkboxes

Checkboxes (and without icons)

Radiobuttons

Full documentation

Widgets: Controlgroup

Controlgroup horizontal (checkboxes and select)

Controlgroup horizontal (radiobuttons)

Controlgroup vertical

Favourite drink

Full documentation

Widgets: Datepicker

Full documentation

Widgets: Dialog

Open basic dialog…

Non-modal dialog

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

Open modal dialog…

Modal dialog

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

Full documentation

Widgets: Menu

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

Note: Currently jQuery UI does not support horizontal menus.

Full documentation

Widget: Progressbar

Determinate value

Animate to random number

Indeterminate value

Full documentation

Widgets: Selectmenu

Selectmenu - standard

Selectmenu - with option groups

Selectmenu - with disabled options

Selectmenu - with disabled optgroup

Full documentation

Widgets: Slider

Slider - horizontal

Slider - vertical

88 77 55 33 40 45 70

Full documentation

Widgets: Spinner

Full documentation

Widgets: Tabs

Tabs - horizontal

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

Carnivore tab contents

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

Herbivore tab contents

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

Omnivore tab contents

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

Tabs - vertical

Meat eater tab contents

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

Vegetarian tab contents

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

Vegan tab contents

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

Full documentation

Widgets: Tooltip

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

Full documentation

Styles: Icons

My additions to standard jQuery UI icon set

Icons inline with text

Lorem ipsum dolor sit amet, Search consectetuer adipiscing elit.

Icons in a (plain) list

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

Icons in a (plain) list as links

Icon colour states

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

Miscellaneous

Loading spinner

Spin any element

Via CSS3 Animation.

Hello world!