Header & navigation
📱MOBILE
#1 Header – Mobile
Component Breakdown
Menu Icon
Alyasra Logo
Search Icon
Variants
White transparent Header sits on top of banner
Full white Header sits above banner
Icon
Menu Icon
– 16x22px
– svg format
Search Icon
– 24x24px
– svg format
Character Count
n/a
Dev Notes
Menu: OnTap open navigation/search
Background fill of component variant is just so you can see the transparent variant of the header, don’t include in build
Logo links to homepage
Search icon: OnTap opens search
Animation
Menu icon goes into its open state, please look at “Blue Fill” in styleguide for both variants
Search opens panel and cross appears
n/a
🖥️ DESKTOP
#1 Header – Desktop
Component Breakdown
Menu Icon
Alyasra Logo
Search Icon
Variants
White transparent Header sits on top of banner
Full white Header sits above banner
Icon
Menu Icon
– 20x28px
– svg format
Search Icon
– 32x32px
– svg format
Character Count
n/a
Dev Notes
Menu: OnTap open navigation/search
Background fill of component variant is just so you can see the transparent variant of the header, don’t include in build
Logo links to homepage
Search icon: OnTap opens search
Animation
Menu icon goes into its open state, please look at “Blue Fill” in styleguide for both variants
Search opens panel and cross appears
n/a
📱MOBILE
#2 Navigation – Mobile
Component Breakdown
Menu Icon
Navigation Menu
– Accordion
– Main Title: H1 Display
– Navigation: Body Copy Large & Regular
Icon
Menu Icon
– 16x20px
– svg format
Accordion Icon
– 13x9px
– svg format
Character Count
Navigation Menu Title
– Min: 4 characters
– Max: 14 characters
Navigation Menu Body
– Min: 4 characters
– Max: 28 characters
Dev Notes
Menu: OnTap close navigation either on menu icon or outside menu
Active icon for accordion will be showcased with it’s open state icon and inactive will be closed state
ONLY for panel slide out example look at
https://www.viviennewestwood.com/en-gb/home/
Animation
Menu icon on close goes into its closed state, either grey or white outline depending on variants
Accordion is default style animation
n/a
Our portfolio
All Brands
Footwear
Watches & Jewellery
Premium Fashion
Fashion Ventures
Digital E-commerce
Our story
News & Media
Join Us
Contact
Close
🖥️ DESKTOP
Core
#2 Navigation – Desktop
Component Breakdown
Menu Icon
Navigation Menu
– Accordion
– Main Title: H2
– Navigation: Body Copy Large & Regular
Icon
Menu Icon
– 20x28px
– svg format
Accordion Icon
– 13x9px
– svg format
Character Count
Navigation Menu Title
– Min: 4 characters
– Max: 14 characters
Navigation Menu Body
– Min: 4 characters
– Max: 28 characters
Dev Notes
Menu: OnTap close navigation either on menu icon or outside menu
Active icon for accordion will be showcased with it’s open state icon and inactive will be closed state
Underline appears on hover
ONLY for panel slide out example look at
https://www.viviennewestwood.com/en-gb/home/
Animation
Menu icon on close goes into its closed state, either grey or white outline depending on variants
Accordion is default style animation
n/a
Our portfolio
All Brands
Footwear
Watches & Jewellery
Premium Fashion
Fashion Ventures
Digital E-commerce
Our story
News & Media
Join Us
Contact
Close