How to control bg-color in cards (dashboard)?

[meteosimon]

Description

Hi, I'm using quarto dashboard with python and I'm looking for an easy (and flexible) way to control the background color of cards. I know valueboxes and I like the way I can control their color and value using a dict. Can I control cards in a similar way?

Here's what I want my card to look like (the red one):

Generated with this input, the third column show's the way I thought would be nice to control the card? Is this somehow possible of in a similar way?

---
title: "MyDashboard"
format: dashboard
jupyter: python3
---

## Row

### Column

::: {.card title="MyTitle" expandable="false"}
Gapminder combines data from multiple sources into
unique coherent time-series that can’t be found elsewhere.
:::

### Column

<div class="card bslib-card html-fill-container bg-danger" data-title="MyTitle" data-require-bs-caller="card()">
<div class="card-header"><div class="card-title">MyTitle</div></div>
<div class="card-body html-fill-item html-fill-container bg-danger">
<p>Gapminder combines data from multiple sources into unique coherent time-series that can’t be found elsewhere.</p>
</div>
</div>

### Column

```{python}
#| content: card
#| output: false
dict(
  title = "MyTitle",
  color = "danger",
  value = """
  Gapminder combines data from multiple sources into unique coherent time-series that can’t be found elsewhere.
  """
)
```

[dragonstyle]

Right now, we don't really expose coloring cards directly, or using the dict style approach to emitting cards ... It would be a nice enhancement, though. If we support a simple way to set colors using an attribute:

::: {.card title="MyTitle" expandable="false" background="danger"}

would you still prefer a dict style approach? What do you see as the benefits / uses for that versus just writing the markdown?

[meteosimon]

This would work for my case. For which it is important to set the background color dynamically. I would use it like this:

```{python}
#| label: card_setup
#| output: false
my_title = "MyTitle"
bg_color = "danger"
```

::: {.card title=`{python} f'"{my_title}"'` expandable="false" background=`{python} f'"{bg_color}"'`}
Gapminder combines data from multiple sources into
unique coherent time-series that can’t be found elsewhere.
:::

[mcanouil]

I went ahead and created an enhancement issue to track this (and changing this thread to feature request):

• Add more control on card components such as background colour #8515