Hero Full Page

How to use it.
Hero Full + Hero Half CT

Add a tint to a background picture: - Add class canon-tint to hero-full__picture-wrapper

Add a tint to a background video: - Add class canon-tint to hero-full__responsive-video-placeholder

Change tint level: - Depeneding on the level of tint intesity, add one of the below modifier class to hero-full__picture-wrapper, i.e
canon-tint--veryhigh_transparent for 10%
canon-tint--high_transparent for 20%
canon-tint--medium_transparent for 30%
canon-tint--low_transparent for 40%
canon-tint--verylow_transparent-opaque for 50%
canon-tint--low_opaque for 60%
canon-tint--medium_opaque for 70%

Add gradient: - Add class canon-graduated-after to hero-full__picture-wrapper

Change font color: - Add color changing class (i.e canon-color--white) to an element.

Change font family: - Add canon-h1-tungsten class to hero-header-full__content-heading class. It's worth noticing that each heading has Gotham font family by default.

Change header to editorial size: - Add canon-h1-tungsten--editorial and canon-h1-tungsten--editorial-a classes for Tungsten or canon-h1--big class for Gotham to hero-full__content-heading class. It's worth noticing that each heading has Gotham font family by default, so refer to point number 3 for changing font family.

Align Canon ambassador: - to align to the right or left, add hero-full__ambassador--right or hero-full__ambassador--left to the element with hero-full__ambassador class.

Align exif info: - to align to the right or left, add hero-full__exif--right or hero-full__exif--left to the element with hero-full__exif class.

Align column in the container: - by default the column is aligned to the left. To center align it or move it to the right: add hero-full__content-right class or to center it, add hero-full__content-center to the element with container class, which is a direct parent of an element with a class called hero-full__content-wrapper

Add an auto-play muted background video: Firstly, add hero-full--video modifier to hero-full class. Next, create a div element and and hero-full__video-placeholder class inside hero-full element. Subsequently, inside that div create a new element and add the following classes: hero-full__responsive-video-placeholder and responsive-video__placeholder. Also, add the following data attributes: data-account-id, data-player-id, data-video-id and data-element-id. Full example of video implementation can be found in hero-full-a.html file.

Transform to half size hero: Just add hero-full--half modifier to hero-full class.

Hero Half CT - Progress Bar

Markus Varesvuo on why the Canon EOS 90D is the ideal camera

•9 MINS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim, nisl cursus convallis convallis, mauris augue bibendum risus, ac volutpat tellus massa placerat quam. Phasellus id urna rutrum, pulvinar mauris id, volutpat ex. Nullam sit amet venenatis velit. Nunc rutrum ac orci elementum porttitor. Ut ultrices eget metus vel congue. Curabitur eu elit at dui eleifend blandit. Ut elementum ultrices lorem, a egestas lorem tincidunt et. Fusce sapien est, porttitor id dignissim vitae, semper non mauris. Praesent mauris nisi, mollis eget porta eu, commodo eget eros. Nunc ac diam nec nisi mollis fermentum. Ut ultrices consectetur pharetra. Curabitur laoreet finibus libero, efficitur pellentesque augue lacinia sit amet. Integer tincidunt vitae leo in gravida. Mauris tincidunt turpis nisi, in fermentum risus aliquet sed. Duis mattis justo ut velit malesuada cursus. Sed eu purus quis augue feugiat rhoncus eu ac ipsum.

Aenean ornare nibh est, id convallis ligula gravida at. Nam auctor bibendum justo, ut mattis nulla semper non. Curabitur eleifend diam non eros bibendum, vel gravida erat finibus. Pellentesque erat ex, eleifend in turpis sit amet, fringilla imperdiet risus. Nunc at dapibus quam. Quisque porttitor ipsum interdum arcu malesuada suscipit. Donec volutpat sed ante quis eleifend. Morbi efficitur est et ipsum mattis, vitae lacinia sapien congue. Aliquam erat volutpat. Nunc varius feugiat faucibus. Vivamus a lectus nec sem ullamcorper pellentesque et sit amet risus. Phasellus rutrum, erat nec condimentum condimentum, dui erat laoreet diam, sit amet placerat urna lacus id ante. Morbi ac semper sem. Aliquam quis libero tincidunt, efficitur erat ut, tempus tortor. Aenean lobortis, sapien id lacinia dapibus, eros elit aliquam neque, vel sodales sapien augue in eros. Nulla finibus nisi tortor, sit amet suscipit leo bibendum ut.

How to use it.Hero Full + Hero Half CT

Javascrip: YES

Hero Full CT - a

Hero Full CT - h

Hero Full CT - i

Hero Full CT - b

Hero Full CT - c

Hero Full CT - d

Hero Full CT - e

Hero Full CT - f

Hero Full CT - g

Hero Half CT - a

Hero Half CT - h

Hero Half CT - i

Hero Half CT - b

Hero Half CT - c

Hero Half CT - c A-plus

Hero Half CT - d

Hero Half CT - d A-plus

Hero Half CT - e

Hero Half CT - e A-plus

Hero Half CT - f

Hero Half CT - f - A-plus

Hero Half CT - g

Hero Half CT - Progress Bar

Hero Full CT - Lightbox

How to use it.
Hero Full + Hero Half CT