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

Introduction

The Anchor Illustrations help maintain visual consistency across our applications and platforms by providing a unified language for conveying information. They serve as visual cues that guide users through the interface, making interactions more intuitive and efficient.

The Illustrations within Anchor are created as vector graphics, allowing them to scale seamlessly across different screen sizes and resolutions. This scalability ensures that illustrations remain crisp and clear, whether viewed on a high-resolution monitor or a mobile device.

Installation

npm i @tryg/vue-ui-library

Usage

<template>
  <div style="width: 400px">
    <anchor-illustration name="female-with-shirt"></anchor-illustration>
  </div>
</template>

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-illustration name="female-with-shirt"></anchor-illustration>
</template>

<script setup>
import { AnchorIllustration } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-illustration name="female-with-shirt"></anchor-illustration>
</template>

Available Illustrations

The following illustrations are available in the Anchor design system. Pass the corresponding name to the name prop to use any of them.

<template>
  <anchor-illustration name="advisor"></anchor-illustration>
</template>

CSS variables

You can customize the appearance of illustrations using the following CSS custom properties:

<template>
  <anchor-illustration name="female-with-shirt" style="--illustration-primary-color: var(--b-color-success-default); --illustration-stroke-width: 2.5"></anchor-illustration>
</template>

Accessibility

Illustrations are often decorative elements that support the surrounding content. How you handle accessibility depends on their purpose:

• Decorative illustrations — When an illustration is purely decorative and adds no meaningful information, set aria-hidden="true" to hide it from assistive technologies:

  <template>
    <anchor-illustration name="office" aria-hidden="true"></anchor-illustration>
  </template>

• Informational illustrations — When an illustration conveys important meaning, provide an accessible label using aria-label or aria-labelledby to reference a nearby descriptive element:

  <template>
    <anchor-illustration name="signed-document" aria-label="Your document has been signed"></anchor-illustration>
  </template>

Always ensure that any information communicated visually through an illustration is also available through text or assistive technology.

API

anchor-illustration

Properties

CSS Custom Properties

Built with StencilJS