UNHCR Quarto Theme

For revealjs

Presentation with Quarto

  • Quarto integrates with Reveal.js to create stunning slideshows.
  • Markdown syntax is used to structure and format content.
  • Craft a finished UNHCR branded presentation with this template.
  • Seamlessly weave together content and executable code.

To learn more about Quarto presentations see https://quarto.org/docs/presentations/.

Presentation title

  • YAML arguments define the content of the title slide.
  • Add arguments as needed
---
title: UNHCR Quarto Theme
subtitle: For revealjs
author: Cedric Vidonne
institute: IPDA
date: last-modified
format: unhcr-revealjs
---

Basic slides

  • Each slide starts with a level 2 heading (## Slide 1). For example:
## Slide 1

Some content for slide 1

## Slide 2

Some content for slide 2

Section slides

  • A section starts with a level 1 heading (# Section 1). For example:
# Section 1

Some content for section 1

Section

Example of a section slide

UNHCR section

Add {.slide-blue} class to make it UNHCR blue

Lists

  • To add bullet points to a slide, use the Markdown list syntax.
  • Works the same way with numbered lists. For example:
- Item 1
    - Item 1.1
    - Item 1.2
- Item 2
- Item 3

Incremental list

  • By default the lists are not incremental.
  • Add the {.incremental} class, so each bullet will appear separately.
::: {.incremental}
- Item 1
- Item 2
:::
  • This is the 1st incremental bullet.
  • And here the 2nd.

Incremental content

  • Use . . . to separate content and turn it incremental.
  • Any content can be incremental. For example:
This will appear first

. . .

And then that!

UNHCR helpers

Text

  • Use {.text-blue} to apply UNHCR blue color
  • Use {.text-grey} for lighter text color

Background

  • Use {.bg-blue} for light blue background
  • Use {.bg-grey} for light grey background

Columns

  • To create columns, use a div container with class {.columns}, containing two or more div containers with class {.column} and a width attribute. For example:
:::: {.columns}

::: {.column width="40%"}
Left column
:::

::: {.column width="60%"}
Right column
:::

::::

Images

  • To insert an image, use the Markdown image syntax. For example:
![](path/to/image.jpg)

Code

  • To include code, use fenced code blocks with a language specifier.
  • By default the echo parameter of code block is set to false, turn it to true to see the code and the result.
\```{r}
#| echo: true
#| warning: false
library(tidyverse)
library(unhcrthemes)
\```

Plots

  • Use the {unhcrthemes} package to produce UNHCR branded plots directly in the presentation. For example:

Tables

  • Use knitr::kable() function for simple table. For example:
mpg cyl disp
Mazda RX4 21.0 6 160
Mazda RX4 Wag 21.0 6 160
Datsun 710 22.8 4 108

More tables

  • Many packages can help you stylize tables, like {gt}, {dt} and more.
  • Use them to customize further the table design in your presentations.
gt::gt(head(mtcars))
mpg cyl disp hp drat wt qsec vs am gear carb
21.0 6 160 110 3.90 2.620 16.46 0 1 4 4
21.0 6 160 110 3.90 2.875 17.02 0 1 4 4
22.8 4 108 93 3.85 2.320 18.61 1 1 4 1
21.4 6 258 110 3.08 3.215 19.44 1 0 3 1
18.7 8 360 175 3.15 3.440 17.02 0 0 3 2
18.1 6 225 105 2.76 3.460 20.22 1 0 3 1

Speaker Notes:

  • You can add speaker notes to your slides that are only visible to the presenter during the presentation.
  • To add speaker notes, use the following syntax:
## Slide with speaker notes

Slide content

::: {.notes}
Speaker notes go here.
:::

Exporting into PDF

  • Toggle into Print View using the E key (or using the Navigation Menu).
  • Open the in-browser print dialog (CTRL/CMD+P).
  • Change the destination setting to Save as PDF.
  • Find more info on the print to PDF settings here.

More Information

You can learn more about controlling the appearance and layout of RevealJS output here: https://quarto.org/docs/presentations/revealjs/

Thank you

Enjoy the template!