Responsive Layouts
Vertically aligned text
This layout is used for vertically aligning text within a column that is set to equal height. A class of vert-align has been added to this column to center the text while keeping the column height at 100%. This will allow for full background fills that match the column height next to it.
Mobile Offset Stacking
This layout is used to move Column 2 above Column 1 on mobile. A class of custom_row has been added to the row. A class of second-on-mobile has been added to Column 1 and a class of first-on-mobile has been added to Column 2 A class of vert-align has been added to this column to center the text while keeping the column height at 100%.
Image Cover with Text
This layout is used for stacking an image next to a text area that is taller than the original image aspect ratio can stretch. The image is set to fill the width and height of the column. A class of img-cover-row has been added to this row to target the descendants to achieve image cover. A class of vert-align has been added to this column to center the text while keeping the column height at 100%.
The reason for doing this instead of using a background image is that when the layout goes to mobile, the background image disappears, or can be too small. This can be remediated by using a hidden image for mobile but is confusing for clients when updating content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim nibh et arcu efficitur, tincidunt tincidunt sem tincidunt. Vestibulum id convallis lectus, a efficitur metus. Donec malesuada tortor eu auctor malesuada. Vestibulum vehicula sagittis faucibus.