Erat admodum amplum canis…

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.

Caseus foetida! Caseus foetida!

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.

Article containing examples of various inline and block elements that should be considered and styled within any theme.

Typography

Using only h1 to h4 in this theme.

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

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 Heading 3

h4 Heading 4 h4 Heading 4 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 footnote¹.

¹ Here is the footnote.

Addresses

Address: somewhere, world

Text alignment

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.

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

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.

Embedded content

Remember that all images and videos in the theme are max-width:100%; for flexibility and accommodation of responsive design, so parent containers are what control a given desired image/video width in layout, except when they are at their maximum width already (100%). Images/video width and height attribute values should never be used.

Audio

Images

Images with links

Figures

SVG

Videos

Image alignment

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

Details / summary

More info

Additional information

• Point 1
• Point 2

Lists

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

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

This is a definition list term 1

Definition of term 1 here

Another definition of term 1

A sub term

With

Subs

Tables

Table with <caption>, <thead> and <tfoot> included.

This is a table caption

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

Forms

Test checkbox 1     Test checkbox 2     Test checkbox 3

Test radio 1     Test radio 2     Test radio 3

Select drop-down
Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen

Select multiple
Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen

Textarea

URL

Email

Text

Text with data list

Datetime local

Number

Tel (phone)

Datetime

Date

Month

Search

Range

Colour

      Button tag

What do you want to do next?

• Modify or even delete this article? The article list is the place to start.
• Change this site’s name, or modify the style of the URLs? It’s all up to your preferences.
• Get yourself acquainted with Textile, the humane web text generator which comes with Textpattern CMS? The basics are simple. If you want to learn more about Textile, you can view the extensive Textile Reference Manual.
• Be guided through your Textpattern CMS First Steps by completing some basic tasks?
• Study the Textpattern CMS Semantic Model
• Add another user, or extend the capabilities with third party plugins you discovered from the central plugin directory at Textpattern CMS Plugins
• Dive in and learn by trial and error? Then please note:
  • When you write an article you assign it to a section of your site.
  • Sections use a page template and a style as an output scaffold.
  • Page templates use HTML and Textpattern tags (like this: <txp:article />) to build the markup.
  • Some Textpattern tags use forms, which are building blocks for reusable snippets of code and markup you may build and use at your discretion.

There are a host of frequently asked questions to help you get started.

Textpattern tags, their attributes and values are well explained and demonstrated at the Textpattern CMS Documentation, where you will also find valuable tips and tutorials.

If all else fails, there’s a whole crowd of friendly, helpful people over at the Textpattern CMS Support Forum. Come and pay us a visit!