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

h2. Typography

h1. h1 Heading 1 h1 Heading 1 h1 Heading 1

h2. h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2

h3. h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3

h4. h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4

h5. h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5

h6. 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 footnote[1].

fn1. Here is the footnote.

h3. Addresses

notextile. <address>Address: somewhere, world</address>

h2. Text-level semantics

The "a element":http://codeispottery.com/ example
The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples
The **b element** example
The ??cite element?? example
The @code element@ example
The -del element- example
The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples
The _em element_ example
The __i element__ example
The +ins element+ example
The <kbd>kbd element</kbd> example
The <mark>mark element</mark> example
The <q>q element <q>inside</q> a q element</q> example
The <s>s element</s> example
The <samp>samp element</samp> example
The <small>small element</small> example
The %span element% example
The *strong element* example
The ~sub element~ example
The ^sup element^ example
The <u>u element</u> example
The <var>var element</var> example

h2. Block text-level semantics

h3. Disclosure (details/summary)

notextile. <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 <a href="#">input device</a> as well as some form of <a href="#">output device</a> is recommended.</p>
</details>

h3. Pre-formatted text blocks

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

h3. Pre-formatted code blocks

bc. <section class="alert alert-error" role="alert">
    <a class="close" data-dismiss="alert">&amp;times;</a>
    <h3>Message pane</h3>
    <p>Error message goes here.</p>
</section>

h3. Blockquotes

bq.:https://textpattern.com/ Here is an example of a block quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

h3. Thematic break (hr tag)

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

<hr>

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

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

h3. Images

!https://default-theme.textpattern.com/images/1.png (160×160 Image Example)!

h3. Images with links

<a href="#" title="Title text"><img alt="160×160 Image Example" src="https://default-theme.textpattern.com/images/1.png" title="160×160 Image Example"></a>

h3. Figures

notextile. <figure>
    <img alt="480×240 Image Example" src="https://default-theme.textpattern.com/images/2.png" title="480×240 Image Example">
    <figcaption>Figcaption content</figcaption>
</figure>

h3. 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. !<https://default-theme.textpattern.com/images/1.png (160×160 Image Example)! 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.

h3. 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. !>https://default-theme.textpattern.com/images/1.png (160×160 Image Example)! 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.

h3. 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. !=https://default-theme.textpattern.com/images/1.png (160×160 Image Example)! 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.

h3. Videos

notextile. <video controls poster="https://default-theme.textpattern.com/video/big_buck_bunny.jpg">
    <source type="video/mp4" src="https://default-theme.textpattern.com/video/big_buck_bunny.mp4">
    <source type="video/webm" src="https://default-theme.textpattern.com/video/big_buck_bunny.webm">
    I’m sorry, your browser doesn’t support HTML5 video in MP4 with H.264 or WebM with VP8/VP9.
</video>

<small>Video copyright 2008, Blender Foundation / www.bigbuckbunny.org</small>

h3. Audio

notextile. <audio controls>
    <source type="audio/mp3" src="https://default-theme.textpattern.com/audio/moonlight_reprise.mp3">
    <source type="audio/ogg; codecs=vorbis" src="https://default-theme.textpattern.com/audio/moonlight_reprise.ogg">
    I’m sorry, your browser doesn’t support HTML5 audio.
</audio>

<small>"Moonlight Reprise" from "Irsen's Tale" by Kai Engel. License: "Attribution-NonCommercial 3.0 International License":https://creativecommons.org/licenses/by-nc/3.0/</small>

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

h2. Tables

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

|=. This is a table caption
|^.
|_. 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 |
|~.
|\3. This is the tfoot |

h2. Forms

