HTML5 Element Showcase
This page displays all common HTML5 elements for testing styles and accessibility.
Text Elements
Look at the main title for h1
This is an h2
This is an h3
This is an h4
This is an h5
This is an h6
This is a paragraph.
This paragraph contains strong and emphasized elements, oof.
This is a paragraph contains subscript and superscript elements, weird.
This is a blockquote. I am probably something oh so clever.
Preformatted text.
<code> inline code </code> a pre tag with class code-block
here is some code maybe let's see what happens with it how is it rendered
the same as above but the content inside is wrapped in code tags
here is some code maybe
let's see what happens with it
how is it rendered
Unordered list
- Unordered List Item 1
- the word 'List' above has used
‹kbd›to look a bit code like - Unordered List Item 3
- Unordered List Item 4
Ordered list
- Ordered List Item 1
- Ordered List Item 2
- The word 'List' above is enclosed in
‹mark›tags - Ordered List Item 4
Forms
Tables
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
| Data 5 | Data 6 |
| Data 7 | Data 8 |
| Data 9 | Data 10 |
Media
an image
an image in a figure
an image in a figure with figcaption
an audio file
a vidio file
Interactive Elements
details & summary
Click to expand
Details content
progress bar
a basic card
Card Title
Some card content.
a basic stack
the default Stack
spacing
the --space css custom property decides the spacing of elements
the fourth element in this stack (this one) is given a different kind of spacing, with the
same space on the top and bottom, you can target different child elements with their child
number (for up to the first ten elements) or use even, odd or all to target just the evens, the odds or all (up to 100) elements
you can include a custom space by including space as a prop‹ShadowStack space="5rem"›. It will default to the --space custom property or 1.5rem if the --space custom property is not set.
a quoted text from a book or something, maybe a song lyric, could be something really, really long like a whole verse or whatever, like just padding it out with useless words that don't really say anything, they are just there, being blockquoted like they should mean something
it's my heading in a box
body for a box with minimal padding just whacked inside this stack.
BTW. There are
two ways to invert the colours of a box. The header is using the invert flag to just invert colours with a css filter, whereas the main box should track the data-theme, although that seems to be not working right now. attribute of the
nearest parent where it is set and changing its own to the opposite using data-theme="invert".
- a list
- with
- some
- items
Frankenstein
Or: The Modern hgroup
a basic card
Card Title
Some card content.
alignment
utility classes can be used to align elements
default items are full spanalign-start align-center align-end justify-start justify-center justify-end a tighter stack inside another one
‹ShadowStack space="0.25rem" tight›
elements
- should
- now
- be
- spaced
- much
- closer
together
clusters aligned to the end, middle and start
each also has different spacing and justification
space="--space"
default spacing
justifyContent="flex-end"
space="2rem"
default justify
justifyContent="center"
space="3rem"
just a liite
justifyContent="flex-start"
space="4.5rem"
justifyContent="space-between"
default align
alignItems="center"
justifyContent="space-evenly"
even stevens
alignItems="baseline"