Testing Version Close

ADT UX Showcase

Headings

Heading, Fonts, Lists and Text Styling : This page contains reusable typography components

H1, H2, H3, H4, H5 and H6

Example H1 - 36px

Example H2 - 30px

Example H3 - 24px

Example H4 - 18px

Example H5 - 12px
Example H6 - 6px

Lists

Unordered List

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

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

Ordered List

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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

Description List

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

Coffee
Black hot drink
Black hot drink
Black hot drink
Milk
White cold drink
White cold drink
White cold drink

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

Font Styling
This is regular text.
This is bolded. Using the <strong> tag.
This is bolded using the.adt-font-bold instead.
This is Uppercase using the class .adt-font-uppercase.
This is lowercase using the class .adt-font-lowercase.
This is capatalize using the class .adt-font-capitalize.
This text color set with .adt-font-success.
This text color set with .adt-font-info.
This text color set with .adt-font-warning.
This text color set with .adt-font-error.
This text color set with .adt-font-western-colour.

Alignment

Text Alignment

This is left aligned in the current container .adt-text-left.

This is center aligned in the current container .adt-text-center.

This is right aligned in the current container .adt-font-right.

This is right aligned in the current container .adt-font-right.

This is center aligned in the current container .adt-text-center.

This is left aligned in the current container .adt-text-left.

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?

Universal Access Control Toggle Button