A shared UI Library from WineDirect.

Usage no npm install needed!

<script type="module">
  import wdiAssets from 'https://cdn.skypack.dev/wdi-assets';


WDI Assets

A shared library of WineDirect assets for Front-End Development



  1. Install any prerequisites listed in the section above
  2. Run npm install wdi-assets --save to add the wdi-assets npm package to your project.
  3. This library depends on having at least these partial Bootstrap files referenced in your project.
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/utilities';
  1. After the required Bootstrap has been added, you can now import the WineDirect branded scss files by adding main.scss to your project.
@import 'wdi-assets/scss/main.scss'; 

What's Included?

  1. WineDirect Branded Sass (Colors, Fonts, Grid Styles, etc...)
p { 
  color: $blueberry;

h1, h2 {
  font-family: $font-family-heading;
  color: $headings-color;
  1. WineDirect Brand Fonts
  • LFT Etica Sheriff
  • Europa (needs to be referenced through TypeKit)
  1. WineDirect Brand Images/Graphics