Quarto dashboard alignment of content in value boxes

The CSS could be improved to ensure the icons are aligned.

Input

Output

--- title: "Quarto Playground" format: dashboard --- ## Row ::: {.valuebox icon="pencil" color="blue"} Articles per day 12 articles ::: ::: {.valuebox icon="pencil" color="green"} Articles per month 60 articles per month but not per day ::: ::: {.valuebox icon="pencil" color="yellow"} Articles per day 150 articles ::: ::: {.valuebox icon="pencil" color="yellow"} Articles per day 150 articles ::: ::: {.valuebox icon="pencil" color="yellow"} Articles per day 150 articles ::: ::: {.valuebox icon="pencil" color="yellow"} Articles per day 150 articles ::: ::: {.valuebox icon="pencil" color="yellow"} Articles per day 150 articles :::

Discussed in https://github.com/quarto-dev/quarto-cli/discussions/10505

^{Originally posted by xueyinghan August 13, 2024}

Description

Would it be possible to have a feature for the value boxes when creating Quarto dashboards so that the top and bottom align and the content inside the value boxes re-size automatically or to re-size the content without using CSS?

For instance, the medal icon for United States is higher in the rendered dashboard because United States takes up 2 lines:

Start with the provided Quarto dashboard reproduction and compare the value-box layout for labels that wrap to multiple lines. Review the discussion in #10505 for context; done means the icons and content align consistently across value boxes without requiring user-supplied CSS.