Skip to content

Slide Options

Slides may exist as standalone html files with YAML header information, or as groups of slides, i.e., a single html may contain multiple <section></section> elements. The YAML front matter may contain section title information1 or provide attributes to the opening <section> tag for the first slide in the document.

Specific Configurations

sectiontitle

The sectiontitle field is used to define a section title slide. It includes various subfields to customize the appearance and content of the section title.

Fields

Field Type Description
headline Array An array of strings representing the headlines of the section title. The first element is rendered as an <h2>, and subsequent elements as <h3>.
image Object An optional object to specify a background image for the section title. Must contain a url field for the image source and can include additional styling properties.
color String An optional field to set the background color of the section title. This is used if image is not provided.
gradient String An optional field to set the background gradient of the section title. This is used if image and color are not provided.

Attributes

Any entries in the slide YAML header that do not match "sectiontitle" will be converted directly to HTML attributes and inserted into the opening

tag of the first slide in the document. This includes data attributes, CSS classes, IDs, and more.

Example

Single Slide

A single slide HTML file does not require explicit <section> tags, as they are handled by the template.

---
---
<div class="grid-wrapper">
  <div class="header">
    <h2>Today's Objectives</h2>
  </div>
  <div class="content">
    <div class="grid-generic full-width left-justify big" style="grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 5vmin;">
      <div class="border-bottom fragment" data-fragment-index="1">
        <p><i class="target"></i> Recap Repeated-Measures ANOVA</p>
      </div>
      <div class="border-bottom fragment" data-fragment-index="2">
        <p><i class="target"></i> Two-Way ANOVA Introduction</p>
      </div>
    </div>
  </div>
</div>
<aside class="notes">
  <p>Let's recap some of the concepts of ANOVA.</p>
</aside>

Multiple Slides with Section Title

When multiple slides and a section title exist in a single file, the section title <section> tag must be explicitly closed before opening the next slide's <section> tag.

---
sectiontitle:
  headline:
    - "Factor Analysis"
    - "Two-Way ANOVA"
  image:
    url: "lib/img/multigroup_5.png"
---

<style>
  #section-content-2.section-title-content {
    background-color: rgba(240,240,240,0.7) !important;
    border-radius: 2rem !important;
    box-shadow: 0 0 2rem 2rem rgba(240,240,240,0.7) !important;
  }
</style>
</section>
<!-- Slide 2 -->
<section>
  <div>Slide 2 content here.</div>
</section>
<!-- Slide 3 -->
<section>
  <div>Slide 3 content here.</div>
<!-- no closing section tag -->

Which renders2 in the presentation as:

<section id="section-title-2" data-background-image="lib/img/multigroup_5.png">
    <div class="grid-wrapper">
        <div class="section-title-content" id="section-content-2">
            <div class="section-number">
                <span class="large-number">2</span>
            </div>
            <div class="headlines">
                <h2 class="r-fit-text">Factor Analysis</h2>
                <h3>Two-Way ANOVA</h3>
            </div>
        </div>
    </div>
    <style>
        #section-content-2.section-title-content {
            background-color: rgba(240,240,240,0.7) !important;
            border-radius: 2rem !important;
            box-shadow: 0 0 2rem 2rem rgba(240,240,240,0.7) !important;
        }
    </style>
</section>
<!-- Slide 2 -->
<section>
    <div>Slide 2 content here.</div>
</section>
<!-- Slide 3 -->
<section>
    <div>Slide 3 content here.</div>
<!-- no closing section tag -->
 </section> <!-- This tag automatically inserted by revealpack -->

Vertical Slide Stack

To create a vertical slide stack, ensure each slide is wrapped in <section> tags, and the YAML front matter must be empty.

---
---
<section>
  <h2>Top slide in vertical stack.</h2>
</section>
<section>
  <h2>Second slide in vertical stack.</h2>
</section>
<section>
  <h2>Third slide in vertical stack.</h2>
</section>

Which renders in the presentation as:

<section><!-- This tag automatically inserted by revealpack -->
  <section>
    <h2>Top slide in vertical stack.</h2>
  </section>
  <section>
    <h2>Second slide in vertical stack.</h2>
  </section>
  <section>
    <h2>Third slide in vertical stack.</h2>
  </section>
</section><!-- This tag automatically inserted by revealpack -->

Attributes

The YAML header can add custom attributes to the opening <section> tag. These attributes can include data attributes, IDs, classes, and more. Any YAML entries that do not match "sectiontitle" will be converted directly to HTML attributes.

---
data-background-color: "red"
id: "custom-id"
class: "custom-class"
---
<h2>Add Attributes to Slides</h2>
<div style="width:70vw;"><p>Slide content with custom attributes.</p></div>

Which renders in the final presentation as:

<section data-background-color="red" id="custom-id" class="custom-class">
  <h2>Add Attributes to Slides</h2>
  <div style="width:70vw;"><p>Slide content with custom attributes.</p></div>
</section><!-- This tag automatically inserted by revealpack -->

By using these YAML options, you can create flexible and well-structured presentations with custom section titles and attributes.


  1. If a section title and subsequent slides exist in a single file, the section title <section> tag (hidden) must be explicitly closed before opening the next slide's <section> tag (see Getting Started). 

  2. To ensure the custom style block is parsed to the correct sectiontitle, make sure you manually select the correct index of section titles. In this example, "Factor Analysis" was the second section title slide in the presentation, hence the specific css selector: #section-content-2.section-title-content. Note that RevealPack tracks each section title and increments, so the next section title YAML will have the section tag with id="section-title-3" and so on. Likewise, the main text container will have class="section-title-content" and id="section-content-3", and so on for future section title slides.