Add new Card component

Author: hojberg

src/UI/Card.elm

@@ -0,0 +1,44 @@
+module UI.Card exposing (..)
+
+import Html exposing (Html, div, text)
+import Html.Attributes exposing (class)
+
+
+type alias Card msg =
+    { title : Maybe String, items : List (Html msg) }
+
+
+card : List (Html msg) -> Card msg
+card items =
+    { title = Nothing, items = items }
+
+
+titled : String -> List (Html msg) -> Card msg
+titled title items =
+    { title = Just title, items = items }
+
+
+withTitle : String -> Card msg -> Card msg
+withTitle title card_ =
+    { card_ | title = Just title }
+
+
+withItems : List (Html msg) -> Card msg -> Card msg
+withItems items card_ =
+    { card_ | items = items }
+
+
+withItem : Html msg -> Card msg -> Card msg
+withItem item card_ =
+    { card_ | items = card_.items ++ [ item ] }
+
+
+view : Card msg -> Html msg
+view card_ =
+    let
+        items =
+            case card_.title of
+                Just t ->
+                    h3 [ class "card-title" ] [ text t ] :: card_.items
+    in
+    div [ class "card" ] items

src/css/card.css

@@ -0,0 +1,15 @@
+.card {
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: var(--color-card-fg);
+  border-radius: var(--border-radius-base);
+  background: var(--color-card-bg);
+}
+
+.card .card-title {
+  color: var(--color-card-title);
+  text-transform: uppercase;
+  font-size: var(--font-size-medium);
+}

src/css/themes/unison/light.css

@@ -208,7 +208,12 @@
   --color-button-danger-hover-fg: var(--color-gray-lighten-100);
   --color-button-danger-hover-bg: var(--color-pink-2);
 
-  /* Badges */
+  /* Card */
+  --color-card-bg: var(--color-gray-lighten-100);
+  --color-card-fg: var(--color-gray-darken-30);
+  --color-card-title: var(--color-gray-lighten-30);
+
+  /* Badge */
   --color-badge-fg: var(--color-gray-base);
   --color-badge-bg: var(--color-gray-lighten-60);
   --color-badge-border: var(--color-gray-lighten-50);
@@ -220,7 +225,7 @@
   --color-option-badge-bg: var(--color-gray-darken-30);
   --color-option-badge-border: var(--color-transparent);
 
-  /* Tooltips */
+  /* Tooltip */
   --color-tooltip-fg: var(--color-gray-lighten-60);
   --color-tooltip-subtle-fg: var(--color-gray-lighten-20);
   --color-tooltip-bg: var(--color-gray-darken-30);