๐Ÿ’ซ Pivot HTML5 Test Page

This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.

๐ŸŽจ Stylesheets

    Load a stylesheet dynamically by entering the URL in the input field below

    ๐Ÿ“Œ Text

    ๐Ÿ“ Headings

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    ๐Ÿ“ Paragraphs

    A paragraph (from the Greek paragraphos, โ€œto write besideโ€ or โ€œwritten besideโ€) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Emoji test: 😀 😄 😍 💗

    ๐Ÿ“ Blockquotes

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

    It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

    Said no one, ever.

    ๐Ÿ“ Details / Summary

    This is a summary The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

    ๐Ÿ“ Lists

    Definition list

    Definition List Title
    This is a definition list division.

    Ordered List

    1. List Item 1
    2. List Item 2
      1. List Item 1
      2. List Item 2
        1. List Item 1
        2. List Item 2
          1. List Item 1
          2. List Item 2
            1. List Item 1
            2. List Item 2
            3. List Item 3
          3. List Item 3
        3. List Item 3
      3. List Item 3
    3. List Item 3

    Unordered List

    • List Item 1
    • List Item 2
      • List Item 1
      • List Item 2
        • List Item 1
        • List Item 2
          • List Item 1
          • List Item 2
            • List Item 1
            • List Item 2
            • List Item 3
          • List Item 3
        • List Item 3
      • List Item 3
    • List Item 3

    ๐Ÿ“ Tabular data

    Table Caption
    Column Heading 1 Column Heading 2 Column Heading 3
    Row 1 Cell 1-1 Cell 1-2 Cell 1-3
    Row 2 Cell 2-1 Cell 2-2 Cell 2-3
    Row 3 Cell 3-1 Cell 3-2 Cell 3-3
    Row 4 Cell 4-1 Cell 4-2 Cell 4-3
    Column Footer 1 Column Footer 2 Column Footer 3

    ๐Ÿ“ Code

    Keyboard input: Ctrl Alt + Del

    Inline code: <code>code</code>

    <samp> : Sample output: This is sample output from a computer program.

    Pre-formatted text

                            P R E F O R M A T T E D T E X T
                            ! " # $ % & ' ( ) * + , - . /
                            0 1 2 3 4 5 6 7 8 9 : ; < = > ?
                            @ A B C D E F G H I J K L M N O
                            P Q R S T U V W X Y Z [ \ ] ^ _
                            ` a b c d e f g h i j k l m n o
                            p q r s t u v w x y z { | } ~
                        

    ๐Ÿ“ Inline elements

    <a> :This is a text link.

    <abbr> : Abbreviation: HTML

    The <b> element is stylistically different text from normal text, without any special importance.

    <cite> : This is a citation.

    <del> : This text is deleted and <ins> : This text is inserted.

    The <dfn> element indicates a definition.

    <em> : This text has added emphasis.

    The <i> element is text that is offset from the normal text.

    The <mark> element indicates a highlight.

    <q> : This text is a short inline quotation.

    <s> : This text has a strikethrough.

    <small> : This text is small for fine print, etc.

    <strong> is used to indicate strong importance.

    <sub> : Subscript for things like H2O.

    <sup> : Superscriptยฎ.

    The <time> element:

    The <u> element is text with an unarticulated, though explicitly rendered, non-textual annotation.

    <var> : The variable element, such as x = y.

    ๐Ÿ“Œ Embedded content

    ๐Ÿ“ Images

    No <figure> element

    Image alt text

    Wrapped in a <figure> element, no <figcaption>

    Image alt text

    Wrapped in a <figure> element, with a <figcaption>

    Image alt text
    Here is a caption for this image.

    ๐Ÿ“Œ Form elements

    ๐Ÿ“ Input fields

    Input fields

    Validation

    ๐Ÿ“ Select menus

    Select menus

    ๐Ÿ“ Checkboxes

    Checkboxes

    ๐Ÿ“ Radio buttons

    Radio buttons

    ๐Ÿ“ Textareas

    Textareas

    ๐Ÿ“ HTML5 inputs

    HTML5 inputs

    ๐Ÿ“ Action buttons

    Action buttons