Insert text in the form of topics in a shiny app

[JojoSouza]

I would like to enter the description of my text in the form of topics. I'll insert an attached image to help them. The first image is the output generated by the code and the other is an example of what I want. This example is from the following app: Shiny - Career PathFinder

Code executable:

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                        title="Test", collapsible = TRUE,
                        
                        tabPanel("",
                                 div(
                                   style =
                                     "height: 80px;  background-color: #2C3E50; width: 100%; position:absolute;right:0;",
                                   
                                   div(
                                     style = "width: 80%; margin: auto;",
                                     
                                     h1(HTML("<u> WELCOME <b>NAME</b> </u>"),
                                        style="text-align:center; color: white;"),
                                     hr(),
                                      shiny::HTML("<br><br><center> <h2><b>EXAMPLE</b></h2> </center><br>"),
                                     h4(HTML("1-Accumsan nostra eu sodales etiam interdum lacus nullam. 
                                              2-pretium congue, dolor phasellus tincidunt metus. 
                                              3-Auctor scelerisque."),
                                        
                                        style="text-align: justify"),

                                     br(),
                                     tags$style(".navbar {margin-bottom: 0;}")))))





server <- function(input, output,session) {
  

}

shinyApp(ui = ui, server = server)

Output:

Example:

[nirgrahamuk]

What you linked to is entirely open, so you can view its sources. you can take it and modify it.
The styling is mostly coming from career-pathfinder/paper.css at 5a22d2ad391306761e75c33d69c64d81ad46e049 · georgemirandajr/career-pathfinder · GitHub
You can see in the ui code that the css is passed as theme param
career-pathfinder/ui.R at 5a22d2ad391306761e75c33d69c64d81ad46e049 · georgemirandajr/career-pathfinder (github.com)
div's are assigned to the classes defined in the aforementioned css. see
career-pathfinder/ui.R at 5a22d2ad391306761e75c33d69c64d81ad46e049 · georgemirandajr/career-pathfinder (github.com)

I usually refer to w3schools for css info
CSS Introduction (w3schools.com)