How to add background colours to boxes on Rmarkdown flexdashboard

Question

I would like to colour each box on my flexdashboard a different colour. For example, I would like the background inside box 1 to be blue, the background inside box 2 to be green and so on.

Would anyone be able to advise me on whether this is possible, and if so, how to do this please?

I have attached an example piece of code below.

I cannot use value boxes due to having more than one piece of information to input.

Many thanks,

title: "Example"
output: 
  flexdashboard::flex_dashboard:
  orientation: columns
  vertical_layout: fill
  ---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=450}
-----------------------------------------------------------------------

### Box 1

```{r}
x = 5
y =6 
```

In this example `r x` is smaller than `r y` 


### Box 2

```{r}
x = 5
y =6 
z= 4
```

In this example `r x` is smaller than `r y` but bigger than `r z`

Column {data-width=450}
-----------------------------------------------------------------------

### Box 3

```{r}

```

### Box 4

```{r}

```

Answer 1

You can use CSS to style all elements of your dashboard. Your boxes are automatically assigned an ID corresponding to their title (usually just lowercase and spaces are replaced by hyphens):

<style>
#box-1 {
  background-color: blue;
  color: white;
}
#box-2 {
  background-color: green;
}

Additionally it is possible to add CSS classes to your boxes like

## Box 1 { .first-box }

Then you can change the styles for this class using

<style>
  .first-box {
    ...
  }
</style>