Simon Fraser University
Engaging the World

Content Management System

Home / Working in AEM / Components / Carousel Component / Carousel - CLF4 Display Styles

Carousel - CLF4 Display Styles

Carousel component in CLF4 offers an enhanced selection of display styles which can be used in multiple configurations and include different elements. 

Standard

Standard carousel can be also used on block red or grey

Banner

Banner gives you the flexibility to display a title and, if top position is chosen, a single paragraph and/or a button.

Background colour: Red

Text alignment options:

  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right

Additional Options for Top Left and Top Right:

  • Show Description
  • Show Learn More Button (use button or button alt in CSS class field)

 

Banner with red background will default to standard display if used on a homepage in a 1-column (100%) configuration with the full width checkbox selected.

Carousel banner, red background, title only, top left
Carousel banner, red background, title, description, top left
Carousel banner, red background, title, description, button, top left
Carousel banner, red background, title, button, top left
Carousel banner, red background, title, bottom left
Carousel banner, red background, title only, top right
Carousel banner, red background, title, description, top right
Carousel banner, red background, title, description, button, top right
Carousel banner, red background, title, button, top right
Carousel banner, red background, title, bottom right

Background colour: None

Text alignment options:

  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right

Additional Options for Top Left and Top Right:

  • Show Description
  • Show Learn More Button (use button or button alt in CSS class field)

 

Carousel banner, background none, title only, top left
Carousel banner, background none, title, description, top left
Carousel banner, background none, title, description, button, top left
Carousel banner, background none, title, button, top left
Carousel banner, background none, title only, bottom left
Carousel banner, background none, title only, top right
Carousel banner, background none, title, description, top right
Carousel banner, background none, title, description, button, top right
Carousel banner, background none, title, button, top right
Carousel banner, background none, title only, bottom right