<p align="center">
<img src="//cdn.zuora.com/theme/0.6.0/assets/anjuna/anjuna-logo.svg"/>
<br/><br/>
</p>

# @anjuna/core
Authored with Stencil.js, @anjuna/core is exported as native standard custom elements and can be used in any UI application. These
[components](https://stenciljs.com/docs/what-is-design-system/#components) make up the atomic and molecular layer of the Zuora
Design System.

## Getting Started
To get started with Anjuna, there are a few things to get set up.

### Include the Theme
While using Bootstrap under the hood, Anjuna has no runtime dependency on global style outside the theme. Anjuna uses a runtime palette set by the consuming
application, so it will always be consistent with application. The theme can be included by either adding it to the application HTML or CSS.

```html
<!-- HTML -->
<link href="//cdn.zuora.com/@anjuna/theme@0.0.0/dist/css/theme.css" rel="stylesheet">
```

```css
/* CSS */
@import '~@anjuna/theme/dist/css/theme.css';
```

**Note**: the polyfill for CSS variables does not work with dynamically loaded imports. For CSS variables to work in IE, the theme needs to be
part of your application's compiled style.

### Include the Web Components
For vanilla apps, the best way to use the components is to include them via CDN in the header of your index.html file.

**Note**: The web components import should be the LAST script tag in your index.html file

```html
<!-- Load the components -->
<script src="//cdn.zuora.com/@anjuna/core@0.0.0/dist/anjuna-core.js"></script>
```
