Update docs examples + Add Select component + Add Card, Base, Title classes

src/lib/styles/classes/card.postcss

@@ -0,0 +1,97 @@
+.card {
+    --padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    background-color: var(--color-raised-bg);
+    border-radius: var(--rounded);
+    overflow: hidden;
+    box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+    padding: var(--padding);
+    grid-gap: 1rem;
+    max-width: 100%;
+
+    .profile-picture {
+        z-index: 1;
+    }
+
+    &--gap {
+        &-compressed {
+            grid-gap: 0.6rem;
+        }
+
+        &-none {
+            grid-gap: 0;
+        }
+    }
+
+    &--pad {
+        &-top {
+            padding-top: 2.5rem;
+        }
+    }
+
+    &--overflow-visible {
+        overflow: visible;
+    }
+
+    &__banner {
+        --inverse-padding: calc(var(--padding) * -1);
+        margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
+        z-index: 0;
+        background-color: var(--color-divider);
+
+        &:-moz-loading {
+            visibility: hidden;
+        }
+
+        &--short {
+            height: 6.5rem;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        &--dark {
+            filter: brightness(0.7);
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        grid-gap: 0.5rem;
+
+        z-index: 1;
+
+        &--row {
+            flex-direction: row;
+        }
+    }
+
+    &--row {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--strip {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &--pad-x {
+        --padding: 1rem 1.3rem;
+    }
+
+    &.text {
+        --padding: 1.5rem;
+    }
+}