A page should always only have a single title, and this one is very likely generated by wordpress. But here you can see its style and all other headers. You can also reuse these styles if needed in another place with the classes h[1..6].

Main page title

Secondary title




Pagination should be done with the following arrows: and again in plain text: ❮ text ❯


Always make sure they use a relative location for the local testing. If you want them to open in a new tab use target="_blank".

A link in situ:A link

But separate also exists once in a while


Buttons can be made either with a <button> or <a class="button"> elements. The <button> is strongly preferred, the <a class="button"> can only be used if the button has to send the user to another page as a link would normally do. They can be adjusted to your situation with the modifier classes rounded and secondary, and buttons can be disabled (only actual buttons) with the html attribute disabled. If you are using a button on a var(--color-primary) background you can use the class inverted.

Link Link Link
Link Link Link

It should also work for the wp buttons:

Horizontal rulers

Horizontal rules can be used in many places to separate two distinct sections on a page. You could also take the freedom to remodel some object in your case to have the same style, but this is the preferred style.

The second ruler is a bit intense but maybe we find a nice place for it somewhere ;-).


These are tricky to fully standardise, but the basic layout should be provided. Use the col-2 and col-4 classes to change the layout from 1 to 2 and 4 columns respectively, based on the screen size these will automatically fall back to a reasonable column number.

Concerning time

Radio buttons


A special kind of checkbox: switch

Multiselect using ‘kebab’ class

Stuff here, weeeee.

You can show required elements when using the class show-required, but you can only use this on forms where there are elements that are not required, otherwise it will just add visual clutter. Also you can make individual items the width of the whole page by applying the class wide, its label will also automatically be the same width.

Note however that this requires the :has selector, which is not at the time of writing supported by firefox. So there the not required inputs will be shown with a grey border instead.

You can also limit the width of a form or fieldset to 500px with the following class: small


Lists do occur once in a while:

  • One
  • Two
  • Three
  • On no this was an unordered one
  1. Something
  2. Something else
  3. Something entirely different


If you want to have the below styling you can use the thead and tfoot blocks.

One Two Three Four Five
1 2 3 4 5
11 12 13 14 15
21 22 23 24 25
f1 f2 f3 f4 f5

But a solution with less levels of elements also works.

One Two Three Four Five
1 2 3 4 5
11 12 13 14 15
21 22 23 24 25

And if you want to create a scrollable table you will have to use a wrapper <div class="widetable-wrapper">.

1 2 3 4 5
11 12 WIDE 14 15
21 22 23 24 25

Text blocks

You can show quotes, ‘raw’ text, and code in a nice way!

Here is a nice quote from someone you know! Here is the source
Preformatted text
Supposed to show in a nice monospaced font -> arrow
// code display // for displaying 'proper' languages only (not any one that helps you write bugs (uchm python/julia)) fn main() -> f64 { let x = 8.0; (x * x * x).sqrt().saturating_sub(4) }

You can even you the <code> element inside normal text. In that case it will also be very easy to copy for users.


You can easily create notifications on the frontend and admin backend with the following php class.

DisplayNotification::success( "Blocked", "You are blocked from making transactions", array( "url" => "", "url-text" => "Google" ) ); DisplayNotification::warning( "Blocked", "You are blocked from making transactions" ); DisplayNotification::error( "Blocked", "You are blocked from making transactions" ); DisplayNotification::information( "Blocked", "You are blocked from making transactions" );
You are blocked from making transactions
You are blocked from making transactions
You are blocked from making transactions
You are blocked from making transactions


There is a native html element for this <progress>. If it has no max or value attribute is is on undetermined style as you can see in the first example. The second example is 50% of the way there.