Content Reveal FX

Applies to certain elements in the webpage:

  • Only elements inside the 'main' element
  • Elements with '.content-block' class

Uses 'content-fx' modifier class on the 'body' element, together with a 'data-content-fx' attribute to specify the reveal style.

Respects 'prefers-reduced-motion: reduce' by removing the parent class from the DOM.

Content FX with 'data-content-fx="fade"':

Promo panel area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

  • 16:9 image

    Panel title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit ipsum nec mauris ornare suscipit.

    Panel CTA

  • 16:9 image

    This is another panel title

    Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla.

    Panel CTA

  • 16:9 image

    The third title

    Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

    Panel CTA

image title goes here
Optional image caption

Split layout : Image right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

CTA button

Content FX with 'data-content-fx="fade-slide-up"':

Promo panel area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

  • 16:9 image

    Panel title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit ipsum nec mauris ornare suscipit.

    Panel CTA

  • 16:9 image

    This is another panel title

    Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla.

    Panel CTA

  • 16:9 image

    The third title

    Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

    Panel CTA

image title goes here
Optional image caption

Split layout : Image right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

CTA button

Content FX with 'data-content-fx="fade-scale-slide-up"':

Promo panel area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

  • 16:9 image

    Panel title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit ipsum nec mauris ornare suscipit.

    Panel CTA

  • 16:9 image

    This is another panel title

    Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla.

    Panel CTA

  • 16:9 image

    The third title

    Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

    Panel CTA

image title goes here
Optional image caption

Split layout : Image right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

CTA button