How to use it.
Flex Block Media

• Variant with spaces on side: - Replace container-large with container class. Change background color adding class to block-rectangle__wrapper instead of block-rectangle. Add block-rectangle--margins to block-rectangle element.

• Change background color: - Add color changing class (i.e canon-bg--grey-lightest) to block-rectangle__wrapper for background color inside of the container or to block-rectangle for background color outside of the container.

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

• Add border bottom to CTA: - Add class block-rectangle__content-cta--border-bottom to block-rectangle__content-cta element.

• Full width CTA: - Add class block-rectangle__content-link--full-width to block-rectangle__content-cta element.

• To center content (i.e CTAs, article): - Add block-rectangle__content--center class to the parent element. (i.e block-rectangle__content-article for article, block-rectangle__content-cta for CTAs)

• To delete product picture: - Delete entire block-rectangle__content-picture-wrapper HTML element from code.

• To change the order (picture left, content right and other way around): - Add class block-rectangle__content--order-reverse to block-rectangle__content element.

• To center entire content: - Add class block-rectangle__content--center to block-rectangle__content element.

• To make links static: - Remove class from canon-link--fwd element.

• To include any video to the component: - Add responsive-video__placeholder element with responsive-video__placeholder--desktop and responsive-video__placeholder--mobile modifier class just outside of the container as block-rectangle direct child. In order to play video inside of the container, include the same element just inside of the cointainer as its direct child. Pass all the video details (video id etc.)into the data attributes of responsive-video__video-play-overlay element.