Article containing examples of various inline and block elements that should be considered and styled within any theme.
Typography
h1 Heading 1 h1 Heading 1 h1 Heading 1
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
h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4
h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5
h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6
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.
Addresses
Address: somewhere, worldText-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
exampleinside
a q element
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
Disclosure (details/summary)
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 class="alert alert-error" role="alert">
<a class="close" data-dismiss="alert">&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
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.
Images
Images with links
Figures

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.
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
Lists
- this is an example
- of a numbered
- (ordered) list
- and a second level
- 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.
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 |