@claromentis/design-system
Version:
Claromentis Design System Component Library
85 lines (84 loc) • 2.67 kB
JavaScript
import { h } from '@stencil/core';
/**
* @slot cardtop - Allows for content at the top of the card including figures, images and headers.
* @slot menu - Allows a menu to be added.
* @slot none - This is the main content of the card
* @slot footer - Allows a footer to be added to the card.
*/
export class Card {
constructor() {
this.href = undefined;
this.styleclass = undefined;
this.statusborder = undefined;
}
render() {
return (h("div", { class: this.styleclass ? `${this.styleclass} card` : "card" }, this.statusborder ? h("span", { class: "card-status-border", style: { backgroundColor: `${this.statusborder}` } }) : "", this.href ? h("a", { href: this.href }, h("slot", { name: "card-top" })) : h("slot", { name: "card-top" }), h("div", { class: "card-body" }, h("div", { class: "card-menu-wrapper" }, h("slot", { name: "menu" })), h("a", { class: "card-link", href: this.href }, h("slot", null))), h("slot", { name: "footer" })));
}
static get is() { return "cla-card"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["cla-card.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-card.css"]
};
}
static get properties() {
return {
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Card link - attached to card title and media slot"
},
"attribute": "href",
"reflect": false
},
"styleclass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Style Class - adds class to the card for styling and rounded corners"
},
"attribute": "styleclass",
"reflect": false
},
"statusborder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Status border - if the card has a status border you can set the colour here e.g. \"#000\";"
},
"attribute": "statusborder",
"reflect": false
}
};
}
}