Digestive check
Advice on stomach, bowel and liver symptoms.
BookAll controls
Every xoong control, styled with the standard and filled with realistic content. The markup is what the framework renders, copied from the live pages, so the dev side can swap in the real elements and logic without touching the look.
Tabs
<xo-tabs>: underline tabs for sections; the pill variant (class="tabs-pills") switches a view in place.
General settings: title, slug, author.
Search engine settings. This tab is selected by value="seo".
How the page looks when it is shared.
General settings: title, slug, author.
Search engine settings. This tab is selected by value="seo".
How the page looks when it is shared.
Menu and tooltip
<xo-menu> with action items; xo-tooltip on any element.
The second block shows the open state of a menu panel.
Combobox and tags
<xo-combobox> picks from a list you can filter; <xo-tags> collects free text. Chips remove with the close icon.
Data
Open list (state)
Carousel
<xo-carousel>: cards several at a time, a banner that moves by itself, a gallery with thumbnails.
Painless endoscopy
Stomach and bowel, with sedation.
BookH. pylori test
A sample taken during the endoscopy.
BookAbdominal ultrasound
Done together with the doctor.
BookHealth packages
Checks with offers.
Book1 / 5
The form just worked: validation, errors and the draft came from the OpenAPI document.
We deleted our table component and kept the markup.
Strict CSP on day one, no exceptions to write.
1 / 3
1 / 3
Ada Lovelace
ada@example.org
adminGrace Hopper
grace@example.org
editorEdsger Dijkstra
edsger@example.org
viewerBarbara Liskov
barbara@example.org
editorDonald Knuth
donald@example.org
viewerMargaret Hamilton
margaret@example.org
admin1 / 6
Data table
<xo-view> and <xo-table>: search, sort, select, bulk action, paging. The loading, empty and error states are in States.
| Actions | ||||
|---|---|---|---|---|
| Ada Lovelace | ada@example.org | admin | ||
| Grace Hopper | grace@example.org | editor | ||
| Edsger Dijkstra | edsger@example.org | viewer | ||
| Barbara Liskov | barbara@example.org | editor | ||
| Donald Knuth | donald@example.org | viewer |
Forms
<xo-form> draws the fields from the schema: label above, control, hint or error.
Rich text
<xo-richtext>: an accessible toolbar over a contenteditable area. The toolbar faces are icons.
Dialog, confirm, toast
<xo-dialog> for forms, the native confirm for destructive actions, <xo-toast> for results. Shown open and static here.