notextile. <form>
    <p>
        <input type="checkbox" id="test_checkbox_1" name="test_checkbox_1" checked>
        <label for="test_checkbox_1">Test checkbox 1</label>
        <input type="checkbox" id="test_checkbox_2" name="test_checkbox_2">
        <label for="test_checkbox_2">Test checkbox 2</label>
        <input type="checkbox" id="test_checkbox_3" name="test_checkbox_3" disabled>
        <label for="test_checkbox_3">Test checkbox 3 (disabled)</label>
        <input type="checkbox" id="test_checkbox_4" name="test_checkbox_4" disabled checked>
        <label for="test_checkbox_4">Test checkbox 4 (disabled checked)</label>
    </p>
    <p>
        <input type="radio" id="test_radio_1" name="test_radio_group" checked>
        <label for="test_radio_1">Test radio 1</label>
        <input type="radio" id="test_radio_2" name="test_radio_group">
        <label for="test_radio_2">Test radio 2</label>
        <input type="radio" id="test_radio_3" name="test_radio_group" disabled>
        <label for="test_radio_3">Test radio 3 (disabled)</label>
    </p>
    <p>
        <label for="select_dd">Inline form elements</label><br>
        <select id="select_dd" name="select_dd">
            <optgroup label="Group 1">
                <option value="1">Some text goes here</option>
                <option value="2">Another choice could be here</option>
                <option value="3">Yet another item to be chosen</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="4">Some text goes here</option>
                <option value="5">Another choice could be here</option>
                <option value="6">Yet another item to be chosen</option>
            </optgroup>
            <optgroup label="Group 3">
                <option value="7">Some text goes here</option>
                <option value="8">Another choice could be here</option>
                <option value="9">Yet another item to be chosen</option>
            </optgroup>
        </select>
        <input id="text_inline" name="text_inline" type="text">
        <input type="button" value="Hello">
    </p>
    <p>
        <label for="select_dd2">Inline form elements (disabled)</label><br>
        <select id="select_dd2" name="select_dd2" disabled>
            <optgroup label="Group 1">
                <option value="1">Some text goes here</option>
                <option value="2">Another choice could be here</option>
                <option value="3">Yet another item to be chosen</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="4">Some text goes here</option>
                <option value="5">Another choice could be here</option>
                <option value="6">Yet another item to be chosen</option>
            </optgroup>
            <optgroup label="Group 3">
                <option value="7">Some text goes here</option>
                <option value="8">Another choice could be here</option>
                <option value="9">Yet another item to be chosen</option>
            </optgroup>
        </select>
        <input id="text_inline2" name="text_inline2" type="text" disabled>
        <input type="button" value="Hello" disabled>
    </p>
    <p>
        <label for="file_upload">File upload</label><br>
        <input type="file" id="file_upload" name="file_upload" accept="image/*" multiple>
        <input type="button" value="Upload">
    </p>
    <p>
        <label for="select_multi">Select multiple</label><br>
        <select id="select_multi" name="select_multi" multiple="multiple" size="10">
            <optgroup label="Group 1">
                <option value="1">Some text goes here</option>
                <option value="2">Another choice could be here</option>
                <option value="3">Yet another item to be chosen</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="4">Some text goes here</option>
                <option value="5">Another choice could be here</option>
                <option value="6">Yet another item to be chosen</option>
            </optgroup>
            <optgroup label="Group 3">
                <option value="7">Some text goes here</option>
                <option value="8">Another choice could be here</option>
                <option value="9">Yet another item to be chosen</option>
            </optgroup>
        </select>
    </p>
    <p>
        <label for="textarea">Textarea</label><br>
        <textarea id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
    </p>
    <p>
        <label for="color">Colour</label><br>
        <input type="color" id="color" name="color" value="#cc0000">
    </p>
    <p>
        <label for="date">Date</label><br>
        <input id="date" name="date" type="date">
    </p>
    <p>
        <label for="datetime-local">Datetime local</label><br>
        <input id="datetime-local" name="datetime-local" type="datetime-local">
    </p>
    <p>
        <label for="email">Email</label><br>
        <input id="email" name="email" type="email" placeholder="name@example.com">
    </p>
    <p>
        <label for="month">Month</label><br>
        <input id="month" name="month" type="month">
    </p>
    <p>
        <label for="number">Number</label><br>
        <input id="number" name="number" type="number" min="0" max="999" step="1">
    </p>
    <p>
        <label for="password">Password</label><br>
        <input id="password" name="password" type="password">
    </p>
    <p>
        <label for="range">Range</label><br>
        <input id="range" name="range" type="range">
    </p>
    <p>
        <label for="search">Search</label><br>
        <input id="search" name="search" type="search">
    </p>
    <p>
        <label for="tel">Tel (phone)</label><br>
        <input id="tel" name="tel" type="tel">
    </p>
    <p>
        <label for="text">Text <abbr class="required" title="Required">*</abbr></label><br>
        <input id="text" name="text" type="text">
    </p>
    <p>
        <label for="text-data">Text with data list</label><br>
        <input id="text-data" name="text-data" type="text" list="text-data-list">
        <datalist id="text-data-list">
            <option value="Afghanistan">
            <option value="Albania">
            <option value="Algeria">
            <option value="Andorra">
            <option value="Angola">
        </datalist>
    </p>
    <p>
        <label for="time">Time</label><br>
        <input id="time" name="time" type="time">
    </p>
    <p>
        <label for="url">URL</label><br>
        <input id="url" name="url" type="url">
    </p>
    <p>
        <label for="url">Week</label><br>
        <input id="week" name="week" type="week">
    </p>
    <p>
        <input type="submit" value="Input - Submit">
        &nbsp;
        <input type="button" value="Input - Button">
        &nbsp;
        <input type="reset" value="Input - Reset">
        &nbsp;
        <button>Button tag</button>
    </p>
    <p>
        <input type="submit" value="Input (disabled)" disabled>
        &nbsp;
        <button disabled>Button (disabled)</button>
    </p>
</form>
