Simon Fraser University
Engaging the World

Content Management System

Home / Working in AEM / Component Styles / Text & image 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.

Text & image styles - CLF4

wrap-text

Text & image component with wrap-text CSS class
Text & image component without wrap-text CSS class

overlay

Default state
Hover state
Default state on mobile or when placed in a column less than 50%
Hover state on mobile or when placed in a column less than 50%

overlay-banner

overlay-banner with a heading only
overlay-banner display on mobile or when placed in a column less than 50%
Heading and paragraph. Only a single paragraph can be used.
overlay-banner display on mobile or when placed in a column less than 50%

overlay-banner button alt

Heading, paragraph and button alt
overlay-banner display on mobile or when placed in a column less than 50%
overlay-banner and button alt on desktop
overlay-banner and button alt on mobile

overlay-banner text-right

Heading only
Heading and paragraph
overlay-banner text-right display on mobile or when placed in a column less than 50%

overlay-banner text-right button alt

Heading and button alt
Heading, paragraph and button alt
overlay-banner text-right button alt display on mobile or when placed in a column less than 50%

overlay-banner-white

overlay-banner-white with a heading only
overlay-banner-white with a heading only on mobile
overlay-banner-white with a heading and paragraph. Only a single paragraph can be used.
overlay-banner-white with a heading and paragraph on mobile

overlay-banner-white button alt

overlay-banner-white with a heading and button alt
overlay-banner-white with a heading and button alt on mobile
overlay-banner-white with a heading, paragraph and button alt
overlay-banner-white with a heading, paragraph and button alt on mobile

overlay-bottom

overlay-full

overlay-full on desktop
overlay-full on tablet and mobile