Canon | Flex Product Grid

How to use it.
FLEX Product Grid

  • To change the background color: Add color changing class (i.e canon-bg--grey-lightest) to product-grid element.

  • To change the product image background color: Add color changing class (i.e canon-bg--grey-lightest) to product-grid__item-img-wrapper element.

  • To add zoom on hover effect: Add product-grid__item-img-wrapper--zoom-in class to product-grid__item-img-wrapper element.

  • To use label with the link: Wrap promo-label__item-label element with a tag and apply promo-label__link class to the link. NOTE:
    Label NEW has to have promo-label__link--first class since it always comes first.

  • To use plain label (no link): Grab element with promo-label__item-label class without wrapping it with a tag. NOTE:
    Label NEW has to have promo-label__item-label--first class since it always comes first.

  • To change background color of label: Add color changing class (i.e canon-bg--purple) to promo-label__item-label element.

  • To use variant with slider on mobile. Use the appropriate file (product-grid-c-slider etc.).

  • Single slide item: Single slide item doesn't have li element wrapper. Pick up appropriate html file.

Javascript: Yes


How to use it.
FLEX Product Grid A (html file: product-grid-a.html)

  • To set background color to white: Don't add any color changing modifier classes to product-grid element, white by default.

  • To change the product image background color: Add color changing class (canon-bg--grey-lightest) to product-grid__item-img-wrapper element. Use image with the same background color (grey lightest).

  • To add zoom on hover effect: Add product-grid__item-img-wrapper--zoom-in class to product-grid__item-img-wrapper element.

  • To use label with the link: Wrap promo-label__item-label element with a tag and apply promo-label__link class to the link. NOTE:
    Label NEW has to have promo-label__link--first class since it always comes first.

  • To use plain label (no link): Grab element with promo-label__item-label class without wrapping it with a tag. NOTE:
    Label NEW has to have promo-label__item-label--first class since it always comes first.

  • To change background color of label: Add color changing class (i.e canon-bg--purple) to promo-label__item-label element.

FLEX Product Grid - Variant 1

Header

Product Name

How to use it.
FLEX Product Grid B (html file: product-grid-b.html)

  • To set background color to grey lightest: Add color changing class (i.e canon-bg--grey-lightest) to product-grid element.

  • To change the product image background color: Add color changing class (canon-bg--white) to product-grid__item-img-wrapper element. Use image with the same background color (white).

  • To add zoom on hover effect: Add product-grid__item-img-wrapper--zoom-in class to product-grid__item-img-wrapper element.

  • To use label with the link: Wrap promo-label__item-label element with a tag and apply promo-label__link class to the link. NOTE:
    Label NEW has to have promo-label__link--first class since it always comes first.

  • To use plain label (no link): Grab element with promo-label__item-label class without wrapping it with a tag. NOTE:
    Label NEW has to have promo-label__item-label--first class since it always comes first.

  • To change background color of label: Add color changing class (i.e canon-bg--purple) to promo-label__item-label element.

FLEX Product Grid - Variant 1

Header

Product Name


How to use it.
FLEX Product Grid Carousel white (html file: product-grid-c-slider.html)

  • Variant with slider on mobile. Use the appropriate html file -> product-grid-c-slider.html. HTML structure differ.

  • Single slide item: Single slide item doesn't have li element wrapper. Pick up appropriate html file.
    product-grid-slide-a.html
    product-grid-slide-b.html
    product-grid-slide-c.html
    product-grid-slide-d.html
    product-grid-slide-e.html
    product-grid-slide-f.html

  • To set background color to white: Don't add any color changing modifier classes to product-grid element, white by default.

  • To change the product image background color: Add color changing class (canon-bg--grey-lightest) to product-grid__item-img-wrapper element. Use image with the same background color (grey lightest).

  • To add zoom on hover effect: Add product-grid__item-img-wrapper--zoom-in class to product-grid__item-img-wrapper element.

  • To use label with the link: Wrap promo-label__item-label element with a tag and apply promo-label__link class to the link. NOTE:
    Label NEW has to have promo-label__link--first class since it always comes first.

  • To use plain label (no link): Grab element with promo-label__item-label class without wrapping it with a tag. NOTE:
    Label NEW has to have promo-label__item-label--first class since it always comes first.

  • To change background color of label: Add color changing class (i.e canon-bg--purple) to promo-label__item-label element.

FLEX Product Grid - Carousel WHITE - Variant 3

Header

Product Name

Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen

