Product Illustration4.0
Product illustrations display visual representations for products and services.
Installation
npm i @tryg/vue-ui-libraryUsage
Pass the name prop to specify which illustration to display. The component supports a wide range of product and service illustrations.
<template>
<anchor-product-illustration name="car"></anchor-product-illustration>
</template>Install the component library as a Vue plugin. This globally registers all Anchor components.
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-product-illustration name="car"></anchor-product-illustration>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorProductIllustration } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-product-illustration name="car"></anchor-product-illustration>
</template>Sizes
Pass the size prop with a value of small, medium, large, or xlarge to control the illustration size. The default size is medium.
<template>
<anchor-product-illustration name="house" size="small"></anchor-product-illustration>
<anchor-product-illustration name="house" size="medium"></anchor-product-illustration>
<anchor-product-illustration name="house" size="large"></anchor-product-illustration>
<anchor-product-illustration name="house" size="xlarge"></anchor-product-illustration>
</template>Available Illustrations
The component supports numerous illustration types including but not limited to: accident, car, carCommercial, house, building, health, healthCommercial, travel, mortgage, boat, motorbike, dog, cat, person, family, tooth, cyber, and many more commercial and private insurance product illustrations.
CSS Custom Properties
| Name | Description |
|---|---|
--product-illustration-color | Set the color of the product illustration. |
--product-illustration-size | Set the size of the product illustration. |
--product-illustration-stroke-width | Set the stroke width of the product illustration. |
Accessibility
- Product illustrations are often decorative elements that support surrounding content about products or services.
- Decorative illustrations — when the illustration is purely decorative, set
aria-hidden="true"to hide it from assistive technologies. - Informational illustrations — when the illustration conveys meaning (such as representing a specific product type), provide context using
aria-labeloraria-labelledbyto reference a nearby descriptive element. - Always ensure that information communicated visually through a product illustration is also available through text or assistive technology.
API
anchor-product-illustration
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
name | name | This the type of illustration that you want to use | "accident" | "accountantLiabilityCommercial" | "advisorLiabilityCommercial" | "agricultureCommercial" | "agricultureHealthLifeAndPensionCommercial" | "allRiskBuilding" | "attourneyLiabilityCommercial" | "autocamper" | "boardOfDirectorsLiabilityCommercial" | "boat" | "building" | "buildingCommercial" | "bus" | "busCommercial" | "businessTravelCommercial" | "car" | "carCommercial" | "caravan" | "cat" | "catchAll" | "collectiveAccidentCommercial" | "commercial" | "commercialGuide" | "content" | "contentAndProductLiabilityCommercial" | "contentCommercial" | "contractorsAllRiskCommercial" | "creditCommercial" | "crimeCommercial" | "cyber" | "cyberCommercial" | "digitalSecurity" | "disusedAgricultureCommercial" | "disusedAgricultureHealthLifeAndPensionCommercial" | "dog" | "environmentCommercial" | "europeCommercial" | "fleetCommercial" | "guaranteeCommercial" | "health" | "healthCommercial" | "healthWork" | "holidayHouse" | "horse" | "house" | "iTLiabilityCommercial" | "kid" | "lorry" | "machineAndITLiabilityCommercial" | "materialCommercial" | "moped" | "mortgage" | "motorbike" | "onlineBankCommercial" | "ownerWorkmensCompensationCommercial" | "patientCommercial" | "person" | "pregnancy" | "projectLiabilityCommercial" | "salary" | "semiTrailer" | "sicknessOperationLossCommercial" | "tooth" | "toothCommercial" | "trailer" | "trailerCommercial" | "transportCommercial" | "travel" | "truck" | "truckCommercial" | "van" | "vanCommercial" | "vendorAndWorkshopCommercial" | "workersCompensation" | "workingMachineAndTractorCommercial" | "workmensCompensationCommercial" | "youngLiving" | undefined |
size | size | Set the size that you want the illustration to be | "large" | "medium" | "small" | "xlarge" | 'medium' |
uuid | uuid | Give this instance of product-illustration custom ID. | string | undefined |
CSS Custom Properties
| Name | Description |
|---|---|
--color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--product-illustration-color | Set the color of the product illustration. |
--product-illustration-size | Set the size of the product illustration. |
--product-illustration-stroke-width | Set the stroke width of the product illustration. |
--size | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--stroke-width | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
Built with StencilJS
Illustration
The Anchor Illustrations help maintain visual consistency across our applications and platforms by providing a unified language for conveying information.
Icon
The Anchor Icons help maintain visual consistency across our applications and platforms by providing a unified language for conveying information.