Layout Helper Examples

Fit Text

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


					  

FIT

FIT

HELLO WORLD

BOTH THESE TITLES USE FIT-TEXT

Stretch

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


					  

Stretch Example

Image byline

Stretch Example

Image byline

Stack

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


					  
<img class="fragment" width="450" height="300" src="..."> <img class="fragment" width="300" height="450" src="..."> <img class="fragment" width="400" height="400" src="...">

Stack Example

One

Two

Three

Four

Stack Example

fade-in-then-out fragments

HStack

Stacks multiple elements horizontally.


					  
<img width="450" height="300" src="..."> <img width="300" height="450" src="..."> <img width="400" height="400" src="...">

HStack Example

One

Two

Three

VStack

Stacks multiple elements horizontally.


					  
<img width="450" height="300" src="..."> <img width="300" height="450" src="..."> <img width="400" height="400" src="...">

VStack Example

One

Two

Three