Pattern Library Setup

Note: We want to keep track of who is using the Pattern Library. If you're interested in using it, please email ux@loyalty.com so we can help you get set up.


There are two ways to use the pattern library in your project. You can import the CSS directly on your page from our CDN, or you can import the library using NPM and Sass. The quickest way is to use the CDN, but if you'd like to use all the functionality and extend the pattern library, it's best to import the library into your project using NPM.

Using CSS from CDN

The quickest way to get started is to add our hosted CSS file to your HTML page like this:

<link rel="stylesheet" type="text/css" href="https://pattern-library.airmiles.ca/latest/css/style.min.css">

The above link will import the latest version (currently v.1.3.0) of the pattern library onto your page.

NOTE: To make sure your styles do not break when the library is updated, you should specify the version that you are using in the URL. Read the changelog to see the most recent release or see all versions of pattern library.

<link rel="stylesheet" type="text/css" href="https://pattern-library.airmiles.ca/1.3.0/css/style.min.css">

Importing the library

Follow the commands below to add the pattern library Sass files into your project.

NOTE: You will need to be added to pattern-library github repo for access to the repository (e-mail ux@loyalty.com).

Pull the pattern library into your node modules
npm install --save-dev LoyaltyOne/pattern-library
Import the Sass files into your project

You must use Sass to import the library into your styles. In your main Sass file, import the style.scss file from the pattern library like this:

@import 'node_modules/pattern-library/src/sass/style';