UNOW HEADERS & NAV
Last update: 02/08/2018
Last update: 02/08/2018
For desktop, mobile and app and will lead users to UNow
· Ver + UNOW Logo
FOR MOBILE
1. TV NOW entry point in Global Nav will be removed
2. Ver NOW button size is 90x24 and should be 10px away from de right side.
3. Brand must be in the left side.
FOR DESKTOP
1. TV NOW entry point in Global Nav will be removed
2. Ver NOW button size is 105x28
3. Brand must be in the center
4. Search icon triggers a micro-interaction in the header. when enter key is hit after input text, this action leads to search page.
5. Searcho icon micro-interaction
Always shown
featured sections: and supports up to 15 links. each of them has a active state with an underline which inherits the theming from the vertical where it belongs.
No entry point for TV NOW.
1. Hamburger icon
2. logo: maxheight= 32px desktop / 24px Mobile
3. Search Icon:
Mobile: In the expanded versiom will be a placeholder as first item
Desktop: triggers a micro-interaction in the header. when enter key is hit after input text, this action leads to search page.
4. VER NOW button
Show header background: Its color is black by default, but can be customized by editorial request in order to use the colors from DS palette. if desired, it can use a background image with a subtle texture.
Custom header background:
1. Hambuger icon
2. Logo (all breakpoints): should be SVG files, and be cropped to the edges in order to optimize visualization.
Max-width: 180px / Max-Height: 56px
3. Links: max-width of the area for links is 510px. after this, a button "más" is triggered in order to nest the remaining links.
4. Airing date: airing date is optional and should be written in the format: DAY - TIME / TIME(central time)
3. Search Icon:
Mobile: In the expanded versiom will be a placeholder as first item
Desktop: triggers a micro-interaction in the header. when enter key is hit after input text, this action leads to search page.
5. VER NOW button
Section header: displays the name of the section besides the logo from the vertical
Content Header: Displays the name of the section where the content belongs
1. Hamburger icon
2. Vertical logo: Includes a link to the homepage from the vertical
3. section name: In the context of section pages has no link. But in the context of content pages includes a link to the section page where the content belongs
4. Search Icon:
Mobile: In the expanded versiom will be a placeholder as first item
Desktop: triggers a micro-interaction in the header. when enter key is hit after input text, this action leads to search page.
5. VER NOW button
FOR MOBILE ONLY:
In the expanded hamburguer menu, Ver Now button is shown on the right side.
Search is a placeholder as the first item in the list.
QUESTIONS OR RECOMMENDATIONS MLUQUE@KINJA.COM, AGONGORA@KINJA.COM