How to use it.
FLEX Product Grid Carousel Grey (html file: product-grid-d-slider.html)

  • Variant with slider on mobile. Use the appropriate html file -> product-grid-d-slider.html. HTML structure differ.

  • Single slide item: Single slide item doesn't have li element wrapper. Pick up appropriate html file.
    product-grid-slide-a.html
    product-grid-slide-b.html
    product-grid-slide-c.html
    product-grid-slide-d.html
    product-grid-slide-e.html
    product-grid-slide-f.html

  • To set background color to grey lightest: Add color changing class (i.e canon-bg--grey-lightest) to product-grid element.

  • To change the product image background color: Add color changing class (canon-bg--white) to product-grid__item-img-wrapper element. Use image with the same background color (white).

  • To add zoom on hover effect: Add product-grid__item-img-wrapper--zoom-in class to product-grid__item-img-wrapper element.

  • To use label with the link: Wrap promo-label__item-label element with a tag and apply promo-label__link class to the link. NOTE:
    Label NEW has to have promo-label__link--first class since it always comes first.

  • To use plain label (no link): Grab element with promo-label__item-label class without wrapping it with a tag. NOTE:
    Label NEW has to have promo-label__item-label--first class since it always comes first.

  • To change background color of label: Add color changing class (i.e canon-bg--purple) to promo-label__item-label element.

=

FLEX Product Grid - Carousel GREY LIGHTEST - Variant 3

Header

Product Name

Canon Camera
New

Mirrorless Cameras

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen

How to use it.
FLEX Product Grid Arabic

  • In terms of colors and lables the same rules apply as above.

  • Change the entire component to Arabic (text and items order from right to left.) Add dir="rtl" attribute to the html product-grid element.


FLEX Product Grid - Variant 1

Header

Product Name

FLEX Product Grid - Variant 3

Header

Product Name

Canon Camera
New

Mirrorless Cameras

Eos M10

امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام. امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام.
Canon Camera
New

Mirrorless Cameras

Eos M10

امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام. امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام.
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام.
Canon Camera
New

Mirrorless Cameras

Eos M10

امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام. امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام.
Canon Camera
New

Mirrorless Cameras

Eos M10

امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام. امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام.
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

امنح التصوير الفوتوغرافي دفعة قوية ، مع استخدام DSLR متطور سهل الاستخدام.

FLEX Product Grid - Variant 3

Header

Product Name

Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New
  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three

  • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

Eos M10

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
Canon Camera
New

Mirrorless Cameras

Canon imageRUNNER ADVANCE 6065i

Give your photography a boost, with a sophisticated DSLR that's easy to use.
  • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
  • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
  • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen

FLEX Product Grid - Variant 2

Header

Product Name

FLEX Product Grid WHITE 4 with Load More - Variant 2

Header

Product Name

FLEX Product Grid WHITE 4 with Load More with No Ajax Call - Varaint 2

Header

Product Name

    FLEX Product Grid Revrse- Variant 2

    Header

    Product Name

    Header

    Product Name

    Canon Camera
    New
    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    Eos M10

    Give your photography a boost, with a sophisticated DSLR that's easy to use.
    • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
    • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
    • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
    Canon Camera
    New
    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three

    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    Eos M10

    Give your photography a boost, with a sophisticated DSLR that's easy to use.
    • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
    • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
    • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
    Canon Camera
    New

    Mirrorless Cameras

    Canon imageRUNNER ADVANCE 6065i

    Give your photography a boost, with a sophisticated DSLR that's easy to use.
    • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
    • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
    • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
    Canon Camera
    New
    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    Eos M10

    Give your photography a boost, with a sophisticated DSLR that's easy to use.
    • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
    • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
    • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
    Canon Camera
    New
    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three

    • LENS SUITABLE FOR : PORTRAIT, Genre Two & Genre Three Adapter

    Eos M10

    Give your photography a boost, with a sophisticated DSLR that's easy to use.
    • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
    • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
    • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen
    Canon Camera
    New

    Mirrorless Cameras

    Canon imageRUNNER ADVANCE 6065i

    Give your photography a boost, with a sophisticated DSLR that's easy to use.
    • Enthusiast DSLR for wildlife, sports and action, with an 18-135mm zoom lens
    • 32.5 MP, APS-C sensor, 10 fps, Dual Pixel CMOS AF
    • Wi-Fi and Bluetooth, 4K movies, Vari-Angle Touchscreen