UI HTML Elements
Supported HTML Tags
Tip
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] | Block | Checkbox | ||
input] | Block | Image Button | ||
input] | Block | Text field | ||
input] | Block | Slider | ||
input] | 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 |