pilucho.css Test Page
A comprehensive test page filled with common HTML elements to verify styling. Based on html5-test-page.
Text
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.
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.
Asides
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eligendi optio ipsa nemo assumenda mollitia inventore neque dolores animi ratione libero qui dolorem, distinctio aut, quae, iste, cumque nihil enim!
Lists
Description list
- Description term
- Description details.
- Additional details.
- Description term
- This is a second term
- This is a third term
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, modi iure! Incidunt, dolorum sit?
Ordered List
- 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
Unordered List
- 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
Details / Summary
Expand for details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi.
Another expandable section
More content tucked away neatly.
Address
Written by Jon Doe.Visit us at:
Example.com
Box 564, Disneyland
USA
Horizontal rules
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tabular data
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | Header 10 |
|---|---|---|---|---|---|---|---|---|---|
| Row:1 Cell:1 | Row:1 Cell:2 | Row:1 Cell:3 | Row:1 Cell:4 | Row:1 Cell:5 | Row:1 Cell:6 | Row:1 Cell:7 | Row:1 Cell:8 | Row:1 Cell:9 | Row:1 Cell:10 |
| Row:2 Cell:1 | Row:2 Cell:2 | Row:2 Cell:3 | Row:2 Cell:4 | Row:2 Cell:5 | Row:2 Cell:6 | Row:2 Cell:7 | Row:2 Cell:8 | Row:2 Cell:9 | Row:2 Cell:10 |
| Row:3 Cell:1 | Row:3 Cell:2 | Row:3 Cell:3 | Row:3 Cell:4 | Row:3 Cell:5 | Row:3 Cell:6 | Row:3 Cell:7 | Row:3 Cell:8 | Row:3 Cell:9 | Row:3 Cell:10 |
Code
Keyboard input: Cmd + Shift + P
Inline code: <div>code</div>
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 { | } ~
Code block
function greet(name) {
return `Hello, ${name}!`;
}
greet("world");Sections
Section 1
Test section content.
Section 2
Test section content.
Section 3
Test section content.
Inline elements
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
This small text is small for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
Embedded content
Images
Plain <img> element
<figure> with <img>
<figure> with <figcaption>
<picture> element
Audio
Video
Meter
Progress
Inline SVG
Dialog
ARIA & state
Link as button (role="button")
Active nav (aria-current)
Loading state (aria-busy)
Invalid input (aria-invalid)
Notices (role="alert" / "status" / "note")
A note — neutral context, drawn from the accent background.
A status update — same look, semantic for live regions.
An alert — uses the warning accent on the left border.
Expandable trigger (aria-expanded)
This is the controlled panel. CSS rotates the caret based on state; pilucho.js handles the click → toggle aria-expanded → flip the panel's hidden attribute.
Toggle button (aria-pressed)
Pressed buttons invert to an outline style. Use for two-state toggles, not regular clicks.
Tabs (role="tab" + aria-selected)
Overview content. Selected by default.
Pricing content. Showing this panel means hiding the others.
FAQ content. Click or use ← → keys to switch between tabs.