Style Guide

Useful resources

Table of Contents

Add the following to the YAML header of a page to display the table of contents for that page on the right. The other-links setting can be used to include extra links in the ToC. You can omit the target and icon, or change the icon to one from the bootstrap icons list.

---
title: {Page Title}
format:
  html:
    toc: true
    toc-depth: 6
    toc-expand: 3
    toc-title: Page Contents
    other-links:
      - text: UKRN Github
        href: https://github.com/ukrn/
        target: _blank # opens in a new tab
        icon: github
---

See the quarto documentation for extended help.

Headers

The title of this page (Style Guide) is in the level-1 header style, and the header above is level-2. You usually want to start with level-2 headers on a page, since the title is level 1.

Prefix a header with the appropriate number of hashes (e.g., ## Headers) to make it a header. Leave a blank line before and after headers.

Header 3

Header 4

Header 5
Header 6

Text and links

Some text in a paragraph before a list of links:

Tabsets

Content in tab A.

Content in tab B.

Content in tab C.

Callout Blocks

Custom UKRN

The generic and feature callouts are custom-made for the UKRN style.

This is a generic callout without a title

::: {.callout}
This is a generic callout without a title
:::
Callout Box

This is a generic callout with a title

::: {.callout}
## Callout Box 

This is a generic callout with a title
:::
Feature Box

This is a featured callout with collapsible content

::: {.callout-note .feature collapse="false"}
## Feature Box 

This is a featured callout with collapsible content
:::

Quarto Callouts

The following callout boxes are default quarto types, and their appearance is controlled by the theme.

Note

This is a note ::: {.callout-note}

Warning

This is a warning ::: {.callout-warning}

Important

This is important ::: {.callout-important}

Tip

This is a tip ::: {.callout-tip}

Caution

This is a caution ::: {.callout-caution}

This is an example of a ‘folded’ note callout that can be expanded by the user.

::: {.callout-note collapse="true"}

Expanded Collapse

You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

::: {.callout-note collapse="false"}