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/.

<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. You can explore all of the available attributes on the live demo page or read about them in the Attributes section.

Contact Us

For questions/comments, find us on Slack #polaris.