Search code examples
quartoreveal.jscalloutsincremental

Add Callout-Block to incremental list in revealjs


I would like to add a Callout Block to a {.incremental} list in a slide using revealjs. Here is some reproducible code:

---
title: "Callout Block in revealjs"
format: revealjs
---

## Slide

::: {.incremental}

- Here some text

::: {.callout-tip}
## Tip with Title

This is an example of a callout with a title.
:::

:::

Output:

enter image description here

As we can see from the output, the callout block is not incremental like the text above. So I was wondering if it is possible to add callout blocks to an incremental list in revealjs Quarto?


Solution

  • As per the quarto docs,

    By default number and bullet lists within slides are displayed all at once. You can override this globally using the incremental option.

    So it seems .incremental works for lists only. But since you want the incremental behavior for both list items and callout blocks, consider using .fragment instead,

    Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide.

    ---
    title: "Callout Block in revealjs"
    format: revealjs
    ---
    
    ## Slide
    
    ::: {.fragment}
    
    - Here some text
    
    :::
    
    ::: {.fragment}
    
    ::: {.callout-tip}
    ## Tip with Title
    
    This is an example of a callout with a title.
    :::
    
    :::