Card
A white panel with a soft shadow for grouping content. Children are rendered through the default slot.
Examples
A card with two lines of text.
Usage
<zakuni-card>Any content goes here</zakuni-card>Wrap it in your own layout element to control width and spacing. The card has no CSS variables; its background and shadow are fixed.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('zakuni-card')
export class ZakuniCard extends LitElement {
static styles = css`
div {
display: inline-block;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: black;
padding: 1em 2em;
}
`;
render() {
return html`
<div><slot /></div>
`;
}
}