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