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

<template>
  <anchor-card>
    <h2 slot="header">Card Title</h2>
    <span slot="text">This is the card content.</span>
  </anchor-card>
</template>

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

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');

YourComponent.vue

<template>
  <anchor-card>
    <h2 slot="header">Card Title</h2>
    <span slot="text">This is the card content.</span>
  </anchor-card>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorCard } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-card>
    <h2 slot="header">Card Title</h2>
    <span slot="text">This is the card content.</span>
  </anchor-card>
</template>

Clickable Card

To make the card clickable, specify the url prop with the target URL:

<template>
  <anchor-card url="https://example.com">
    <h2 slot="header">Clickable Card</h2>
    <span slot="text">Click me to go to example.com</span>
  </anchor-card>
</template>

Customization

The Card component provides several props to customize its appearance and behavior:

align (optional, default: 'center'): Sets the text alignment of the card. Can be 'center' or 'left'.
showBorder (optional, default: true): Determines whether to show a border around the card.
showIcon (optional, default: false): Determines whether to show an icon in the card.

<template>
  <anchor-card :show-border="false">
    <span slot="text">card content.</span>
  </anchor-card>
  <anchor-card :show-icon="true">
    <span slot="header">This is the card content.</span>
  </anchor-card>
</template>

Slot Usage

The Card component supports several slots to insert different types of content:

header: The header content of the card.
text: The main text content of the card.
illustration: An optional illustration to display in the card (should not be used with the image slot).
image: An optional image to display in the card (should not be used with the illustration slot).

<template>
  <anchor-card>
    <h2 slot="header">Card Title</h2>
    <img slot="image" src="path/to/image.jpg" alt="Card Image" />
    <span slot="text">This is the card content.</span>
  </anchor-card>
</template>

Events

The Card component emits the following event:

clickEvent: Fired when the card is clicked. Use it to perform any necessary actions or navigation.

<script setup>
const handleCardClick = () => console.log('You clicked me!');
</script>
<template>
  <anchor-card vertical-align="center" @click-event="handleCardClick">
    <span slot="text">This is the card content.</span>
  </anchor-card>
</template>

Styling

The following CSS variables are exposed at the

level so you can overwrite them with your own values:

--width: unset;
--min-width: 128px;
--image-margin: calc(var(--padding) * -1);
--background-color: var(--color-background-default);

// Text
--text-color: var(--color-text-default);

// Border
--border-color: var(--color-border-default);
--border-width: 1px;
--border-radius: 4px;

// Focus
--focus-color: var(--color-border-outline);
--focus-offset: 2px;

// Padding
--padding: 24px;

// Icon
--icon-color: var(--color-icon-variant);

// Shadow
--shadow: none;

Accessibility

When a url prop is provided, the card renders as a native <a> element, inheriting standard anchor accessibility semantics. Without a url, it renders as a <div>.
Set the type prop to 'button' to render the card as a <button> element when the card triggers an action rather than navigation.
Keyboard support: Enter activates the card when it has focus. The card has a tabindex="0" to be reachable via keyboard navigation.
Uses aria-disabled when the card is in a disabled state to communicate inaccessibility to screen readers.

API

anchor-card-clickable

Properties

Property	Attribute	Description	Type	Default
`align`	`align`	Text alignment of the card. Can be either 'center' or 'left'.	`"center" \| "left"`	`'center'`
`iconSize`	`icon-size`	To determine the icon size, defaults to medium.	`"large" \| "medium" \| "small" \| "xlarge" \| "xsmall"`	`"medium"`
`showBorder`	`show-border`	Whether to show a border around the card.	`boolean`	`true`
`showIcon`	`show-icon`	Whether to show an icon in the card.	`boolean`	`false`
`target`	`target`	The target for the link.	`"_blank" \| "_parent" \| "_self" \| "_top"`	`'_self'`
`type`	`type`	Overrides the default element type of the card. By default, the card is rendered as an tag if a url prop is provided, or a tag otherwise. Set this prop to 'button' to render the card as a	`"button"`	`undefined`
`url`	`url`	Where should the user go, when clicking on the card.	`any`	`undefined`
`variant`	`variant`	The variant of the card. The variants "navigation" and "navigation-bold" are in WIP.	`"default" \| "navigation" \| "navigation-bold"`	`"default"`
`verticalAlign`	`vertical-align`	Content alignment of the card. Can be either 'top', 'center' or 'bottom'.	`"bottom" \| "center" \| "top"`	`'top'`

Events

Event	Description	Type
`clickEvent`	Event emitted when the card is clicked.	`CustomEvent<any>`

Shadow Parts

Part	Description
`"icon"`

CSS Custom Properties

Name	Description
`--background-color`	The background color of the card. Defaults to the value of '--s-color-background-default-default'.
`--border-color`	The color of the card's border. Defaults to the value of '--s-color-border-default'.
`--border-radius`	The border radius of the card. Defaults to var(--s-size-radius-medium).
`--border-width`	The width of the card's border. Defaults to var(--p-size-static-0125).
`--focus-color`	The color of the card's border when it is in focus. Defaults to the value of '--color-border-outline'.
`--focus-offset`	The offset applied to the card's focus border. Defaults to var(--p-size-static-025).
`--icon-color`	The color of the icon within the card. Defaults to the value of '--color-icon-variant'.
`--image-margin`	The negative margin applied to the image slot. It is calculated as the negative value of the '--padding' variable.
`--min-width`	The minimum width of the card. Defaults to 128px.
`--padding`	The padding applied to the card's content area. Defaults to var(--p-size-static-300).
`--shadow`	The shadow effect applied to the card. Defaults to 'none'.
`--text-color`	The color of the text content within the card. Defaults to the value of '--s-color-text-default'.
`--width`	The width of the card. Defaults to 'unset'.

Dependencies

Depends on

anchor-icon

Graph

graph TD;
  anchor-card --> anchor-icon
  style anchor-card fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Card2.0

Installation

Usage

Clickable Card

Customization

Slot Usage

Events

Styling

Accessibility

API

anchor-card-clickable

Properties

Events

Shadow Parts

CSS Custom Properties

Dependencies

Depends on

Graph

On this page