1 files changed, 47 insertions, 0 deletions

diff --git a/src/ui/objects/Card.tsx b/src/ui/objects/Card.tsx
new file mode 100644
index 0000000..fd565e1
--- /dev/null
+++ b/src/ui/objects/Card.tsx
@@ -0,0 +1,47 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "list"?: boolean;
+        "quiet"?: boolean;
+        "thumbnail"?: boolean;
+        "border"?: boolean;
+        "no-shadow"?: boolean;
+        "horizontal"?: boolean;
+        "interactive"?: boolean;
+        "highlight"?: boolean;
+        "children"?: JSX.Element;
+}>;
+
+export const Card = <T extends HTMLTag = "article">({
+        as: Tag = "article" as T,
+        list,
+        quiet,
+        thumbnail,
+        border,
+        "no-shadow": noShadow,
+        horizontal,
+        interactive,
+        highlight,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "o-card",
+                        {
+                                "l-card-list__card": list,
+                                "o-card--borderless": !border,
+                                "o-card--horizontal": horizontal,
+                                "o-card--interactive": interactive,
+                                "o-card--highlight": highlight,
+                                "o-card--quiet": quiet,
+                                "o-card--collapsible": Tag === "details",
+                                "o-card--shadow": !noShadow,
+                                "o-card--thumbnail": thumbnail,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);