Advanced Design System

The design system used for Advanced products and services.

This project was generated with Angular CLI.

We recommend you create your own Angular project and use our foundations and elements as part of that. You can use the theme without Angular, if you wish, but you will require Sass.

Foundations

Our design system theme requires you to install the fonts and icons it uses separately.

For quick installation, simply place this in the head of your index.html file:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<script src="https://kit.fontawesome.com/44397de72c.js" crossorigin="anonymous"></script>

You'll find all the Sass files you need in the assets folder to use our theme.

You can use the entire theme directly in your own Sass files:

@use '~@advancedco/design-system/src/assets/styles/advanced';

or reference parts of it:

@use '~@advancedco/design-system/src/assets/styles/colours';

.header {
  background-color: colours.$advanced-red;
}

Elements and components

Here's a list of all our available elements.

You can use our available components directly from the library:

import { BackLinkComponent } from '@advancedco/design-system';

You can use our native HTML element styles directly from the theme:

@use '~@advancedco/design-system/src/assets/styles/elements/all-elements';