Polaris

The global header and footer navigation for all things Xfinity.

Installation

Polaris is a small collection of Custom Elements that can be easily included and used in an html file. Add the following in the <head> of your document to load Polaris. For staging environments, use https://polaris.staging.xfinity.com/.

1
2
3
4
5
6
 
<script>
  document.write('\x3Cscript src="https://polaris.xfinity.com/polaris.' + (window.customElements ? 'wc' : 'es5') + '.js" async>\x3C/script>');
</script>
<style>
  xc-header { display: block; min-height: 44px; background: #000; }
</style>

NOTE: We use client side detection to determine if your browser supports custom elements to return a polyfill for older browsers or not. Also, polaris is loaded async, so you don’t have to worry about it blocking rendering on your site. The style tag adds a default size to header to avoid FOUC.

Quick Start

If you followed the Installation guide above, you now have access to two new tags, <xc-header> and <xc-footer>. They can be added to the top and bottom of the <body> tag, respectively.

1
2
3
 
<xc-header client-id="YOUR-CLIENT-ID"></xc-header>
<!-- Your site code goes here... -->
<xc-footer client-id="YOUR CLIENT-ID"></xc-footer>

The client-id attribute is used by Polaris to identify your application. There is no registration required, simply choose a value and add to xc-header and xc-footer (must be consistent).

Polaris has extensive configuration capabilities. Please reach out to the Polaris team for additional information.