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

Colourways

Neutral

background

background-box

gradient-from

gradient-to

border

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

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.

Contact details

Uses both the Schema.org and hCard microformats.

Organization Name

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

Telephone 01234 456789

Mobile 07900 123456

Email

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

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var 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.

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

Rounded images

Alt text

Circular images

Alt text

Figures

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

SVG

Videos

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.

Pagination

Breadcrumbs

Lists

Number list

<ol>

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

Bullet list

<ul>

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

Plain list

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

  • this is an example
  • of a no-bullets
  • (unordered) list
    • and a second level
    • no-bullets list example

Definition list

<dl>

This is a definition list term
Definition of term here
Another definition of term

Tables

Plain table

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

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
This is the tfoot
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

Forms

Inputs




















Form Groups

Fieldset legend

   

Buttons

Link tag Span tag (disabled)

Primary link tag

Large button Small button

Social media