sunweb

Promotion image

components promotion image promotion-image

Definition


Promotion image is used in the splash pages to highlight special content or offers and in the homepage's slider.

General use (Default)


.c-promotion-image
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus


Lumination modifiers


The background image displayed can be darker or lighter. According to the image's nature, text's color can be set to black or white. Previous example is the default one (dark). Next one is the "light background" example.

The modifier naming is set according to the image's brightness, not the text's color:

.c-promotion-image .c-promotion-image--light
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus


Collection labeled


If collection property is filled with a valid collection value, a label should be displayed.

.c-promotion-image collection=boutique

Handlebars

Lorem ipsum dolor sit amet
boutique

Lorem ipsum dolor sit amet

Go to Promo

Loading...

Alignment modifiers


The alignment modifiers allow to change the component's inner content alignment.

.c-promotion-image .c-promotion-image--right
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

.c-promotion-image .c-promotion-image--right .c-promotion-image--light
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

.c-promotion-image .c-promotion-image--center

Handlebars

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

Loading...
.c-promotion-image .c-promotion-image--center .c-promotion-image--light
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus


Gradient modifiers


In some cases, a gradient may be needed as a background in order to make text more visible. This can be set for both dark and light images. Gradient colors will change according to image's brightness:

.c-promotion-image @root.c-promotion-image--with-gradient
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

.c-promotion-image .c-promotion-image--light c-promotion-image--with-gradient
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

Both alignment and gradient modifiers applied together

.c-promotion-image @root.c-promotion-image--with-gradient .c-promotion-image--right
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

.c-promotion-image .c-promotion-image--light c-promotion-image--with-gradient .c-promotion-image--right
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus


Properties


c-promotion-image stretch="true"
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

This is a really long text...That forces the promotion image to grow in height, ignoring aspect ratio.

Lorem ipsum dolor sit amet, te est putent vocent apeirian, tota fugit cu vel, est quis impetus sententiae no. Mazim iusto dicunt vim id, eam ex modo commodo repudiare. Duis graeco eum et. Id est amet zril reprimique. Utroque luptatum evertitur his eu, sed eripuit antiopam conclusionemque et, eu dolorem molestie sit. Simul sanctus pri no, apeirian deterruisset his ei. Simul choro tantas eu vel.

  • Vis in iracundia sadipscing
  • Duo ea alii rebum reprimique
  • Cu sumo nostro senserit eum
  • Sed eu nibh mutat, at fabulas iracundia sit

Lorem ipsum dolor sit amet, te est putent vocent apeirian, tota fugit cu vel, est quis impetus sententiae no. Mazim iusto dicunt vim id, eam ex modo commodo repudiare. Duis graeco eum et. Id est amet zril reprimique. Utroque luptatum evertitur his eu, sed eripuit antiopam conclusionemque et, eu dolorem molestie sit. Simul sanctus pri no, apeirian deterruisset his ei. Simul choro tantas eu vel.

  • Vis in iracundia sadipscing
  • Duo ea alii rebum reprimique
  • Cu sumo nostro senserit eum
  • Sed eu nibh mutat, at fabulas iracundia sit
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

This is a really short text...To show that aspect ratio of promotion image next to me works.

c-promotion-image titleValign="top"

Handlebars

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

Loading...
c-promotion-image titleValign="bottom" buttonValign="top"

Handlebars

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

Loading...
c-promotion-image titleValign="bottom" buttonValign="bottom"

Handlebars

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

Loading...
c-promotion-image titleValign="bottom" buttonValign="middle"

Handlebars

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

Loading...
c-promotion-image c-promotion-image--right titleValign="bottom" buttonValign="middle"

Handlebars

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus

Loading...

Promotion Images Grouped


Promotion images can be displayed inside a group. Layout options, besides the single image, are 2 and 3 items displayed as shown here:

c-promotion-image__group [1 image]
Enjoy the best sunsets

Enjoy the best sunsets

Fusce sit amet fermentum diam maecenas odio

c-promotion-image__group [2 images]
Enjoy the best sunsets

Enjoy the best sunsets

Fusce sit amet fermentum diam maecenas odio

Super family ski packages

Super family ski packages

Fusce sit amet fermentum diam maecenas odio

c-promotion-image__group [3 images]

Handlebars

Enjoy the best sunsets

Enjoy the best sunsets

Fusce sit amet fermentum diam maecenas odio

Super family ski packages

Super family ski packages

Fusce sit amet fermentum diam maecenas odio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Loading...
c-promotion-image__group [3 images in a row]

Handlebars

No Handlebars template available

As there's no consumer using HBS, it's considered not needed for now.

Enable development mode to check the available JS template.

Loading...
c-promotion-image__group with video

Handlebars

Super family ski packages

Super family ski packages

Fusce sit amet fermentum diam maecenas odio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Loading...

Promotion Images Variations


Promotion images can have variations as shown here:

.c-promotion-image .c-promotion-image--solid-color

Handlebars

[Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet]

Loading...