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

Promotion Image
boutique

Promotion Image

.c-promotion-image

Loading...

Alignment modifiers


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

.c-promotion-image .c-promotion-image--right

Handlebars

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

Handlebars

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

Handlebars

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

Handlebars

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

Handlebars

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

Handlebars

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

Handlebars

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Fusce sit amet fermentum diam. Maecenas odio tellus


Properties


c-promotion-image stretch="true"

Handlebars

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

Handlebars

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]

Handlebars

Enjoy the best sunsets

Enjoy the best sunsets

Fusce sit amet fermentum diam maecenas odio

c-promotion-image__group [2 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

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 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...