not able to add text boxes on top of valueBox() in r flexdashboard

Sometimes it is difficult to figure out how flexdashboard can be used for maximum purposes. Since not many documents are available, I, at times, look for the help from the others.

I have a flexdashboard design as shown in the below code:

---
title: "My Design"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill

runtime: shiny
---

```{css}
.value-box {
  height: 110px;
}

```


```{r global, echo = FALSE}
library(shiny)
library(flexdashboard)

vb1 <- valueBox(value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
         caption = tags$p("My Value Box 1", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"),
    icon = "fa-thumbs-up",
    color = "success" )


vb2 <- valueBox(value = tags$p(paste(50, "%"), style = "font-size: 140%;"),
         caption = tags$p("My Value Box 2", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"), 
         icon = "fa-hourglass-end", color = "danger")

vb3 <- valueBox(value = tags$p(paste(80, "%"), style = "font-size: 140%;"),
         caption = tags$p("My Value Box 3", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"),
         icon = "fa-eur", color = "warning")

vb4 <- valueBox(value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
         caption = tags$p("My Value Box 4", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"),
         icon = "fa-clock", color = "success")

```


My Dashboard {data-icon="fa-search"}
=======================================================================

## Row {.sidebar data-width=280 data-padding=10}

```{r}

tags$h4('My Side Bar')
tags$hr()

```


Row 
-----------------------------------------------------------------------

### {.value-box}

```{r}

renderValueBox(vb1)

```


###  {.value-box}

```{r}

renderValueBox(vb2)

```


###  {.value-box}

```{r}

renderValueBox(vb3)

```

###  {.value-box}

```{r}

renderValueBox(vb4)

```

I want to add text boxes on the value boxes (as shown in the black in the below picture).

How can it be done?

Solution

is this what you want?

---
title: "My Design"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill

runtime: shiny
---

```{css}
.value-box {
  height: 110px;
}

```


```{r global, echo = FALSE}
library(shiny)
library(flexdashboard)
top_text_style <- 
"background-color:rgba(39, 128, 227, 0.0); 
border-color:rgba(39, 128, 227, 0.0); 
position: absolute; 
overflow: hidden; 
left: 5%; top: 1px; 
right: 0px; 
bottom: 0px; width:100%"
bottom_text_style <- 
"position: absolute;
bottom: 0;
left: 5px;
font-weight: 600;"

vb1 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 1", style = top_text_style), 
         tags$h4("some text1", style = bottom_text_style)
      ),
     icon = "fa-thumbs-up", color = "success" 
)


vb2 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 2", style = top_text_style), 
         tags$h4("some text2", style = bottom_text_style)
      ),
     icon = "fa-hourglass-end", color = "danger"
)

vb3 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 3", style = top_text_style), 
         tags$h4("some text3", style = bottom_text_style)
      ),
     icon = "fa-eur", color = "warning"
)

vb4 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 4", style = top_text_style), 
         tags$h4("some text4", style = bottom_text_style)
      ),
    icon = "fa-clock", color = "success"
)

```


My Dashboard {data-icon="fa-search"}
=======================================================================

## Row {.sidebar data-width=280 data-padding=10}

```{r}

tags$h4('My Side Bar')
tags$hr()

```


Row 
-----------------------------------------------------------------------

### {.value-box}

```{r}

renderValueBox(vb1)

```


###  {.value-box}

```{r}

renderValueBox(vb2)

```


###  {.value-box}

```{r}

renderValueBox(vb3)

```

###  {.value-box}

```{r}

renderValueBox(vb4)

```