Pyro

Appearance

Card ​

RC 0.9Kb
js
import 'pyro/card'
Preview Code Stackblitz

This is content

Footer

Usage ​

html
<pyro-card header="This is title">
  <div slot="content">
    <p>This is content</p>
  </div>
  <footer slot="footer">Footer</footer>
</pyro-card>

Variations ​

Props ​

ts
interface CardProps {
  /** Header text of card, overriden by `slot="header"` */
  header?: string;
  /** Main content of the card, overriden by `slot="content"` */
  content?: string;
  /** Footer text of the card, overriden by `slot="footer"` */
  footer?: string;
  /** Add inner borders */
  bordered?: boolean;
  children?: any;
}

Slots ​

ts
/**
 * @slot image - Image on top, prefers `<img>` or `<picture>`
 * @slot header - Header content, prefers `<h*>` or `<header>`
 * @slot content - Main content of the card, any element
 * @slot footer - Header content, prefers `<footer>`
 */

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * @prop {--pyro-card-text-color = var(--pyro-text-color} - `color`
 * @prop {--pyro-card-surface-color = var(--pyro-surface-color} - `background`
 * @prop {--pyro-card-border = var(--pyro-border} - `border`
 * @prop {--pyro-card-border-radius = var(--pyro-border-radius} - `border-radius`
 * @prop {--pyro-card-spacing = var(--pyro-spacing} - `padding`
 */