HUB Design System includes classes to set the align-items property of flex and grid containers. They can be used alongside other HUB Design System layout utilities to align children in container on the container’s cross axis.

Align items is a set of layout utility classes to help you organize content that can adapt to any device or screen size.

Class Name Value Preview
hds-align-items-baseline baseline
hds-align-items-center center
hds-align-items-end flex-end
hds-align-items-start flex-start
hds-align-items-stretch stretch

What’s a cross axis?

The cross axis runs perpendicular to a flex container’s content direction. For containers where flex-direction is row and content flows in the inline direction, the cross axis runs in the block direction. For containers where flex-direction is column and content flows in the block direction, the cross axis runs in the inline direction.