Change size of value valuebox in dashboard Quarto

Question

I'm creating a dashboard using Quarto. I would like to use valueboxes to show a value. The problem is that I don't know how to change the size of the value in a valuebox. In the example below you will see that it is out of the boundaries when the number is too big like this:

---
title: "How to change the value size of a valuebox"
format: dashboard
---

# {.sidebar}

Example code

# Tab

## Row {height="20%"}

```{r}
#| content: valuebox
#| title: "Example"

list(
  icon = "people",
  color = "primary",
  value = 123456789
)
```

```{r}
#| content: valuebox
#| title: "Example"

list(
  icon = "people",
  color = "primary",
  value = 123456789
)
```

## Row {height="80%"}

Output:

As you can see it doesn't fit the valuebox. I tried to use a size argument but that doesn't work for this. So I was wondering if anyone knows how to change the size of the value in a valuebox?

Answer 1

The existing font size of valuebox values are defined as,

.quarto-dashboard .bslib-value-box .value-box-value {
    font-size: clamp(.1em, 15cqw, 5em);
}

And from the MDN web docs,

The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

So to change the font size of the valuebox's values you can change the preferred value or even change the min or max values of the clamp() function.

For example, putting the following in a style.css file,

.quarto-dashboard .bslib-value-box .value-box-value {
    font-size: clamp(.1em, 10cqw, 5em) !important;
}

renders to,