Block and Inline Elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique.

Unstylized Monospace

They are usable inline or, via <pre> / <pre><code>. 

import * as pyodide from 'https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.mjs'

globalThis.webPy = await pyodide.loadPyodide({
  indexURL: "https://cdn.jsdelivr.net/pyodide/v0.22.1/full/",
  fullStdLib: true,
});

export let webPy = globalThis.webPy;

await webPy.loadPackage([ "micropip" ]);

export const micropip = webPy.pyimport("micropip");

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Lists

  1. Ordered list item 1
  2. Ordered list item 2
    1. Ordered list sub-item 1
    2. Ordered list sub-item 2
  3. Ordered list item 3
  4. Ordered list item 4

Layout

Bonsai.css a multi dimensional, easy to use layout framework.

--sc-sm:2; --sr-sm:2
--sr-sm:3
--sr-sm:4
--sr-sm:5
--sr-sm:6
--sc-sm:2
--sc-sm:3
--sr-sm:6
--sc-sm:3
--sr-sm:5
--sc-sm:3
--sr-sm:4
--sc-sm:3
--sr-sm:3
--sc-sm:2
--sc-sm:2; --sr-sm:2

Inputs & Textareas

Input States

Buttons

Button with button tag

Button with link tag

Button Link Button Link Button Link Disabled

Button Color Variations

Button Groups (Horizontal)

Buttons with Outline

Button Groups (Vertical)

Radios & Checkboxes

Other Form Elements

Fieldset

Tags

Tag Variations

white
green
blue
orange
red
grey
black

Tag Groups (Horizontal)

node.js 12.16.1 npm 6.14 git 2.25.1 node.js 12.16.1

Tag Groups (Vertical)

node.js 12.16.1 npm 6.14 git 2.25.1 node.js 12.16.1

Table

Table caption
Column 1 Column 2 Column 3 Column 4
Row 1 Value 1 Row 1 Value 2 Row 1 Value 3 Row 1 Value 4
Row 2 Value 1 Row 2 Value 2 Row 2 Value 3 Row 2 Value 4
Row 3 Value 1 Row 3 Value 2 Row 3 Value 3 Row 3 Value 4
Total 1 Total 2 Total 3 Total 4

Horizontal Rule

Figure & Figcaption

Aliquam erat volutpat
Aliquam erat volutpat

Details

Details/Summary example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis, in euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis consequat ante.

Definition Lists

Term 1
Definition for term 1.
Term 2
Definition for term 2.
Term 3
Definition for term 3.