Simon Fraser University
Engaging the World

Content Management System

Home / Working in AEM / Component Styles / Column styles - CLF4

AEM started using SFU Groups for access management on Wednesday, December 11.
If you lost access, please reach out to your site owner.

Column styles - CLF4

red block

grey block

light-red block

block col-1-red col-3-red

block col-2-grey

block col-3-light-red

full width, block red

full width, block red, content-narrow

md stack
mds-stack

Size range Name CSS classes
528 px – 979 px Medium md-stack, md-stack-last, md-stack-first
528 px – 754 px Medium-small mds-stack, mds-stack-last, mds-stack-first
up to 527 px Small Columns will always stack on top of each other at this screen size

md-stack-first
mds-stack-first

Desktop layout
Tablet layout
Mobile layout

md-stack-last
mds-stack-last

Desktop layout
Tablet layout
Mobile layout

md-stack-first-last
mds-stack-first-last

Desktop layout
Mobile layout
Desktop layout. Two Column control components with "No spacing" selected, each contains an Image and a Text component. The first Column Control component has "grey block" and "md-stack" CSS Classes, the second Column Control component has "grey block" and "md-stack-last-first" CSS Classes. Both text component have "pad-all" CSS Class.
Mobile layout