77 lines
2.3 KiB
Common Lisp
77 lines
2.3 KiB
Common Lisp
;; https://getbootstrap.com/docs/5.3/components/card/
|
||
|
||
;; A card is a flexible and extensible content container. It includes options for
|
||
;; headers and footers, a wide variety of content, contextual background colors,
|
||
;; and powerful display options. If you’re familiar with Bootstrap 3, cards
|
||
;; replace our old panels, wells, and thumbnails. Similar functionality to those
|
||
;; components is available as modifier classes for cards.
|
||
|
||
(defpackage cl-sbt-card
|
||
(:use :cl)
|
||
(:export
|
||
:title
|
||
:subtitle
|
||
:text
|
||
:link
|
||
:header
|
||
:img
|
||
:body
|
||
:card-with-img
|
||
:card))
|
||
|
||
(in-package :cl-sbt-card)
|
||
|
||
(defmacro title (&body body)
|
||
`(spinneret:with-html
|
||
(:h5 :class "card-title" ,@body)))
|
||
|
||
(defmacro subtitle (&body body)
|
||
`(spinneret:with-html
|
||
(:h6 :class "card-subtitle mb-2 text-body-secondary" ,@body)))
|
||
|
||
(defmacro text (&body body)
|
||
`(spinneret:with-html
|
||
(:p :class "card-text" ,@body)))
|
||
|
||
(defmacro link ((&key (href "#")) &body body)
|
||
`(spinneret:with-html
|
||
(:a :href ,href :class "card-link" ,@body)))
|
||
|
||
(defmacro header (&body body)
|
||
`(spinneret:with-html
|
||
(:div :class "header" ,@body)))
|
||
|
||
(defmacro img ((&key (src "#") (alt "Card Image")))
|
||
`(spinneret:with-html
|
||
(:img :src ,src
|
||
:alt ,alt
|
||
:class "card-img-top")))
|
||
|
||
(defmacro body (&body body)
|
||
`(spinneret:with-html
|
||
(:div :class "card-body" ,@body)))
|
||
|
||
(defmacro card-with-img ((&key (img-src nil)) &body body)
|
||
`(spinneret:with-html
|
||
(:div :class "card"
|
||
,(if (null img-src) nil `(img (:src ,img-src)))
|
||
(:div :class "card-body" ,@body))))
|
||
|
||
(defmacro card (&body body)
|
||
`(spinneret:with-html
|
||
(:div :class "card" ,@body)))
|
||
|
||
;; Kitchen sink
|
||
;; Mix and match multiple content types to create the card you need, or throw
|
||
;; everything in there. Shown below are image styles, blocks, text styles, and a
|
||
;; list group—all wrapped in a fixed-width card.
|
||
|
||
(defun card-kitchen-sink ()
|
||
(card (img (:src "..."))
|
||
(body (card-title "Card title")
|
||
(card-text "Some quick example text to build on the card title and make up the bulk of the card's content."))
|
||
(cl-sbt-list-group (:content "An item")
|
||
(:content "A second item")
|
||
(:content "A third item"))
|
||
(body (card-link "Card Link")
|
||
(card-link "Another Link"))))
|