We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

Provide the Theme Provider with the brand and branch you want to use. The component will load the correct styles for the brand and branch you provide.

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

<template>
  <anchor-theme-provider branch="dk" brand="trygdk">Your content here</anchor-theme-provider>
</template>

<script setup>
import { AnchorThemeProvider } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-theme-provider branch="dk" brand="trygdk">Your content here</anchor-theme-provider>
</template>

You are responsible for pairing the correct brand and branch. If you provide an incorrect brand or branch, the component will not load the correct styles.

To use the base theme for each branch, provide the branch name and set the brand to "base".

Fonts

The Theme Provider will only load the CSS for basic values for the brand and branch you provide. You will have to make sure that your page has the correct fonts loaded.

Accessibility

• The Theme Provider is a non-visual component and has no direct impact on accessibility.
• It applies CSS custom properties and style sheets to child elements, which does not affect the DOM structure or accessibility tree.
• Ensure that font loading is handled separately, as the Theme Provider does not load fonts. Improper font loading can cause content reflow, which may trigger screen reader re-announcements.
• Theme transitions should be subtle and respect user preferences for reduced motion to avoid discomfort.
• The component wraps its children in a host element that should not contain interactive elements directly to maintain proper semantic structure.

API

anchor-theme-provider

Properties

Built with StencilJS