How do I create an incremental list with the last fragment an image?

[cbrnr]

Description

I'm trying to create a single slide with an incremental list and a final image, which should appear last and cover the entire slide. I'm currently splitting this over two slides, but I don't really want that because this clutters the side menu and affects the total number of slides. Is this possible?

---
title: "Reproducible Quarto Document"
format:
  revealjs:
    incremental: true
---

## First Slide

- Bullet point
- Another bullet point
- Last bullet point


## First Slide

![]({{< placeholder 1600 1000 >}})

[mcanouil]

Use fragments and stack as described.

• https://quarto.org/docs/presentations/revealjs/advanced.html#stack-layout

[cbrnr]

No, I don't want the figure to be below the list, I wrote that I want "an incremental list and a final image, which should appear last and cover the entire slide". Sorry if this was not clear.

Your suggestion displays the image last and it does cover the entire slide, but the list items appear centered (both horizontally and vertically) on the screen. It would be great if the list appeared left-aligned and right below the slide heading.

[mcanouil]

No, I don't want the figure to be below the list, I wrote that I want "an incremental list and a final image, which should appear last and cover the entire slide". Sorry if this was not clear.

I know, but that's not what your code does or is supposed to do.
Again, use CSS to tweak the layout if you don't like it.

Stack does exactly what it is supposed to do: https://quarto.org/docs/presentations/revealjs/advanced.html#stack-layout

The r-stack layout class lets you center and place multiple elements on top of each other. This is intended to be used together with fragments to incrementally reveal elements.

[cbrnr]

OK thanks (since I'm not familiar with CSS at all, this is probably too much work so I'll just leave it at two separate slides)!

[mcanouil]

The following should work:

---
format: revealjs
---

## First Slide

::: {.r-stack}
:::: {style="margin: 0;"}
- Bullet point
- Another bullet point
- Last bullet point
::::

![]({{< placeholder 1600 1000 >}}){.fragment}
:::

[cbrnr]

Thank you, this is exactly what I wanted! Perfect! 🙏