Layout Examples

• Fit Text
• Stretch
• Stack
• HStack
• VStack

👇

Fit Text

Resizes text to be as large as possible within its container. 👇

h2("r-fit-text") { +"FIT" }

            

or

                
FIT
              
            

FIT

HELLO WORLD

BOTH THESE TITLES USE FIT-TEXT

Stretch

Makes an element as tall as possible while remaining within the slide bounds. 👇

h2 { +"Stretch Example" }
img(classes = "r-stretch") {
  src = "revealjs/assets/image2.png"
}
p { +"Image byline" }

            

or

                
Stretch Example
                
                
Image byline
                
👇
              
            

Stretch Example

Image byline

👇

Stack

Stacks multiple elements on top of each other, for use with fragments. 👇

h2 { +"Stack Example" }
div("r-stack") {
  p("fragment fade-in-then-out") { +"One" }
  p("fragment fade-in-then-out") { +"Two" }
  p("fragment fade-in-then-out") { +"Three" }
  p("fragment fade-in-then-out") { +"Four" }
}
div("r-stack") {
  val kitten = "https://placekitten.com"
  img(classes = "fragment") {
    src = "$kitten/450/300"; width = "450"; height = "300"
  }
  img(classes = "fragment") {
    src = "$kitten/300/450"; width = "300"; height = "450"
  }
  img(classes = "fragment") {
    src = "$kitten/400/400"; width = "400"; height = "400"
  }
}

            

Stack Example

HStack 👇

Stacks multiple elements horizontally.

h2 { +"HStack Example 👇" }
div("r-hstack") {
  p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
  p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
  p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
}

            

HStack Example 👇

VStack 👇

Stacks multiple elements vertically.

h2 { +"VStack Example 👇" }
div("r-vstack") {
  p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
  p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
  p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
}

            

VStack Example 👇