Navigation Card | Tryg Anchor

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

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-navigation-card>
    <anchor-icon name="codepen" slot="asset"></anchor-icon>
    Multi line <br />
    Default
    <div slot="trailing-content">Trailing</div>
  </anchor-navigation-card>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorNavigationCard, AnchorIcon } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-navigation-card>
    <anchor-icon name="codepen" slot="asset"></anchor-icon>
    Multi line <br />
    Default
    <div slot="trailing-content">Trailing</div>
  </anchor-navigation-card>
</template>

Icon Slot

Here's an example of how to use the Navigation Card component with an icon on the left.

<template>
  <anchor-navigation-card href="#/your-url">
    <anchor-icon name="codepen" slot="asset"></anchor-icon>
    Default
  </anchor-navigation-card>
</template>

Outlined

<template>
  <anchor-navigation-card outline>
    <anchor-icon name="codepen" slot="asset"></anchor-icon>
    Outlined
  </anchor-navigation-card>
</template>

Disabled

<template>
  <anchor-navigation-card disabled>
    <anchor-icon name="codepen" slot="asset"></anchor-icon>
    Disabled
  </anchor-navigation-card>
</template>

Theme

<template>
  <anchor-navigation-card theme="on-white">
    <anchor-icon name="codepen" slot="asset"></anchor-icon>
    Themed on white
  </anchor-navigation-card>
</template>

Accessibility

Renders as a native <button> when no href is provided, or as an <a> element when href is set.
Full keyboard support: Tab to focus, Enter and Space to activate.
Disabled state removes keyboard interaction and prevents pointer events.
When the card contains only an icon or non-descriptive content, provide an aria-label for screen reader users.

API

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	Set whether or not the navigation card should be disabled	`boolean`	`false`
`download`	`download`	This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). Documentation	`string`	`undefined`
`hideAction`	`hide-action`	Set whether or not the action button should be hidden	`boolean`	`false`
`href`	`href`	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. Documentation	`string`	`undefined`
`outline`	`outline`	Set whether or not the navigation card should be outlined	`boolean`	`false`
`ping`	`ping`	The ping property is a space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Documentation	`string`	`undefined`
`rel`	`rel`	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.	`"alternate" \| "author" \| "bookmark" \| "external" \| "help" \| "license" \| "me" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "opener" \| "prev" \| "privacy-policy" \| "search" \| "tag" \| "terms-of-service"`	`undefined`
`target`	`target`	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. Documentation	`"_blank" \| "_parent" \| "_self" \| "_top"`	`undefined`
`theme`	`theme`	The theme of the navigation card. Can be "default" or "on".	`"default" \| "on-white"`	`'default'`
`type`	`type`	Set the type of button type of navigation card	`"button" \| "reset" \| "submit"`	`'button'`

Slots

Slot	Description
	Content to show
`"action-icon"`	Slot to change the displayed action icon
`"asset"`	Which asset (illustration or icon) to show
`"trailing-content"`	Which content to show in the trailing section of the card

Dependencies

Depends on

Graph

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

Built with StencilJS

Navigation Card4.0