Buefy
<b-notification> with a close button.
UI Library
Internal reference of Bulma and Buefy UI elements available on this site. This page is not linked from the navigation.
Typography
Title is-3
Subtitle is-5
Regular text with strong, emphasis, a link
and inline code.
primary · info · success · warning · danger · grey
is-size-7 small text
<pre> code block indented line
Blockquote text.
Form controls (Buefy)
Notifications & messages
Bulma
.notification.is-infoBuefy message
<b-message> has a header and a close button.
Bulma
.message without header.Tabs
Modal, dropdown & tooltip
Collapse
Click to expand
▾Progress
60%
Table
Algorithm | Bits | Hex chars |
|---|---|---|
| MD5 | 128 | 32 |
| SHA-1 | 160 | 40 |
| SHA-256 | 256 | 64 |
| Keccak-256 | 256 | 64 |
| SHA-512 | 512 | 128 |
Pagination
Layout: box, card, columns, level, media
Box in a column
Box in a column
Box in a column
Card header
Card content, as used on the homepage.
Media object · example
Useful for comments, lists with an image or icon on the left.
Hero
Hero title
Hero subtitle
Loading overlay
Content behind the loading overlay.