Headings and text

Overview

This vignette covers all functions in shinyGovstyle that produce styled text content: headings, body text, lists, callout components, links, and typography. For page structure and layout, see the Layout options vignette.

heading_text()

Creates a semantic HTML heading element with a GOV.UK heading CSS class.

heading_text("Summary", size = "l", level = 2)

heading_text("User guide", size = "m", level = 1)

# Correct — sentence case
heading_text("Summary of findings", size = "l", level = 1)

# Incorrect — title case
heading_text("Summary Of Findings", size = "l", level = 1)

heading_text("Methodology", size = "l", level = 2, id = "methodology")

gov_text()

A wrapper that produces a <p class="govuk-body"> paragraph element. Use it when you want to add body text with correct GOV.UK styling without writing raw tag calls.

gov_box(
  size = "two-thirds",
  gov_text("This is a paragraph of body text.")
)

gov_list()

Creates a GOV.UK-styled list. The style argument controls both the HTML element used and the visual presentation:

gov_list(c("First item", "Second item", "Third item"), style = "bullet")

gov_list(c("First step", "Second step", "Third step"), style = "number")

Use style = "number" when order matters — steps in a process, ranked results, or sequential instructions. Use style = "bullet" for unordered items. The plain style ("none") is useful when you want list semantics for screen readers without a visual marker.

For more information, read the GOV.UK lists guidance.

insert_text()

Displays a GOV.UK inset text box — a bordered callout for supplementary information that is related to, but not the main focus of, the surrounding content.

insert_text(
  inputId = "processing-note",
  text = "It can take up to 8 weeks to process your application."
)

Use inset text for information the user needs to know but that is not the primary action or decision on the page — for example, a processing time, an exception to a rule, or a clarification. Do not use it for warnings about consequences; use warning_text() instead.

For more information, read the GOV.UK inset text guidance.

warning_text()

Displays a GOV.UK warning text component: a bold statement with a prominent “!” icon, used to warn users about something with serious consequences.

warning_text(
  inputId = "fine-warning",
  text = "You can be fined up to £5,000 if you do not register."
)

The “!” icon carries aria-hidden = "true" and the word “Warning” is prepended as visually hidden text, so screen readers announce “Warning: [your text]” without reading out the icon character. Given this, you should avoid starting the text with ‘Warning’, else you’ll submit users to ‘Warning Warning’.

Use warning_text() when the consequence of missing the information is serious. For less critical supplementary information, use insert_text() instead.

For more information, read the GOV.UK warning text guidance.

noti_banner()

Displays a GOV.UK notification banner for information that is not directly related to the current page content — such as a service-wide problem, an upcoming deadline, or the outcome of a previous action.

noti_banner(
  inputId = "service-notice",
  title_txt = "Important",
  body_txt = paste0(
    "This service will be unavailable on Saturday ",
    "14 June from 8am to 6pm."
  )
)

noti_banner(
  inputId = "submission-confirm",
  title_txt = "Success",
  body_txt = "Your report has been submitted.",
  type = "success"
)

external_link()

A wrapper for HTML anchor elements that produces safe, accessible external links with consistent behaviour.

external_link("https://www.example.gov.uk/guidance", "Guidance for applicants")

# Correct — descriptive
external_link("https://www.example.gov.uk/apply", "Apply for a licence")

# Will error — vague text
external_link("https://www.example.gov.uk/apply", "click here")

# Will error — raw URL as text
external_link(
  "https://www.example.gov.uk/apply",
  "https://www.example.gov.uk/apply"
)

gov_text("The following links open in a new tab.")
shiny::tags$ul(
  shiny::tags$li(
    external_link(
      "https://www.example.gov.uk/a",
      "Guidance document A",
      add_warning = FALSE
    )
  ),
  shiny::tags$li(
    external_link(
      "https://www.example.gov.uk/b",
      "Guidance document B",
      add_warning = FALSE
    )
  )
)

font()

GDS Transport is a restricted typeface and must only be used on GOV.UK domains. If your app is not hosted on a GOV.UK domain, do not call font(). You do not need to do anything and your app will default to Arial instead, which is the correct behaviour.

If you are on a GOV.UK domain and therefore want to use the font() function, putting it within your UI will load the GDS Transport typeface for use in your app. By default the GOV.UK Frontend CSS specifies font-family: GDS Transport, arial, sans-serif — if the font files are not loaded the browser falls back to Arial automatically.

# Only include this if your app is on a GOV.UK domain
font()

For more information on when GDS Transport is permitted, read the GOV.UK typeface guidance.