This page is used by giddyup test its hiccup data structure generation functions, but you can also use it as a cheatsheet for what the library can do.
(accordion "accordion" ["Boostrap" "Boostrap is an HTML scaffold for web apps"] ["Clojure" "Clojure is a powerful JVM language"] ["Giddyup" "Giddyup brings Boostrap and Clojure together"])
(carousel "carousel" [[:img {:src "http://lorempixel.com/600/400/nature/"}] "Nature"] [[:img {:src "http://lorempixel.com/600/400/city/"}] "City"] [[:img {:src "http://lorempixel.com/600/400/technics/"}] "Tech"])
This seems to work well enough.
(media-object "http://lorempixel.com/80/80/abstract" "On Apr 8, 2014, Janne wrote:" [:p "This seems to work well enough."])
(alert :warning "Login failed")
(icon :pencil)
(progress-bar 60)
Launch demo modal
What does Marcellus Wallace look like?
(modal (modal-header "Question for You") [:div.modal-body [:p "What does Marcellus Wallace look like?"]] [:div.modal-footer (modal-dismiss-button {:class "btn"} "Wha-wha...?")])
(dropdown-menu ["Open..." "#open"] :divider "Save file" ["Save" "#save"] ["Save As..." "#save-as"] :divider ["Quit" "#quit"])
(navbar [:div.navbar-header [:a.navbar-brand {:href="#"} "Giddyup"]] [:ul.nav.navbar-nav [:li [:a {:href "#giddyup-display"} "Display"]] [:li [:a {:href "#giddyup-info"} "Info"]] [:li [:a {:href "#giddyup-modal"} "Modal"]]])
(pager "← Previous" [:a {:href "#next"} "Next →"])
(thead "Name" "Email") (row "Joe" "joe@example.com") (tbody ["Joe" "joe@example.com"] ["Jill" "jill@example.com"]) (table "Contact Info" ["Name" "Email"] ["Joe" "joe@example.com"] ["Jill" "jill@example.com"])