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/ui-library

Usage

Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.

Webcomponent

<script type="module">
  import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-illustration';
  defineCustomElement();
</script>
<anchor-illustration name="female-with-shirt"></anchor-illustration>

Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..

Webcomponent

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-illustration name="female-with-shirt"></anchor-illustration>

API

anchor-illustration

Properties

Property	Attribute	Description	Type	Default
`name`	`name`	This the type of illustration that you want to use	`"female-close-up" \| "female-with-bun" \| "female-with-shirt" \| "living-room" \| "male-close-up" \| "male-with-beard" \| "male-with-shirt" \| "signed-document"`	`undefined`

CSS Custom Properties

Name	Description
`--illustration-base-color`	Set the color of the illustration.
`--illustration-primary-color`	Set the color of the illustration. @default var(--b-color-primary-default)
`--illustration-stroke-width`	Set the stroke width of the illustration. @default 1.5

Built with StencilJS

Illustration3.0