Classless CSS Reference

Example layout · composed page for theme spot-checks

Link <b> button <strong> button <i> button <em> button

I am an Article. I am a very good article.

Nested article content sits flush inside the parent article surface.

fieldset

Shaded inset content.

H3 Article Section Header

Only the first header has the title-bar style

I am a block quote
I am the blockquote footer

This document’s <body> has no data-backdrop. Compare with index.html.

Code: ctrl + c sudo bash some-command

Samp: permission denied exit code 1

Heading

Expanded content

Also used on fieldsets (e.g. home description blurb).

I am a bare <div> — no card, callout, or inset styling.

Image is padded with border

Form Header

Textbox inside label element - pre Textbox inside label element - post Password inside label element - pre Password inside label element - post Number inside label element - pre Number inside label element - post

Radio inside label element - post Radio inside label element - pre Checkbox before label element Next checkbox Label element before checkbox Next checkbox Legend

Select Options Range:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

I am a Header

CTRL + C

Before highlighted text after

List item

List item

List item

List item

List item

List item

List item
List item

List item

I am a paragraph

Pre text


Code block 1
Code block 2


Computer output block 1
Computer output block 2

Section children lay out in a wrapping flex row (see dedicated card / header examples below).

I am a Section Header

Section article — accent panel. Nested section asides remain cards:

Full size blurb / badge — often used for site description blocks.

Same pattern with data-tone="accent".

Small text

^{Content_Example}

th1	th2	th3
thead span=3			thead4
td1	td2	td3	td4
td1	td2	td3	td4
tfoot1	tfoot span=3

List item 1
List item 2
List item 3