HTML Builtins

These examples are builtin layouts with minimal styling… specifically:


					h1, h2, h3 { margin-bottom:0; padding-bottom:0 }
					p { margin-top:0; padding-top:0 }
					ul, ol, dl { margin-top:0; padding-top:0; text-indent:0 }
					table { border-collapse:collapse; }
					th, td { border:solid thin gray; padding:0.1em 0.2em; }
					label { display:flex; align-items:center; grid-gap:0.2em; margin-bottom:0.2em; }
					fieldset { margin-bottom:0.2em; }

The Basic Paragraph

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The Unordered List (Outline)

Topic
- Point
- Point
  - Sub-Point
  - Sub-Point
Another Topic

The Ordered List (Outline)

Topic
1. Point
2. Point
  1. Point
  2. Point
Another Topic

The Definition List

Term: A definition for the term; An alternate definition for the term
Another term
A Synonym: A definition for Another Term and it's Synonym

The Table

Table Caption
Col 1	Col 2
First Row, First Cell	First Row, Second Cell
Second Row, First Cell	Second Row, Second Cell

The Form

CSS Builtins

These examples are builtin layouts with minimal styling…

The Breadcrumb

Collection
Instance
Property

Light/Dark Mode

By using CSS variables, the :root pseudo selector, and the prefers-color-scheme: dark media query; this page supports light and dark modes.

Dialogs

These examples require the tiniest amount of javascript…

Ref: MDN

The Modal Dialog

The Non-Modal Dialog