diff --git a/vignettes/articles/.gitignore b/vignettes/articles/.gitignore
new file mode 100644
index 00000000..075b2542
--- /dev/null
+++ b/vignettes/articles/.gitignore
@@ -0,0 +1 @@
+/.quarto/
diff --git a/vignettes/articles/example_cards.R b/vignettes/articles/example_cards.R
index a8710ae0..f3706286 100644
--- a/vignettes/articles/example_cards.R
+++ b/vignettes/articles/example_cards.R
@@ -1,42 +1,20 @@
-card <- function(
-  ...,
-  class_card = NULL,
-  class_card_body = NULL,
-  class_card_title = NULL,
-  class_card_footer = "text-end"
-) {
-  card_data <- list(...)
-  htmltools::withTags(
-    div(
-      class = "col",
-      div(
-        class = c("card h-100 shadow-sm", class_card),
-        a(
-          href = card_data$link,
-          img(
-            src = card_data$image,
-            class = "card-img-top",
-            alt = paste0("Preview image of ", card_data$title)
-          )
-        ),
-        div(
-          class = c("card-body", class_card_body),
-          h5(class = c("card-title", class_card_title), a(href = card_data$link, card_data$title)),
-          if (!is.null(card_data$text)) div(
-            class = "card-text text-muted fs-6",
-            htmltools::HTML(commonmark::markdown_html(card_data$text))
-          ),
-        ),
-        if (!is.null(card_data$footer)) div(
-          class = c("card-footer", class_card_footer),
-          htmltools::HTML(card_data$footer)
-        )
-      )
-    )
+card <- function(title, link, image, alt = NULL, text = NULL, footer = NULL, ...) {
+  alt <- alt %||% paste0("Preview image of ", title)
+
+  bslib::card(
+    class = "shadow-sm",
+    bslib::card_header(htmltools::a(href = link, title)),
+    bslib::card_body(
+      bslib::card_image(file = NULL, src = image, href = link, alt = alt),
+      if (!is.null(text)) htmltools::HTML(commonmark::markdown_html(text)),
+      fillable = FALSE
+    ),
+    if (!is.null(footer)) 
+      bslib::card_footer(htmltools::HTML(footer)),
   )
 }
 
-example_cards <- function(yml, group = NULL, class_row = "row-cols-1 row-cols-md-2 row-cols-lg-3") {
+example_cards <- function(yml, group) {
   examples <- if (is.list(yml)) {
     yml
   } else {
@@ -44,10 +22,7 @@ example_cards <- function(yml, group = NULL, class_row = "row-cols-1 row-cols-md
   }
 
   examples <- purrr::keep(examples, function(x) x[["group"]] %in% group)
-  examples <- purrr::transpose(examples)
+  cards <- purrr::map(examples, function(x) purrr::exec(card, !!!x))
 
-  htmltools::tags$div(
-    class = paste("row g-4", class_row),
-    purrr::pmap(examples, card)
-  )
+  bslib::layout_column_wrap(!!!cards, width = "300px")
 }