floscr/clj-ui-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(card): add card-list component with full and inset dividers

Browse Source 
Adds `card-list` and `card-list-item` to the card module for rendering
a list of items inside a single card background with border separators.

The `:divider` prop controls separator style:
- `:full` (default) — borders go edge-to-edge
- `:inset` — borders are inset from edges by `--size-4`h
This commit is contained in:
Florian Schroedl
2026-03-11 18:29:39 +01:00
parent e356bc2e6a
commit 64bf5e029c
6 changed files with 180 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dev/hiccup/src/dev/hiccup.clj
View File

@@ -124,7 +124,21 @@
(card/card-body {} [:p "This is the card content. It can contain any HTML."])
(card/card-footer {}
(button/button {:variant :secondary :size :sm} "Cancel")
(button/button {:variant :primary :size :sm} "Save")))))
(button/button {:variant :primary :size :sm} "Save")))
[:h5 "Card List (full dividers)"]
(card/card-list {}
(card/card-list-item {} "Notifications")
(card/card-list-item {} "Privacy")
(card/card-list-item {} "Appearance")
(card/card-list-item {} "Accessibility"))
[:h5 "Card List (inset dividers)"]
(card/card-list {:divider :inset}
(card/card-list-item {} "Notifications")
(card/card-list-item {} "Privacy")
(card/card-list-item {} "Appearance")
(card/card-list-item {} "Accessibility"))))
(defn accordion-demo []
(section "Accordion"

16
dev/replicant/src/dev/replicant.cljs
View File

@@ -86,7 +86,21 @@
(card/card-body {} [:p "This is the card content. It can contain any HTML."])
(card/card-footer {}
(button/button {:variant :secondary :size :sm} "Cancel")
(button/button {:variant :primary :size :sm} "Save")))))
(button/button {:variant :primary :size :sm} "Save")))
[:h5 "Card List (full dividers)"]
(card/card-list {}
(card/card-list-item {} "Notifications")
(card/card-list-item {} "Privacy")
(card/card-list-item {} "Appearance")
(card/card-list-item {} "Accessibility"))
[:h5 "Card List (inset dividers)"]
(card/card-list {:divider :inset}
(card/card-list-item {} "Notifications")
(card/card-list-item {} "Privacy")
(card/card-list-item {} "Appearance")
(card/card-list-item {} "Accessibility"))))
(defn accordion-demo []
(section "Accordion"

16
dev/squint/src/dev/squint.cljs
View File

@@ -104,7 +104,21 @@
(card/card-body {} [:p "This is the card content. It can contain any HTML."])
(card/card-footer {}
(button/button {:variant "secondary" :size "sm"} "Cancel")
(button/button {:variant "primary" :size "sm"} "Save")))))
(button/button {:variant "primary" :size "sm"} "Save")))
[:h5 "Card List (full dividers)"]
(card/card-list {}
(card/card-list-item {} "Notifications")
(card/card-list-item {} "Privacy")
(card/card-list-item {} "Appearance")
(card/card-list-item {} "Accessibility"))
[:h5 "Card List (inset dividers)"]
(card/card-list {:divider "inset"}
(card/card-list-item {} "Notifications")
(card/card-list-item {} "Privacy")
(card/card-list-item {} "Appearance")
(card/card-list-item {} "Accessibility"))))
(defn accordion-demo []
(section "Accordion"