---
title: UNHCR Quarto Document
subtitle: Create UNHCR branded HTML article
date: today
author: Cédric Vidonne
format: unhcr-html
title-block-banner: true
---UNHCR Quarto Document
Create UNHCR branded HTML article
Quarto HTML document
Create stunning UNHCR branded HTML document mixing text, images, tables, plots, code and more, directly with this template.
As with the other UNHCR Quarto extensions, the underlying document syntax is markdown. You can find all the information on authoring documents with Quarto here. You can find more specific information on figures and tables.
UNHCR HTML Template
The unhcr-html Quarto template comes with predefined styles and components but Quarto is extremely flexible and, depending on your needs, you can modify many aspects directly from the document YAML or by simply using CSS classes. We recommend you stick with the default options but look at the reference below to know more about what you can do with Quarto.
Refer to the Quarto guide for HTML document or the complete HTML format reference for more information.
Title box
Some attributes of the YAML will be used to populate the top banner, such as the title, date, author and more. By default the banner is part of the other content flow and uses the default white background. You can turn it to a UNHCR blue banner, separated from the rest, by adding title-block-banner: true in the YAML. For example:
Note that only the title, subtitle and description attribute will be added to the blue banner. The other parameters will keep their default styling. Find more information on the title blocks here.
Table of content
By default, the table of content is visible. Simply add toc: false to the YAML to hide the toc. You can find more information on toc and its settings here.
Typography
In this section, we will show the basic usage of the template on how to make UNHCR branded HTML document but as Quarto is using Bootstrap, almost all the functionalities of the framework are available to you. Please, refer to the offical Bootstrap documentation to see what you can do with some simple CSS classes.
You can add classes, attributes, and other identifiers to regions of content using Divs and Spans.
For example, here we add the {.bg-primary} class to a region of content using a div (:::):
::: {.bg-primary}
This content will be styled with a UNHCR blue background
:::You can achieve the same at the span level with inline styling. For example:
This is normal text but [this text will be in UNHCR blue]{.text-primary}.Check the Quarto documention on Divs and Spans for more information and examples.
Headings
Simply use the markdown notation for headings # to create your content structure. For example:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Inline text
Simply use the markdown built-in notation to format your content. For example:
*This line will render as italicized text.*
**This line will render as bold text.**
***This line will render as bold and italic text.***
`This line will render as inline code.`
~~This line will be strikethrough.~~
This line will include a [link to UNHCR webpage](https://www.unhcr.org/)This line will render as italicized text.
This line will render as bold text.
This line will render as bold and italic text.
This line will render as inline code.
This line will be strikethrough.
This line will include a link to UNHCR webpage
Not all the formatting can be achieved with markdown only, but Quarto understands HTML so extra styling can be perfomed by directly entering HTML code in your Quarto document. For example:
<u>This line of text will render as underlined.</u>This line of text will render as underlined.
The template also includes some CSS classes to help with formating. For example:
:::{.lead}
This is a lead paragraph. It stands out from regular paragraphs.
:::
You can use the mark class to [highlight]{.mark} text.
[This line of text is meant to be treated as fine print.]{.small}This is a lead paragraph. It stands out from regular paragraphs.
You can use the mark class to highlight text.
This line of text is meant to be treated as fine print.
Useful for UNHCR document you can also create footnotes and abbreviations with the following code:
This is a footnote^[Text of the footnote]
<abbr title="The United Nations High Commissioner for Refugees">UNHCR</abbr>This is a footnote1
UNHCR
For more examples and options, check the Bootstrap documentation on typography.
Lists
The template comes with stylized lists, simply create them using markdown notation. For examples:
* unordered list
+ sub-item 1
+ sub-item 2
- sub-sub-item 1
1. ordered list
2. item 2
i) sub-item 1
A. sub-sub-item 1- unordered list
- sub-item 1
- sub-item 2
- sub-sub-item 1
- ordered list
- item 2
- sub-item 1
- sub-sub-item 1
- sub-item 1
Blockquote
Blockquote can be achieved with markdown using the > notation. To include a quote author, add a blank line with the > character and a line with the > character for the author itself. The {.blockquote-author} class must be added to the text for the credential. For example:
> "A simple blockquote"
> "A blockquote with source"
>
> [From an important person]{.blockquote-author}“A simple blockquote”
“A blockquote with source”
Note that the " character has to be added manually, directly to the quote.
Callout blocks
Callout blocks can be helpful to attract reader’s attention. Please review the Quarto article on callouts for more information. Below an example of a note callout.
::: {.callout-note}
Note that there are five types of callouts, including: `note`, `tip`, `warning`, `caution`, and `important`.
And their style can be changed further with the `appearance` attribute.
:::
Note
Note that there are five types of callouts, including: note, tip, warning, caution, and important.
And their style can be changed further with the appearance attribute.
Colors
Bootstrap comes with an extensive set of color helper classes for text, background and even buttons as seen above. Nevertheless, we would recommend, you keep your document as simple as possible and stick to the {primary} and {secondary} color palettes of bootstrap.
To change the color, simply apply a specific CSS class to the desired element. For text and background, it starts with {.text} or {.bg} followed by the color name in bootstrap like {-primary}, {-secondary}, {-warning} and more.
Keep in mind that not all the text and background will work together and that you might need to tweak the element separately to make sure it is readable.
Text color
For example, to add some UNHCR blue text to your content use the following code example:
This my body text followed by [UNHCR blue]{.text-primary} text.This my body text followed by UNHCR blue text.
Background color
As mentioned, adding a specific background color works exactly the same way as the text color. The main difference though is that usually background color will be applied on fenced divs but all the CSS classes work regardless of it’s application to a span or a div.
Just be careful to apply some coloring to the text if the contrast between the text and the background isn’t sufficient and be mindful of the potential padding and margin needed.
For example, to create a UNHCR blue box with white text use the following code example:
::: {.bg-primary .text-white .p-3}
A UNHCR blue box with white text and some padding for readability.
:::A UNHCR blue box with white text and some padding for readability.
Source code
To include code, use fenced code blocks with a language specifier. By default the echo parameter of code block is set to true, turn it to false to hide the code in the document.
\```{r}
#| echo: true
#| warning: false
library(tidyverse)
library(unhcrthemes)
\```There are wide variety of options available to customize the display of source code within HTML documents, check the Quarto documentation for more information.
Plots
Use the {unhcrthemes} package to produce UNHCR branded plots directly in the presentation. For example:
Tables
Use the knitr::kable() function to insert simple already stylized tables. For example:
knitr::kable(head(idp))| year | country | sex | idp |
|---|---|---|---|
| 2010 | Afghanistan | female | 174608 |
| 2010 | Afghanistan | male | 177299 |
| 2010 | Azerbaijan | female | 302032 |
| 2010 | Azerbaijan | male | 290828 |
| 2010 | Bosnia and Herzegovina | female | 58454 |
| 2010 | Bosnia and Herzegovina | male | 54911 |
Many packages can help you stylize tables, like {gt}, {DT} and more. Some of them might be particularly useful for HTML document and, allow you to enable some user intereaction with the table. Below a {DT} example that creates a paginated searchable and sortable table:
DT::datatable(idp)Layout
Quarto supports a variety of page layout options that enable you to author content that:
- Fills the main content region
- Overflows the content region
- Spans the entire page
- Occupies the document margin
We will cover the main fonctionalities here but you can find all the possible options directly on the Quarto website.
Body column
This is the default behaviour and where most of you content will live.
.column-body
If you want to apply different layout simply apply a specific CSS class. For example:
:::{.column-body-outset}
Outset content...
:::.column-body-outset
Page column
If you need more space for your content, you can use the .column-page class. Content will extent on the size but nor the cover the whole screen yet.
.column-page
Or a bit narrower with .column-page-inset class.
.column-page-inset
Screen column
For full width content, use the .column-screen class. The content will cover the full width of the screen with no margin.
.column-screen
To keep the full width appearance but retain some margin, use the .class-screen-inset class.
.column-screen-inset
Margin content
Some content can be placed within the right margin of the document (below the table of content). Like the columns it can be achieve with a css class. Use .column-margin to place content on the right side.
.column-margin
All the behaviours mentioned in this section can be applied to images, tables, plots, references and more. Visit the Quarto page on layouts for more information.
Footnotes
Text of the footnote↩︎
