Go to main content

Design patterns

Examples of inline/block elements that should be considered and styled within the Textpattern website. Supported browsers: Chrome, Edge, Firefox, Safari, Opera the last 2 stable releases.

Colourways

Neutral

bkgd

bkgd-box

grad-from

grad-to

brdr-x-lite

brdr-lite

brdr

brdr-dark

brdr-x-dark

text-demoted

text

text-promoted

Accent

hilite-box

strong-hilite-box

hilite

Interaction

nav-active

nav-interact

focus

a-interact

a

State

success-bkgd

success-text

warning-bkgd

warning-text

error-bkgd

error-text

info-bkgd

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

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

Typography

h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 Heading 1

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

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

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

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.

This text has a reference in the footnote1.

1 Here is the footnote.

Text ranged left

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

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

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

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.

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

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

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

Block text-level semantics

Pre-formatted text blocks

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

Pre-formatted code blocks

<section class="alert alert-error fade in" role="alert">
    <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 class="alert alert-error fade in" role="alert">
    <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.

Examples (no semantics implied)

Code:

<p class="example">

Example:

An example paragraph for demonstration purposes. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Images

Alt text

Images with links

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.

Inline text labels

Safe

class="success"

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

Warning

class="warning"

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

Danger

class="error"

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

Information (no semantic meaning)

class="information"

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

Alert boxes

System message: success

<p class="alert-block success">

Success: a suitable success message goes here.

System message: warning

<p class="alert-block warning">

Warning: a suitable warning message goes here.

System message: error

<p class="alert-block error">

Error: a suitable error message goes here.

System message: information (no semantic meaning)

<p class="alert-block information">

Information: a suitable information message goes here.

Pill boxes

Pill message: success

<small class="alert-block alert-pill success">Latest</small>

Latest

Pill message: warning

<small class="alert-block alert-pill warning">Prelease</small>

Prelease

Pill message: error

<small class="alert-block alert-pill error">Obsolete</small>

Obsolete

Pill message: information (no semantic meaning)

<small class="alert-block alert-pill information">Deprecated</small>

Deprecated

Pagination

Breadcrumbs

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

Files

Code:

<ul class="list--files">

Example:

  • parent_directory
    • child_directory1
    • ...
    • child_directory4
      • file1.ext
      • file2.ext
      • image1.png
    • ...

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

Simple table (without <thead>, <tfoot> tags)

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

Full Table

Full-feautured table with scope, rowspan colspan attributes, and <caption>, <colgroup>, <thead>, <tfoot>, <tbody> tags 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)

Primary link tag

Large button Small button

Cards

Text-only cards/article tiles

Card with default text

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

Header content

Card with centred text

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

Footer content

NEW

Card with aligned right text

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

Footer content

Text and image cards/article tiles

FEATURED Alt text

Card with default text

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

FEATURED

Header content

Alt text

Card with centred text

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

Footer content

Card with default text

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

Alt text

Footer content

Social media