UNOW HEADERS & NAV

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

1. Global Nav

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.

2. Branded header

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

4. Show/Custom Header

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:

• size: 1440px width / 100px height
• design should be an ambient texture. photos of talents, high contrast images or photos are not recommended.
• image should be aligned to the right of the screen in order to be seamless in screens with a width higher than 1440px

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

7. Section / content header

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.