Header
The uppermost part of the page, containing the logo and site-wide navigation.
Default header orc-c-header
The uppermost part of the page, containing the logo and site-wide navigation.
-
<header class="orc-c-header orc-js-header-headroom orc-js-header"> <div class="orc-c-header__inner"> <a class="orc-c-logo " href="/patterns/04-pages-00-homepage/04-pages-00-homepage.rendered.html"> <svg class="orc-c-logo__img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283 56.5" aria-labelledby="the-cosmopolitan"><defs><style>.cosmopolitan-logo-1{isolation:isolate;}.cosmopolitan-logo-3{fill:#dbd9d6;}.cosmopolitan-logo-4,.cosmopolitan-logo-5{mix-blend-mode:multiply;}.cosmopolitan-logo-5{fill:#b3b2b1;}.cosmopolitan-logo-6{fill:#8c189b;}</style></defs><title id="the-cosmopolitan">The Cosmopolitan of Las Vegas</title><g id="Layer_1" class="cosmopolitan-logo-1"><circle class="cosmopolitan-logo" cx="28.25" cy="28.25" r="28.25"/><path class="cosmopolitan-logo-3" d="M28.25 36.58a8.32 8.32 0 1 1 7.85-11.1h20.27a28.24 28.24 0 1 0 0 5.56h-20.27a8.33 8.33 0 0 1-7.85 5.54z"/><path class="cosmopolitan-logo-5" d="M42.95 52.29a21.36 21.36 0 0 1-11.83 3c-13.49 0-23.72-9-23.72-27.08s10.22-27.04 23.71-27.04c7.4 0 12.07 1.93 17.62 7.84l-5.32 4.99c-4.03-4.45-7.18-6-12.3-6s-9.57 2-12.4 6c-2.5 3.44-3.48 7.53-3.48 14.19s1 10.75 3.48 14.19c2.83 4 7.18 6 12.4 6s8.31-1.64 12.33-6l5.39 5.2a27.09 27.09 0 0 1-5.88 4.71z"/><path class="cosmopolitan-logo-6" d="M43.43 14.66a5.8 5.8 0 0 1-1.51 4.16 5.12 5.12 0 0 1-3.92 1.59q-5.72 0-5.71-5a8.47 8.47 0 0 1 .7-3 8.06 8.06 0 0 0 .7-2.5 4.56 4.56 0 0 0-1.52-3.51 5.46 5.46 0 0 0-3.83-1.4c-6.54 0-10.69 7.17-10.69 21.59 0 8.23 2.33 14.13 5.2 17.68a10.24 10.24 0 0 0 8.2 4c3.38 0 6.62-1.65 10.14-6 .31-.41.45-.59.9-1.16.31.25 1.32 1.19 1.54 1.42a27.69 27.69 0 0 1-4.08 4.5 20.26 20.26 0 0 1-13.9 5.37 22.51 22.51 0 0 1-16.55-6.8 22.72 22.72 0 0 1-6.84-16.67 24.52 24.52 0 0 1 7.22-17.93 24.05 24.05 0 0 1 17.79-7.31 19.9 19.9 0 0 1 11.47 3.19q4.7 3.2 4.69 7.78z"/><path class="cosmopolitan-logo-2" d="M277.33 20.38v3.85h-.45v-3.85h-1.23v-.38h2.92v.41zm5.22 3.85v-3.23l-1.17 2.56h-.38l-1.19-2.56v3.23h-.45v-4.23h.45l1.39 3 1.35-3h.45v4.26zM136.62 45.31a1.6 1.6 0 0 1 1.63 1.77 3.5 3.5 0 0 1-3.1 3.54 1.62 1.62 0 0 1-1.68-1.76 3.51 3.51 0 0 1 3.15-3.55zm-1.35 4.69c1.21 0 2-2.12 2-3 0-.55-.18-1.11-.84-1.11-1.2 0-2 2.11-2 3 .02.56.18 1.11.84 1.11zm7.6-6.79a2.07 2.07 0 0 0-2 1.86c-.07.3-.49 1.69-.49 1.69s-.2.18-.49.31-.39.19-.39.32a.13.13 0 0 0 .14.14h.51l-1.15 3.95c-.11.38-.29.46-.39.46-.39 0-.51-.3-.81-.3a.5.5 0 0 0-.53.46c0 .47.46.57.68.57a2.58 2.58 0 0 0 2.26-2l.9-3.07h1.1l.33-.67h-1.23l.74-2.55c.1-.32.22-.44.48-.44.43 0 .09.57.65.57a.61.61 0 0 0 .61-.63c.02-.33-.31-.65-.92-.65zm5 8.18v-8h1.22v6.91h3.85v1.09zm11.92 0l-.55-1.6h-3.16l-.55 1.6h-1.3l2.93-8h1l2.93 8zm-2.1-6.19l-1.25 3.54h2.46zm7.19 6.26a3.63 3.63 0 0 1-2.88-1.04l.81-.8a2.63 2.63 0 0 0 2 .77c1 0 1.65-.45 1.65-1.23a1.1 1.1 0 0 0-.31-.84 1.41 1.41 0 0 0-.88-.33l-.95-.14a2.7 2.7 0 0 1-1.52-.64 2 2 0 0 1-.59-1.53 2.36 2.36 0 0 1 2.79-2.33 3.35 3.35 0 0 1 2.49.91l-.78.76a2.33 2.33 0 0 0-1.74-.61c-.94 0-1.46.53-1.46 1.24a1 1 0 0 0 .3.74 1.81 1.81 0 0 0 .9.37l.91.14a2.61 2.61 0 0 1 1.49.59 2.11 2.11 0 0 1 .65 1.64c-.01 1.47-1.21 2.35-2.89 2.35zm11.25-.07h-.95l-2.63-8h1.26l1.84 5.82 1.84-5.82h1.28zm4.34 0v-8h5.11v1.11h-3.89v2.34h3.31v1.07h-3.32v2.41h3.89v1.09zm11.88-.84a3.07 3.07 0 0 1-4.3.06c-.79-.79-.78-1.68-.78-3.21s0-2.43.78-3.22a2.87 2.87 0 0 1 2.1-.85 2.81 2.81 0 0 1 2.85 2.5h-1.22a1.64 1.64 0 0 0-1.69-1.4 1.59 1.59 0 0 0-1.18.49c-.39.42-.48.88-.48 2.48s.09 2.06.48 2.5a1.61 1.61 0 0 0 1.18.48 1.69 1.69 0 0 0 1.31-.57 1.82 1.82 0 0 0 .4-1.25v-.45h-1.71v-1h2.92v1.22a3 3 0 0 1-.67 2.24zm7.35.84l-.55-1.6h-3.15l-.54 1.6h-1.29l2.93-8h1l2.93 8zm-2.1-6.19l-1.25 3.54h2.46zm7.08 6.26a3.62 3.62 0 0 1-2.83-1.06l.81-.8a2.62 2.62 0 0 0 2 .77c1 0 1.65-.45 1.65-1.23a1.07 1.07 0 0 0-.32-.84 1.36 1.36 0 0 0-.87-.33l-.94-.14a2.67 2.67 0 0 1-1.51-.64 2 2 0 0 1-.58-1.53 2.36 2.36 0 0 1 2.67-2.34 3.34 3.34 0 0 1 2.49.91l-.78.76a2.32 2.32 0 0 0-1.74-.61c-.94 0-1.46.53-1.46 1.24a1 1 0 0 0 .3.74 1.8 1.8 0 0 0 .9.37l.91.14a2.58 2.58 0 0 1 1.49.59 2.07 2.07 0 0 1 .66 1.64c.02 1.5-1.19 2.38-2.86 2.38zM73.19 21.46v14.15h-1.69v-14.15h-4.22v-1.46h10.13v1.49zm15.9 14.14v-7.13h-6.53v7.14h-1.68v-15.61h1.69v7h6.53v-7h1.69v15.61zm6.09 0v-15.6h8.82v1.49h-7.13v5.51h6.06v1.49h-6.06v5.65h7.13v1.49zm24.13.14a5.7 5.7 0 0 1-4.05-1.63c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.7 5.7 0 0 1 4.05-1.63 5.32 5.32 0 0 1 5.48 4.66h-1.73a3.73 3.73 0 0 0-3.76-3.17 3.84 3.84 0 0 0-2.73 1.1c-1 1-1.11 2.09-1.11 5.36s.11 4.35 1.11 5.36a3.83 3.83 0 0 0 2.73 1.1 3.77 3.77 0 0 0 3.8-3.17h1.69a5.31 5.31 0 0 1-5.47 4.66zm18.2-1.63a5.84 5.84 0 0 1-8.09 0c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.84 5.84 0 0 1 8.09 0c1.49 1.47 1.49 3 1.49 6.32s0 4.86-1.48 6.32zm-1.31-11.66a3.9 3.9 0 0 0-5.47 0c-1 1-1.11 2.06-1.11 5.34s.12 4.33 1.11 5.34a3.9 3.9 0 0 0 5.47 0c1-1 1.11-2.07 1.11-5.34s-.11-4.32-1.1-5.34zm10.8 13.29a6.92 6.92 0 0 1-5.41-2.07l1.15-1.14a5.46 5.46 0 0 0 4.31 1.72c2.32 0 3.73-1.08 3.73-2.9a2.51 2.51 0 0 0-.76-2 3.36 3.36 0 0 0-2.06-.74l-1.84-.29a5.76 5.76 0 0 1-2.92-1.19 3.67 3.67 0 0 1-1.2-2.88c0-2.66 1.94-4.42 5.07-4.42a6.4 6.4 0 0 1 4.7 1.72l-1.09 1.07a5 5 0 0 0-3.7-1.34c-2.11 0-3.32 1.16-3.32 2.9a2.25 2.25 0 0 0 .71 1.8 4.66 4.66 0 0 0 2.13.86l1.73.26a5.11 5.11 0 0 1 2.88 1.1 3.88 3.88 0 0 1 1.34 3.1c.06 2.7-2.11 4.44-5.45 4.44zm20.88-.14v-11.87l-4.34 9.42h-1.44l-4.4-9.42v11.88h-1.7v-15.61h1.69l5.16 11.09 5-11.09h1.68v15.61zm15.24-1.49a5.85 5.85 0 0 1-8.1 0c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.85 5.85 0 0 1 8.1 0c1.49 1.47 1.49 3 1.49 6.32s.04 4.86-1.45 6.32zm-1.32-11.66a3.8 3.8 0 0 0-2.73-1.12 3.89 3.89 0 0 0-2.74 1.12c-1 1-1.1 2.06-1.1 5.34s.11 4.33 1.1 5.34a3.88 3.88 0 0 0 2.74 1.12 3.8 3.8 0 0 0 2.73-1.12c1-1 1.12-2.07 1.12-5.34s-.08-4.32-1.08-5.34zm12.67 6.73h-4.2v6.43h-1.69v-15.61h5.89c2.89 0 4.89 1.78 4.89 4.59s-1.96 4.59-4.85 4.59zm-.15-7.71h-4v6.22h4c2 0 3.35-1.05 3.35-3.12s-1.34-3.11-3.31-3.11zm17.23 12.65a5.83 5.83 0 0 1-8.09 0c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.83 5.83 0 0 1 8.09 0c1.49 1.47 1.49 3 1.49 6.32s.04 4.85-1.45 6.31zm-1.31-11.66a3.89 3.89 0 0 0-5.46 0c-1 1-1.1 2.06-1.1 5.34s.1 4.33 1.1 5.34a3.89 3.89 0 0 0 5.46 0c1-1 1.11-2.07 1.11-5.34s-.06-4.33-1.07-5.35zm6.78 13.15v-15.61h1.7v14.11h8.08v1.49zm12.73 0v-15.61h1.7v15.61zm10.95-14.15v14.15h-1.7v-14.15h-4.58v-1.46h10.85v1.49zm15.42 14.14l-1.26-3.53h-6.91l-1.27 3.53h-1.8l5.82-15.6h1.43l5.8 15.63zm-4.68-13.24l-3 8.25h5.91zm19.13 13.24l-8.4-12.53v12.54h-1.69v-15.61h1.6l8.4 12.5v-12.5h1.69v15.61z"/></g></svg> </a> <!--end orc-c-logo--> <a href="#main" class="orc-c-btn orc-u-is-vishidden"> <div class="orc-c-btn__inner"> <span class="orc-c-btn__text orc-js-btn-text">Skip To Content</span> </div> <!--end orc-c-btn__inner--> </a> <!-- end orc-c-btn --> <button class="orc-c-btn orc-c-btn--small orc-c-header__nav-btn orc-js-nav-trigger" data-btn-icon-swap="../../orchid-icons.svg"> <div class="orc-c-btn__inner"> <span class="orc-c-btn__text orc-js-btn-text">Menu</span> <svg class="orc-c-btn__icon orc-js-btn-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-btn__icon orc-u-is-hidden orc-js-btn-swap-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../orchid-icons.svg#x"></use> </svg> </div><!--end orc-c-btn__inner--> </button> <!-- end orc-c-btn --> <div class="orc-c-nav-container orc-js-nav-target"> <nav class="orc-c-primary-nav orc-c-primary-nav--megamenu" role="navigation"> <ul class="orc-c-primary-nav__list"> <li class="orc-c-primary-nav__item orc-c-primary-nav--megamenu orc-js-nav-dropdown-item"> <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger"> <span class="orc-c-primary-nav__link-text">The Resort</span> <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon"> <use xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap"> <use xlink:href="../../orchid-icons.svg#x"></use> </svg> </a> <!--end orc-c-primary-nav__link--> <div class="orc-c-primary-nav__panel orc-js-nav-dropdown"> <div class="orc-c-primary-nav__panel-inner"> <div class="orc-c-primary-nav__media-container"> <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="https://images.ctfassets.net/sahy2rpqbnsp/1tL0HkQ2SkusA0cEse4EQQ/b433553c9fa7a819ed20c52a4b11c888/tcolv-lobby-registration.jpg?w=1280&h=720&fm=jpg&q=50&fit=fill" alt="The Cosmopolitan of Las Vegas" /> </div> <div class="orc-c-primary-nav__list-container"> <div class="orc-c-primary-nav__sublist-container"> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-05-accomodations/04-pages-05-accomodations.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-room.jpg" data-nav-image-alt="mischief"> <span class="orc-c-primary-nav__sublink-text">Book Your Stay</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-05-accomodations/04-pages-05-accomodations.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine"> <span class="orc-c-primary-nav__sublink-text">Rooms and Suites</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-06-concierge/04-pages-06-concierge.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">Concierge</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> <div class="orc-c-primary-nav__sublist-container"> <h3 class="orc-c-primary-nav__heading">Amenities</h3> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-07-pool-district/04-pages-07-pool-district.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-room.jpg" data-nav-image-alt="mischief"> <span class="orc-c-primary-nav__sublink-text">Pool District</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-08-sahra-spa-hammam/04-pages-08-sahra-spa-hammam.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine"> <span class="orc-c-primary-nav__sublink-text">Sahra Spa & Hammam</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-09-violet-hour-salon/04-pages-09-violet-hour-salon.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">Violet Hour Salon</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-10-fitness/04-pages-10-fitness.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-room.jpg" data-nav-image-alt="mischief"> <span class="orc-c-primary-nav__sublink-text">Fitness</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-11-shops/04-pages-11-shops.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine"> <span class="orc-c-primary-nav__sublink-text">Shops</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-07-pool-district/04-pages-07-pool-district.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">Art</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> <div class="orc-c-primary-nav__sublist-container"> <h3 class="orc-c-primary-nav__heading">Your Event</h3> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-13-weddings/04-pages-13-weddings.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">Weddings</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-14-meet/04-pages-14-meet.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine"> <span class="orc-c-primary-nav__sublink-text">Meetings & Events</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-14-social-groups/04-pages-14-social-groups.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Social Groups</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> </div> <!--end orc-c-primary-nav__list-container--> </div> <!--end orc-c-primary-nav__panel-inner--> </div> <!--end orc-c-primary-nav__panel--> </li> <!-- end orc-c-primary-nav__list__item --> <li class="orc-c-primary-nav__item orc-c-primary-nav--megamenu orc-js-nav-dropdown-item"> <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger"> <span class="orc-c-primary-nav__link-text">Entertainment</span> <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon"> <use xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap"> <use xlink:href="../../orchid-icons.svg#x"></use> </svg> </a> <!--end orc-c-primary-nav__link--> <div class="orc-c-primary-nav__panel orc-js-nav-dropdown"> <div class="orc-c-primary-nav__panel-inner"> <div class="orc-c-primary-nav__media-container"> <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="https://images.ctfassets.net/sahy2rpqbnsp/3Zo2SR9o0U6gIAa2gYG2We/37ec0b796ee788d986dd6e0659f9bd17/restaurants_rose_rabbit_lie_entertainer_jpg.jpg?w=1280&h=720&fm=jpg&q=50&fit=fill" alt="The Cosmopolitan of Las Vegas" /> </div> <div class="orc-c-primary-nav__list-container"> <div class="orc-c-primary-nav__sublist-container"> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-10-entertainment-calendar/04-pages-10-entertainment-calendar.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Event Calendar</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> <div class="orc-c-primary-nav__sublist-container"> <h3 class="orc-c-primary-nav__heading">Venues</h3> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-16-the-chelsea/04-pages-16-the-chelsea.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-room.jpg" data-nav-image-alt="mischief"> <span class="orc-c-primary-nav__sublink-text">The Chelsea</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-17-marquee-night/04-pages-17-marquee-night.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">Marquee Night/Day Club</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-18-restaurant-detail/04-pages-18-restaurant-detail.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine"> <span class="orc-c-primary-nav__sublink-text">Rose. Rabbit. Lie.</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-19-opium/04-pages-19-opium.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-room.jpg" data-nav-image-alt="mischief"> <span class="orc-c-primary-nav__sublink-text">Opium</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> <div class="orc-c-primary-nav__sublist-container"> <h3 class="orc-c-primary-nav__heading">Don't Miss It</h3> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-20-hoops-and-hops/04-pages-20-hoops-and-hops.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Hoops & Hops</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <span class='orc-c-primary-nav__heading'>Vegas Shenanigans</span> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="http://52stories.cosmopolitanlasvegas.com/" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">52 Stories</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> </div> <!--end orc-c-primary-nav__list-container--> </div> <!--end orc-c-primary-nav__panel-inner--> </div> <!--end orc-c-primary-nav__panel--> </li> <!-- end orc-c-primary-nav__list__item --> <li class="orc-c-primary-nav__item orc-c-primary-nav--megamenu orc-js-nav-dropdown-item"> <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger"> <span class="orc-c-primary-nav__link-text">Food & Drink</span> <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon"> <use xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap"> <use xlink:href="../../orchid-icons.svg#x"></use> </svg> </a> <!--end orc-c-primary-nav__link--> <div class="orc-c-primary-nav__panel orc-js-nav-dropdown"> <div class="orc-c-primary-nav__panel-inner"> <div class="orc-c-primary-nav__media-container"> <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="https://images.ctfassets.net/sahy2rpqbnsp/2jup5CC264sIayyIswaQyS/7d8b38aa935402dd4973db250250cc0f/JEFF-GREEN_20140311-S01A4544-rt.jpg?w=1280&h=720&fm=jpg&q=50&fit=fill" alt="The Cosmopolitan of Las Vegas" /> </div> <div class="orc-c-primary-nav__list-container"> <div class="orc-c-primary-nav__sublist-container"> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-21-restaurants/04-pages-21-restaurants.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Restaurant Collection</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-23-lounges-bars/04-pages-23-lounges-bars.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">Lounges & Bars</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-24-room-service/04-pages-24-room-service.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Room Service</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-25-group-dining/04-pages-25-group-dining.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="../../images/sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie"> <span class="orc-c-primary-nav__sublink-text">Group Dining</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> <div class="orc-c-primary-nav__sublist-container"> <h3 class="orc-c-primary-nav__heading">The Cocktail Hour</h3> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-26-social-hour/04-pages-26-social-hour.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">The Social Hour</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-27-unlock-your-mondays/04-pages-27-unlock-your-mondays.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Unlock Your Mondays</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> </div> <!--end orc-c-primary-nav__list-container--> </div> <!--end orc-c-primary-nav__panel-inner--> </div> <!--end orc-c-primary-nav__panel--> </li> <!-- end orc-c-primary-nav__list__item --> <li class="orc-c-primary-nav__item orc-c-primary-nav--megamenu orc-js-nav-dropdown-item"> <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger"> <span class="orc-c-primary-nav__link-text">The Casino</span> <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon"> <use xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap"> <use xlink:href="../../orchid-icons.svg#x"></use> </svg> </a> <!--end orc-c-primary-nav__link--> <div class="orc-c-primary-nav__panel orc-js-nav-dropdown"> <div class="orc-c-primary-nav__panel-inner"> <div class="orc-c-primary-nav__media-container"> <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="https://images.ctfassets.net/sahy2rpqbnsp/5Us7R9O4nYWUii2EGGMWkO/efc253a9c7c1c6f1a5cedf58448f9906/casino-tables-2-wide.jpg?w=1280&h=720&fm=jpg&q=50&fit=fill" alt="The Cosmopolitan of Las Vegas" /> </div> <div class="orc-c-primary-nav__list-container"> <div class="orc-c-primary-nav__sublist-container"> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-28-casino-overview/04-pages-28-casino-overview.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Casino Overview</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-29-slots/04-pages-29-slots.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Slots</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-30-tables/04-pages-30-tables.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Table Games</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-31-race-sports-book/04-pages-31-race-sports-book.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Race & Sports Book</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-32-tournaments-events/04-pages-32-tournaments-events.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Tournament & Events</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> </div> <!--end orc-c-primary-nav__list-container--> </div> <!--end orc-c-primary-nav__panel-inner--> </div> <!--end orc-c-primary-nav__panel--> </li> <!-- end orc-c-primary-nav__list__item --> <li class="orc-c-primary-nav__item orc-c-primary-nav--megamenu orc-js-nav-dropdown-item"> <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger"> <span class="orc-c-primary-nav__link-text">Identity</span> <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon"> <use xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap"> <use xlink:href="../../orchid-icons.svg#x"></use> </svg> </a> <!--end orc-c-primary-nav__link--> <div class="orc-c-primary-nav__panel orc-js-nav-dropdown"> <div class="orc-c-primary-nav__panel-inner"> <div class="orc-c-primary-nav__media-container"> <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="https://images.ctfassets.net/sahy2rpqbnsp/1Rh6G9x8XusU0AcgKmsKe8/0cf1d95c6c756dd32f6221793feb2c64/Spend_the_Night_Us-wide.jpg?w=1280&h=720&fm=jpg&q=50&fit=fill" alt="The Cosmopolitan of Las Vegas" /> </div> <div class="orc-c-primary-nav__list-container"> <div class="orc-c-primary-nav__sublist-container"> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-offers/04-pages-offers.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Your Exclusive Offers</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-itinerary/04-pages-itinerary.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Your Itinerary</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-account-activity/04-pages-account-activity.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Your Recent Activity</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-profile/04-pages-profile.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Profile</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-marriott-transfer/04-pages-marriott-transfer.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">Convert Marriott Rewards</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> <div class="orc-c-primary-nav__sublist-container"> <h3 class="orc-c-primary-nav__heading">Join or Learn More</h3> <ul class="orc-c-primary-nav__sublist"> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-about-identity/04-pages-about-identity.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">About Identity</span> </a> </li> <!-- end orc-c-nav__sublist__item --> <li class="orc-c-primary-nav__subitem"> <a href="/patterns/04-pages-34-identity-faq/04-pages-34-identity-faq.rendered.html" class="orc-c-primary-nav__sublink "> <span class="orc-c-primary-nav__sublink-text">FAQs</span> </a> </li> <!-- end orc-c-nav__sublist__item --> </ul> <!-- end orc-c-nav__sublist --> </div> <!--end orc-c-primary-nav__sublist-container--> </div> <!--end orc-c-primary-nav__list-container--> </div> <!--end orc-c-primary-nav__panel-inner--> </div> <!--end orc-c-primary-nav__panel--> </li> <!-- end orc-c-primary-nav__list__item --> </ul> <!-- end orc-c-primary-nav__list --> </nav> <!-- end orc-c-primary-nav --> <nav class="orc-c-utility-nav" role="navigation"> <ul class="orc-c-utility-nav__list"> <li class="orc-c-utility-nav__item "> <a href="/patterns/04-pages-offers/04-pages-offers.rendered.html" href="/patterns/04-pages-offers/04-pages-offers.rendered.html" class="orc-c-utility-nav__link"> <span class="orc-c-utility-nav__link-text">Offers</span> </a> <!--end orc-c-utility-nav__link--> </li> <!-- end orc-c-utility-nav__list__item --> <li class="orc-c-utility-nav__item "> <button href="/patterns/04-pages-02-login-logout/04-pages-02-login-logout.rendered.html" class="orc-c-utility-nav__link" data-analytics-button data-analytics-category='User' data-analytics-label='Log Out' data-post-button data-post-form-selector='[data-logout-form]'> <span class="orc-c-utility-nav__link-text">Sign Out</span> </button> <!--end orc-c-utility-nav__link--> </li> <!-- end orc-c-utility-nav__list__item --> </ul> <!-- end orc-c-utility-nav__list --> </nav> <!-- end orc-c-utility-nav --> </div> <!-- end orc-c-nav-container --> <button class="orc-c-btn orc-c-btn--small orc-c-btn--white orc-c-header__booking-btn orc-js-booking-btn" data-btn-icon-swap="../../orchid-icons.svg"> <div class="orc-c-btn__inner"> <span class="orc-c-btn__text orc-js-btn-text">Book your stay</span> <svg class="orc-c-btn__icon orc-js-btn-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-btn__icon orc-u-is-hidden orc-js-btn-swap-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../orchid-icons.svg#x"></use> </svg> </div><!--end orc-c-btn__inner--> </button> <!-- end orc-c-btn --> </div> <!--end orc-c-header__inner--> <form method="GET" action="#" class="orc-c-form orc-u-is-vishidden orc-js-form" data-logout-form> <input type="hidden" name="_method" value="GET"> <input type="hidden" name="_token" value=""> <div class="orc-c-form__body"> <div class="orc-c-form__list"> </div> <!--end orc-c-form__list--> </div> <!--end orc-c-form__body--> <div class="orc-c-form__footer"> </div> <!--end orc-c-form__footer--> </form> <!--end orc-c-form--> </header> <!--end orc-c-header-->
Usage
When to use
Always include some variation of the header at the top of a page. The logo and site navigation are equally and always critically important.
When to consider an alternative
If it’s not for the top of a page, the header isn’t it. The logo can exist on its own as a component, if that’s what you seek.
| Class Name | Description |
|---|---|
|
Apply to the header’s containing HTML element. This class adds the general styling for the section that contains the navigation and branding elements. |
|
Apply to the inner |
|
The branding image of the site. See the logo for more information about classes used in this component. |
|
Applied to all buttons in the header. See the button for more information about classes used in this component. |
|
Apply to |
|
Apply to |
|
The container for the navigation. Add |
|
Class applied to the vertically stacked navigation that is used within a vertical header. This is placed within the |
|
Class applied to the navigation that is used within a default header. This is placed within the |
|
Class applied to the navigation that is used as secondary options within the default header. This is placed within the |
|
Class applied to the form within the header used to logout when logged into an account. |