Beauty · Navigation
Kylie Cosmetics Announcement Navbar
Beauty-brand header: a mauve top bar running a pure-CSS infinite promo ticker (20% off lip kits, free shipping over $40, 4 interest-free payments) that pauses on hover and duplicates its items with aria-hidden for a seamless loop, over a white three-column nav row — lowercase category links with animated underline on the left, a wide-tracked wordmark centered, and search / account / bag icon buttons on the right with a mauve item-count badge. Links collapse and the wordmark left-aligns under 780px; account hides under 480px. Respects prefers-reduced-motion.
Start from this storefront direction, inspect the live interactions, and adapt the content and products to your brand.
Preview templateTemplate details
A clear starting point for the page.
The template keeps the visual direction and interactions together while leaving product facts, offers, and claims to the brand using it.
- Industries
- Beauty, Fashion
- Page types
- Product page, Landing page, Homepage, Collection page
- Section
- Navigation
- Style
- Soft
Live storefront preview
See the direction in motion.
Build around shopper intent
Create storefront pages for the way shoppers discover and decide.
See where your current pages can better help shoppers understand the product, choose confidently, and continue the promise behind a campaign.