ADT UX Showcase

Alerts

( .adt-alert ) Used for form alerts.

Debug

  • Generated using : '.adt-alert .adt-debug'. This is an example of a single-line feedback message.

Information

  • Generated using : .adt-alert .adt-info
  • Info Message Test.
  • Another info message.

Success!

  • Generated using : .adt-alert .adt-success
  • Success feedback message.
  • Another success message.

Warning!

  • Generated using : .adt-alert .adt-warning
  • Warning Message Test.
  • Another warning message.

Error!

  • Generated using : .adt-alert .adt-error
  • Error Message Test.
  • Another error message.

Fatal!

  • Generated using : .adt-alert .adt-fatal
  • Fatal Message Test.
  • Another fatal message.

Notes

( .adt-note ) Decorative area for information to user.
.adt-note .adt-success

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-note .adt-warning

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-note .adt-error

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-note .adt-info

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-note

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Wells

( .adt-well ) Decorative content areas. See about page for a use case.
.adt-well

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-well .western-colour

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-well .adt-dark

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-well .adt-blue

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.adt-well .adt-red

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Prompt

Prompts can be created using existing portlet, portlet headers and form classes. Here is an example of how this can be done:

Are you sure you want to delete this reservation?

No refund will be given.

Prompt Buttons
Universal Access Controls
Hide Interface

Please Note

If you choose to hide the accessibility banner, you won't be able to see it anymore, unless you clear your browsing history and data.

Are you sure?

Decrease text size button Decrease text size Button Default text size button Default text size Button Increase text size button Increase text size Button
Universal Access Control Toggle Button