radh-ui
Version:
Stencil Component Starter
16 lines (12 loc) • 1.36 kB
JavaScript
import { r as registerInstance, h } from './index-a9700b09.js';
const radhCardCss = ".card{position:relative;padding:calc(var(--size, 8px) * 8) 0;background-color:var(--radh-white, #fff);-webkit-box-shadow:var(--radh-modal-shadow, 0 0 2rem rgba(0, 0, 0, 0.1));box-shadow:var(--radh-modal-shadow, 0 0 2rem rgba(0, 0, 0, 0.1))}.content{padding:0 calc(var(--size, 8px) * 3)}.card .title{font-size:calc(var(--font-size, 14px) * 2.3);font-weight:bold;margin:0}.card .description{font-size:calc(var(--font-size, 14px) * 1.3);margin-top:calc(var(--size, 8px) * 2);margin-bottom:calc(var(--size, 8px) * 8);line-height:1.67}.card .footer{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.card .separator{position:absolute;bottom:0;left:0;width:100%}";
class RadhCard {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h("article", { class: "card" }, h("h2", { class: "title content" }, h("slot", { name: "title" })), h("div", { class: "image" }, h("slot", { name: "image" })), h("p", { class: "description content" }, h("slot", { name: "description" })), h("footer", { class: "footer content" }, h("slot", { name: "footer" })), h("radh-separator", { class: "separator", color: "var(--radh-nude, red)" })));
}
}
RadhCard.style = radhCardCss;
export { RadhCard as radh_card };