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/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-link-item';
  defineCustomElement();
</script>
<anchor-navigation-card>
  <anchor-icon name="codepen" slot="asset"></anchor-icon>
  Multi line <br />
  Default
  <div slot="trailing-content">Trailing</div>
</anchor-navigation-card>

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

Icon slot

Here's an example of how to use the Menu-Item component with an icon on the left

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

Outlined

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

Disabled

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

Theme

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

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