The following styles can be used after including:
css/lumo-dls-layout.css
l-visible-mobile-only / l-visible-desktop-only
l-display-flex
Text
l-display-flex l-align-items-start
l-display-flex l-align-items-end
l-display-flex l-align-items-center
l-display-flex l-align-items-stretch
l-display-flex l-align-items-baseline
l-display-flex l-align-items-baseline l-justify-start
l-display-flex l-align-items-baseline l-justify-end
l-display-flex l-align-items-baseline l-justify-center
l-display-flex l-align-items-baseline l-justify-evenly
l-display-flex l-align-items-baseline l-justify-edges
l-display-flex l-align-items-baseline l-justify-center l-flex-direction-row(-mobile)
l-display-flex l-align-items-baseline l-justify-center l-flex-direction-column(-mobile)
l-display-flex l-align-items-baseline l-justify-center l-flex-direction-row-reverse(-mobile)
l-display-flex l-align-items-baseline l-justify-center l-flex-direction-column-reverse(-mobile)
l-display-flex l-align-items-baseline l-justify-center l-flex-direction-row l-flex-direction-column-reverse-mobile
Margins and paddings are available in indexes 0-10. To only specify certain directions, use postfixes t (top), b (bottom), l (left), r (right), x (left & right) and y (top & bottom). For example: l-margin-1-t
l-margin-0
l-margin-1
l-margin-2
l-margin-3
l-margin-4
l-margin-5
l-margin-6
l-margin-7
l-margin-8
l-margin-9
l-margin-10
l-padding-0
l-padding-1
l-padding-2
l-padding-3
l-padding-4
l-padding-5
l-padding-6
l-padding-7
l-padding-8
l-padding-9
l-padding-10