feat: ✨ add trait-card component

src/components/trait-card.webc

@@ -0,0 +1,101 @@
+<div webc:root="override">
+  <div class="icon-box">
+    <icon :icon="icon"></icon>
+  </div>
+  <div class="content">
+    <h3 class="title">
+      <slot name="title"></slot>
+    </h3>
+    <p>
+      <slot></slot>
+    </p>
+  </div>
+</div>
+
+<style webc:scoped="trait-card">
+  :host {
+    --card-margin-inline: 0.5em;
+    position: relative;
+    font-size: 0.875em;
+
+    margin-block: 2em 0.5em;
+    margin-inline: var(--card-margin-inline);
+    border-radius: 1em;
+
+    @media (min-width: 35em) {
+      --card-margin-inline: 4em;
+    }
+  }
+
+  :host .icon-box {
+    position: absolute;
+    top: -1.25em;
+    left: 1.5em;
+
+    width: 3em;
+    height: 3em;
+    background: linear-gradient(
+      to bottom right,
+      var(--clr-box-gradient-start) 0%,
+      var(--clr-box-gradient-end) 50%
+    );
+    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+    border-radius: 0.5em;
+    overflow: hidden;
+    z-index: 2;
+  }
+
+  :host .icon-box > * {
+    margin: var(--border-thin);
+    background-color: var(--clr-box-background);
+    border-radius: inherit;
+  }
+
+  :host svg {
+    padding: 0.625em;
+  }
+
+  :host .content {
+    --gradient-dir: to bottom right;
+    --gradient-start: var(--clr-box-gradient-start);
+    --gradient-end: var(--clr-box-gradient-end);
+
+    position: relative;
+
+    background: linear-gradient(
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
+    );
+
+    border-radius: inherit;
+    padding: 1.5em;
+
+    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+
+    z-index: 0;
+  }
+
+  :host .content::before {
+    --gradient-start: var(--clr-quick-info-gradient-start);
+    --gradient-end: var(--clr-quick-info-gradient-end);
+
+    content: '';
+    position: absolute;
+    inset: var(--border-thin);
+
+    background: linear-gradient(
+      var(--gradient-dir),
+      var(--gradient-start) 0%,
+      var(--gradient-end) 50%
+    );
+
+    border-radius: inherit;
+    z-index: -1;
+  }
+
+  :host .title {
+    font-size: 1.75em;
+    margin-block-start: 0.5em;
+  }
+</style>