UI HTML Elements
Supported HTML Tags
Any tag not listed below will be treated as a div
tag.
Category | Tag | Attribute | Layout | Notes and links |
---|---|---|---|---|
Container | ||||
dialog | N/A | Modal Dialog | ||
div | Block | Container element | ||
footer | Block | Footer containing pill buttons | ||
form | Block | Form (containing elements) | ||
Text | ||||
b | Block | Bold text | ||
p | Block | Paragraph (equivalent to div ) |
||
h1 | Block | Style differences within dialog form |
||
h2 | Block | " | ||
h3 | Block | " | ||
h4 | Block | " | ||
h5 | Block | " | ||
h6 | Block | " | ||
p | Block | Paragraph (equivalent to div ) |
||
span | Block | Text element | ||
Images | ||||
img | Block | Display image | ||
elements | ||||
button | uxp-variant="cta" |
Block | Pill Button (Call To Action) | |
button | uxp-variant="primary" |
Block | Pill Button (Primary) | |
button | uxp-variant="secondary" |
Block | Pull Button (Secondary) | |
button | uxp-variant="warning" |
Block | Pull Button (Warning) | |
button | uxp-variant="action" |
Block | Action Button | |
button | uxp-selected="true" |
Block | Selected Action Button | |
button | uxp-quiet="true" |
Block | Quiet variation (except call to action) | |
input] | type="checkbox" | Block | Checkbox | |
input] | type="image" | Block | Image Button | |
input] | type="number" | Block | Text field | |
input] | type="range" | Block | Slider | |
input] | type="text" | Block | Text field | |
input] | type="text" uxp-quiet="true" |
Block | Quiet text field | |
select | Block | Dropdown | ||
option | N/A | Dropdown options | ||
textarea | Block | Standard text area | ||
textarea | uxp-quiet="true" |
Block | Quiet text area | |
Menus | ||||
menu | N/A | Context menu | ||
menuitem | N/A | Context menu items |