Introduction

This is a Quarto presentation format that is consistent with The University of Warwick’s brand, especially its colours and typography.

Colour backgrounds for new sections

Or stressing key points

Blue background

Yellow background

Coral background

Text highlights

Hightlight key words with a .{color} class, where color is one of:

  • lavendar
  • coral
  • green
  • blue
  • yellow

Additional colours

There’s a colour for inline code such as x <- c(1, 3, 6) and {.lavendar-bg}.

There’s also a colour for short links and full ones like https://quarto.org/docs/presentations/revealjs/.

Typography

The University of Warwick brand font is Neue Haas Grotesk, which is available as part of Adobe Creative Suite.

The preferred substitute font is Aptos, which is available in Microsoft apps.

Neither of these are freely available for use with Quarto.

This format therefore uses Warwick’s final approved substitute font: Arial.

Code

The extension includes a custom syntax highlighting theme:

library(dplyr)

penguins %>%
  mutate(
    long_flipper = case_when(
      species == "Adelie" & flipper_len > 195 ~ TRUE,
      species == "Chinstrap" & flipper_len > 200 ~ TRUE,
      species == "Gentoo" & flipper_len > 225 ~ TRUE,
      TRUE ~ FALSE
    )
  ) %>%
  mutate(
    body_mass_kg = body_mass / 1000,
    bill_len_cm = bill_len / 10,
    bill_dep_cm = bill_dep / 10
  )

Callouts

There are custom colours for callouts:

Note

A note

Warning

A warning

Important

Something important

Tip

This is a good idea

Caution

Be careful about doing this

Columns with backgrounds

Use class .col-box-{color} to apply colour box styling, e.g. .col-box-lavendar

Box 1: lavendar

Default height is 450px

Box 2: green

Box 3: blue

Columns with backgrounds: tall and short

Colour box styling can be applied to entire columns

This has height 600px and class .col-box-green-tall

Or to divs within columns to create stacks

This div has height 300px and class .col-box-yellow-short

Non-Warwick-specific nice-to-haves

Alignment

There are classes to help with text alignment:

{.center-h} gives horizontally-centered text

{.right} gives right-aligned text

Note

For all revealjs Quarto presentations, applying {.center} to the slide title vertically centers the whole slide.

Sizing

There are classes to help size text by a given percentage:

{.smaller90}, {.smaller80}, {.smaller75} {.smaller70}, {.smaller60}, {.smaller50}

{.larger125}, {.larger150}, {.larger175}, {.larger200}, {.larger250}

More information

You can learn more about Quarto Revealjs presentations at https://quarto.org/docs/presentations/revealjs/

You can learn more about Quarto extensions at https://quarto.org/docs/extensions/

You can find these slides at https://warwick-stats-resources.github.io/warwickpres/