Card2.0
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
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.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-card';
defineCustomElement();
</script>
<anchor-card>
<h2 slot="header">Card Title</h2>
<span slot="text">This is the card content.</span>
</anchor-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..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-card>
<h2 slot="header">Card Title</h2>
<span slot="text">This is the card content.</span>
</anchor-card>Clickable Card
To make the card clickable, specify the url prop with the target URL:
<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>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.
<anchor-card show-border="false">
<span slot="text">card content.</span>
</anchor-card>
<anchor-card show-icon>
<span slot="header">This is the card content.</span>
</anchor-card>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).
<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>Events
The Card component emits the following event:
- cardClick: Fired when the card is clicked. Use it to perform any necessary actions or navigation.
<script type="text/javascript">
window.addEventListener("load", (event) => {
document.querySelector('anchor-card').addEventListener('clickEvent', function(data) {
console.log('You clicked me!')
})
});
</script>
<anchor-card vertical-align="center">
<span slot="text">This is the card content.</span>
</anchor-card>Styling
The following CSS variables are exposed at the :host 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;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 instead. | "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
Graph
Built with StencilJS