@manufosela/element-card

<div class="container">
    

    <element-card id="first">
      <div>Default element-card with slotted content</div>
      <div>Another item on the grid</div>
      <div>The last child spans the full row</div>
    </element-card>

    <element-card
      id="second"
      title="Javascript"
      description="ES6+, functional programming, web components"
      cover-bgcolor="rgba(255, 255, 0, 0.3)"
      text-color="#111"
    >
      <div>Years experience: &gt; 10</div>
      <div>Level: Senior</div>
      <div>Focus: modern web, Lit 3, design systems</div>
    </element-card>
  </div>

:root {
  --bg: #0c0f14;
  --bg-elevated: #141923;
  --bg-panel: #171d28;
  --border: #262f3f;
  --text: #f4f6fb;
  --text-muted: #a7b0c2;
  --text-dim: #7d879b;
  --accent: #ff8a3d;
  --accent-strong: #ff6a00;
  --accent-soft: rgba(255, 138, 61, 0.16);
  --shadow: 0 20px 50px rgba(5, 8, 14, 0.45);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1160px;
}

.container { max-width: 1280px; margin: 0 auto; }
    header { margin-bottom: 3rem; }
    h1 {
      font-family: "Manrope", system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .subtitle { color: #b9cbc2; margin: 0.5rem 0 0.75rem; }
    .back-link { font-size: 0.85rem; color: #b9cbc2; text-decoration: none; }
    .back-link:hover { color: #00e0b3; }
    #first {
      --font-size: 12px;
      --fsize-element-title: 2rem;
      --fsize-element-desc: 1.5rem;
    }
    #second {
      --fsize-element-title: 3rem;
      --fsize-element-desc: 1.75rem;
    }