ADT UX Showcase

Portlet & Columns

Portlets are containers. They can have an optional title and body

Columns: can be applied to almost any tag and allows the element to claim a percentage of the container space. All column classes will act like .adt-colWidth-100 if the display is less than 1024 pixels.

(.adt-colWidth-100) 100%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-50) 50%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..

( .adt-colWidth-50) 50%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-33) ~33% .

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-33) ~33%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-33) ~33%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-25) 25%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-25) 25%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-25) 25%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

( .adt-colWidth-25) 25%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Portlet & Column Options

Portlets Options:

(.adt-portlet): default portlet

(.adt-portlet .light): light gray portlet

(.adt-portlet .western-colour): purple color portlet with white text

(.adt-portlet .dark): dark colored portlet with white text

(.adt-portlet .transparent-bordered): portlet with a transparent background and a light border

default .adt-portlet

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

light gray .adt-portlet .light

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

western! .adt-portlet .western-colour

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

dark .adt-portlet .dark

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

transparent-bordered .adt-portlet .transparent-bordered

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

Column Options:

(.adt-col-x .smallOnly): This will display the column container on small screens only

(.adt-col-x .largeOnly): This will display the column container on large screens only

(.adt-col-x .dontFill ): This will prevent the flexbox from expanding beyond its defined percentage. Ex. 50% for adt-colWidth-50

(.adt-col-x .fitToContent ): The height of the flexbox will expand no more than needed to fit to the content

(.adt-col-x .maxWidth100, .maxWidth200, ..., .maxWidth1500 ): This will cap any col to a max width

(.adt-col-x .adt-alignment-left ): aligns the column to the left of the container

(.adt-col-x .adt-alignment-right ): aligns the column to the right of the container

(.adt-col-x .adt-alignment-bottom ): aligns the column to the bottom of the container

(.adt-col-x .adt-alignment-top ): aligns the column to the top of the container

(.adt-col-x .adt-alignment-center ): aligns the column to the center of the container ( x axis )

(.adt-col-x .adt-alignment-middle ): aligns the column middle of the container ( y axis )

(.adt-col-x .adt-alignment-none ): strip all margins

This is a mobile phone or small screen (<1024px) .adt-col-x .smallOnly.

This is a desktop or larger screen device ( >1024px ) .adt-col-x .largeOnly.

Portlet & Column Nesting

Combining Portlets and adt-colWidth-x you can get more complicated layouts.

How the Parent/Child portlet example below works:

  • You have two columns, adt-colWidth-50 and adt-colWidth-20
  • 50 + 20 = 70%, leaving 30% width left over
  • Both columns have flex-grow: 1, which means they each take up an equal portion of the left over space
  • 30 / 2 = 15, so the adt-colWidth-50 becomes 50 + 15 = 65%, and the adt-colWidth-20 becomes 20 + 15 = 35%
  • To the casual observer this looks like 2/3 - 1/3 split columns
Parent Portlet .adt-colWidth-100
Child Portlet .adt-colWidth-50

.adt-colWidth-100 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.adt-colWidth-50 This is a child Portlet Colors with content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.adt-colWidth-50 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.adt-colWidth-100 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Child Portlet .adt-colWidth-20

.adt-colWidth-100 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

.adt-colWidth-50 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

.adt-colWidth-50 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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