UI Elements
UI elements are the interactive building blocks of any digital interface, enabling users to interact with software and view information. They range from fundamental components like buttons, text fields, and checkboxes to more complex elements such as navigation bars, cards, and modals. Well-designed UI elements are crucial for creating intuitive, accessible, and engaging user experiences, guiding users effortlessly through an application.
Button Element
| :main | (default) | :secondary | :tertiary | :outline | :outline-white | :link | |
|---|---|---|---|---|---|---|---|
| Default | |||||||
| Hover | |||||||
| Active | |||||||
| Focus | |||||||
| Disabled | |||||||
| --iconLeft --iconRight | |||||||
| is-loading | |||||||
| --large | |||||||
| --small |
Toasts
I am a popover triggered declaratively. Use
popovertarget="popover-id" and data-close="5000" and create the html for the popup/toast content with id="popover-id" class="popover" popoverTooltips
Dialogs
Panels
panel
panel-white
panel-main
panel-gradient
panel-outline
Table
| Part | Documents | Price | Availability | Sample | Buy | Var 1 | Var 2 | Var 3 | Var 4 | Var 5 |
|---|---|---|---|---|---|---|---|---|---|---|
Exercitationem | $1.81 | Available | Sample | Buy | Variable | Variable | Variable | Variable | Variable | |
Quidem | $1.81 | Available | Sample | Buy | Variable | Variable | Variable | Variable | Variable | |
Dolorem | $1.81 | Available | Sample | Buy | Variable | Variable | Variable | Variable | Variable |
| Part | Documents | Price | Availability | Sample | Buy | Var 1 | Var 2 | Var 3 | Var 4 | Var 5 |
|---|---|---|---|---|---|---|---|---|---|---|
Exercitationem | $1.81 | Available | Sample | Buy | Variable | Variable | Variable | Variable | Variable | |
Quidem | $1.81 | Available | Sample | Buy | Variable | Variable | Variable | Variable | Variable | |
Dolorem | $1.81 | Available | Sample | Buy | Variable | Variable | Variable | Variable | Variable |
Icons