Gallery

Every component of the framework, on one page, so that a palette is judged on all of them at once. Read it in the three themes and in the two modes: six passes tell what twenty pages would.

Nothing is explained here — each component has its own page for that. What is not shown: the book, the bibliography, the slides and the keypiano, which ask for a document of their own.

Headings

Second level

Third level

Fourth level

Fifth level

Sixth level

Text

A paragraph of running text, with a strong emphasis, an emphasis, a bold word, an italic one, an underlined one, a struck one, and something smaller. It holds a marked passage, an inserted and a deleted one, the W3C as an abbreviation, Ctrl + S as keys, a formula with H₂O and E = mc², a span of code, and a title of a work.

A second paragraph, to see two of them one after the other, and to judge the space they leave between themselves. It carries a link to this page and a link that leaves the document.

A quotation, laid out as the theme lays one out.

Lists

• First item of an unordered list
  • Second level
    • Third level
• Second item

1. First item of an ordered list
2. Second item
   1. Nested first
   2. Nested second

A term

What is said about it.

Another term

What is said about that one.

Buttons

Button Submit Reset Disabled Call to action

Toggle group

Switches

Progress

Dialog

Open the dialog

Details

Forms

Tables

Sorted on a column

Cards

Panels

A grid

A flex row

A wrapping row

Steps

1. The first step, and what it asks for.
2. The second one, a little longer, so that it folds on two lines and shows the space it keeps.
3. The third, which ends it.

Code

function whatItLooksLike(name) {
    const greeting = "Hello, " + name;
    return greeting;
}

On a dark ground

<link rel="stylesheet" href="wexa_statics/css/wexa.css">
<link rel="stylesheet" id="wexa-theme" href="wexa_statics/css/themes/wexa_theme.css">

Icons

Asked for by name, on the element that already carries the meaning.

Figure