All- Carousel - Icon Promo

All- Carousel - Icon Promo Lead

Last Update: 07/10/2018

Version - Icon Promo Lead widget

Main features

Icon: 44x44px (mobile) / 48px x 48px (desktop) SVG, JPG, GIF, PNG
Section Name: Limited to 64px width on mobile and 72px width in desktop
Scroll Arrow: DESKTOP ONLY - NOT AVAILABLE ON MOBILE. appears when scroll is needed, icon below fades to 10% opacity

States: Active state shares style with hover state on desktop

ICON STATES - content widget

HOVER

Exclusive of Desktop interactions, text takes a lighter gray in order to differenciate.

Active/hover color inherits color theming

ACTIVE

Active state only is displayed when the widget is being used as navigation tool e.g. horóscopos section to navigate between signs

DEFAULT

Icons can fade to 10% opacity if they are in the edge of the carousel below the swiping arrow.

as a rule, text box width is the same of the oval of the icon.

EXPLAINER

https://univision.invisionapp.com/share/WUMV1C7HVGE

MOCKUPS

Mobile (414): https://univision.invisionapp.com/share/NHMUZ13TJQK
Desktop (1440): https://univision.invisionapp.com/share/QKMUZ34GJT6

CRAFT DIRECT URLs

Desktop

Mobile

Sketch editable file:

https://drive.google.com/a/fusion.net/file/d/1CrRM81l39Neanqof2yWZDB5YwYWjZRwA/view?usp=sharing

Report abuse