All- Carousel - Icon Promo Lead
All- Carousel - Icon Promo Lead
Last Update: 07/10/2018
Version - Icon Promo Lead widget
Version - Icon Promo Lead widget
Main features
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
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
EXPLAINER
https://univision.invisionapp.com/share/WUMV1C7HVGE
MOCKUPS
MOCKUPS
- Mobile (414): https://univision.invisionapp.com/share/NHMUZ13TJQK
- Desktop (1440): https://univision.invisionapp.com/share/QKMUZ34GJT6
CRAFT DIRECT URLs
CRAFT DIRECT URLs
Desktop
- 1440: https://univision.invisionapp.com/d/main/#/console/12862898/307705160/inspect
- 1280: https://univision.invisionapp.com/d/main/#/console/12862898/307705159/inspect
- 1024: https://univision.invisionapp.com/d/main/#/console/12862898/307705158/inspect
- 768: https://univision.invisionapp.com/d/main/#/console/12862898/307705157/inspect
Mobile
- 414: https://univision.invisionapp.com/d/main/#/console/12863211/307828154/inspect
- 320: https://univision.invisionapp.com/d/main/#/console/12863211/307828153/inspect
Sketch editable file:
https://drive.google.com/a/fusion.net/file/d/1CrRM81l39Neanqof2yWZDB5YwYWjZRwA/view?usp=sharing