{"panel":"/showcase/text-formatting"}

Web widgets showcase

{"_back":"^?panel="}

Text formatting

Headline large

Headline medium

All is well
Oops, it's broken
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.

Headline small

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.

Title large

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.
Title medium
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.
Title small
is rendered inline.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.
Default Bold Lightweight Italic Deemphasized Disabled Monospace
Primary Secondary Tertiary Error OK
Inverse Primary Secondary Tertiary Error OK
1 2 3 4 5
Jun

4

Thu
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.
Short value: api-key-7f3c2
Long value 
package main

import "fmt"

func main() {
	fmt.Println("Hello, World!")
}

Center aligned

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.

Text formatting

The Material typography scale and inline text-style helpers — colors, weights, sizes — across the framework's font stack.
open_in_newweb_assetdock_to_right

Code blocks

Server-side syntax highlighting via Chroma, with token classes mapped to Material design colors so the same markup recolors on theme change.
open_in_newweb_assetdock_to_right

Progress widget

Determinate and indeterminate progress indicators, plus the finite/infinite progress-status pattern for long-running operations.
open_in_newweb_assetdock_to_right

Toolbar widget

An action toolbar with grouped buttons and separators. Buttons that share a parent are automatically gathered into a toolbar without explicit configuration.
open_in_newweb_assetdock_to_right

Gallery widget

A horizontally-scrolling gallery of cards. Useful for featured-content rows or any list where horizontal swipe beats vertical scroll.
open_in_newweb_assetdock_to_right

Deck of cards widget

A responsive grid of cards that re-flows between 1, 2, and more columns depending on the viewport width. Good for dashboards or any uniform collection.
open_in_newweb_assetdock_to_right

Tab switcher widget

Tabbed content with smooth switching between sections. Each tab body is rendered server-side and revealed via the same state-driven redraw that powers the rest of the framework.
open_in_newweb_assetdock_to_right

Navigation widgets

The three flavors of side navigation — a compact strip, a labeled rail, and a full drawer — all driven by the same widget tree and adapting to the viewport.
open_in_newweb_assetdock_to_right

Form input widgets

Every form input widget on one page — text, email, password, OTP, dates, ranges, dropdowns, file uploads, color pickers, checkboxes, radios, star/sentiment ratings, filter and input chips, toggle switches, and the rich-text editor.
open_in_newweb_assetdock_to_right

Form validation

Client-side and server-side form validation working together: required fields, pattern matching, length limits, and custom predicate functions, with inline error messages that survive a server round-trip.
open_in_newweb_assetdock_to_right

Data table

A sortable, filterable, paginated table over a small US-states dataset. Quick-search, column sort, and page-size controls all use the same incremental-redraw plumbing the rest of the framework uses.
open_in_newweb_assetdock_to_right

CRUD

Standard create / read / update / delete flow over a per-session in-memory directory of contacts. Demonstrates form-driven persistence with validation, duplicate detection, and a record cap.
open_in_newweb_assetdock_to_right

Charts

Apache ECharts wrapped as bespa widgets. Bar, pie, column, and a US-states map all themed against the Material design tokens, with live theme switching.
open_in_newweb_assetdock_to_right

Mermaid

Mermaid diagrams (flowcharts, sequence, class, state, gantt) rendered client-side, themed against the Material design tokens, with optional zoom and pan interaction.
open_in_newweb_assetdock_to_right