How can I use dashboard-style cards in a website project?

[edalfon]

Description

Hi.

I really liked quarto dashboard format and I have been using it since it was released. One of the features I find super useful is that the cards are expandable and I wanted to make use of that in a quarto website.

I naively tried using a .card div,

::: {.card}
Here the code of my pretty plot!
:::

And it wraps the plot in a card, but without the expand functionality. Also tried .bslib-card class and a bunch of other silly things, and I can't find the way to make it work.

For a bit of context, this is a quarto website project, that has a quarto dashboard in it (which I originally thought it was an unorthodox use of the tool, but this answer suggests that probably not). I mention this, because my naive approach described above was justified (at least in my head) by the fact that, having already a dashboard working within the website, all assets (css, classess, javascript, ...) to make the expandable cards work in the website should be there.

But then I realized that pages generated in the website (those not having the dashboard format) do not include dashboard resources (site_libs/quarto-dashboard/quarto-dashboard.js, site_libs/quarto-dashboard/components.js and so on) and my .card div above, of course, translates to a simple <div class="card"> and not the whole bslib script-divs-combo that powers the expandable cards. (if I include by hand all those thing in the generated html, it works, but....)

Is there an easy way then to use dashboard-style cards in a website project/pages? (I mean, quarto natively, so not relying on e.g. R's bslib package and alike)

[mcanouil]

There is currently no built-in way as for other Dashboard components:

• Make Value Boxes possible outside of format: dashboard #8475

I edited the issue to include cards.