Skip to main content

Slide Layouts

SlideLayout

SlideLayout is a set of helper components used to create slides from a set of pre-defined layouts, so you can avoid dealing with things like layout primitives.

SlideLayout.Full

A full-slide layout

PropsTypeExample
...slidePropsSlide Props

Full layout example slide

SlideLayout.Center

A layout with centered content

PropsTypeExample
...slidePropsSlide Props

Center layout example slide

SlideLayout.TwoColumn

A layout with two columns

PropsTypeExample
...slidePropsSlide Props
leftReactNode<Heading>Left</Heading>
rightReactNode<Heading>Right</Heading>

Two column layout example slide

SlideLayout.List

A layout with a list and an optional title

PropsTypeRequiredExample
...slidePropsSlide Props
itemsReactNode[]['Hello', <Text>World</Text>]
titlestringMy list slide
titlePropsHeading Props{ color: 'red' }
animateListItemsbooleantrue
listPropsList Props{ backgroundColor: 'purple' }

List layout example slide

SlideLayout.Section

A layout with a section title

PropsTypeRequiredExample
...slidePropsSlide Props
sectionPropsText Props{ fontSize: "48px" }

Section layout example slide

SlideLayout.Statement

A layout with a centered statement

PropsTypeRequiredExample
...slidePropsSlide Props
statementPropsText Props{ fontSize: "48px" }

Statement layout example slide

SlideLayout.BigFact

A layout to present a fact in large font

PropsTypeRequiredExampleDefault
childrenReactNode100%
...slidePropsSlide Props
factInformationReactNodeFact information
factPropsText Props{ fontSize: "100px" }
factInformationPropsText Props{ fontSize: "48px" }
factFontSizestring150px250px

Big fact layout example slide

SlideLayout.Quote

A quote and attribution layout

PropsTypeRequiredExample
...slidePropsSlide Props
childrenReactNodeTo be, or not to be
attributionReactNodeWilliam Shakespeare
quotePropsText Props{ fontSize: "100px" }
attributionPropsText Props{ fontSize: "48px" }

Quote layout example slide Long quote layout example slide

SlideLayout.Code

A layout with a single code pane and an optional title

PropsTypeRequiredExample
...slidePropsSlide Props
childrenstringconst Component = (props: componentProps): JSX.Element = {...}
languagebooleanfalse
titlestringShow me the code!
titlePropsHeading Props{ color: 'red' }
codePanePropsCodePaneProps

Code layout example slide

SlideLayout.MultiCodeLayout

A layout with more than one code block: multiple code panes with optional descriptions, and an optional slide title.

PropsTypeRequiredExample
...slidePropsSlide Props
codeBlocksCodeBlock[][{ code: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', codePaneProps: {...} }, {...}]
titlestringShow me the code!
titlePropsHeading Props{ color: 'red' }
numColumnsnumber{2}

where

type CodeBlock = Omit<CodePaneProps, 'children'> & {
code: CodePaneProps['children'];
description?: string | ReactNode;
descriptionProps?: ComponentProps<typeof Text>;
}

MultiCode layout example slide

SlideLayout.HorizontalImage

A layout with one image per slide: a horizontal/landscape image and an optional title or description.

PropsTypeRequiredExample
...slidePropsSlide Props
srcstringhttps://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg
altstringFred the dog looking at the camera
imgPropsImgHTMLAttributes<HTMLImageElement>{ style: { objectFit: 'contain' } }
imgContainerPropsComponentProps<typeof FlexBox>{ style: { border: '8px solid white' } }
titlestring \| ReactNodeFred is a 100% pure bred good boy!
titlePropsText Props{ color: 'red' }
descriptionstring \| ReactNodeand we love him
descriptionPropsText Props{ color: 'white' }
objectFitReact.CSSProperties['objectFit']cover

Horizontal image layout with title example slide Horizontal image layout with title and description example slide

SlideLayout.VerticalImage

A layout with one image per slide: a vertical/portrait image with a bulleted list and an optional title.

PropsTypeRequiredExample
...slidePropsSlide Props
srcstringhttps://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg
altstringFred the dog looking at the camera
imgPropsImgHTMLAttributes<HTMLImageElement>{ style: { objectFit: 'contain' } }
imgContainerPropsComponentProps<typeof FlexBox>{ style: { border: '8px solid white' } }
positionright | leftright
titlestring \| ReactNodeFred is a 100% pure bred good boy!
titlePropsText Props{ color: 'red' }
listItemsReactNode[]['brown hair', 'brown eyes', 'happy boy']
animateListItemsbooleantrue
listTypeordered | unorderedunordered
listPropsComponentProps<typeof UnorderedList & typeof OrderedList>{ color: 'white' }
objectFitReact.CSSProperties['objectFit']cover

Vertical image layout, positioned left example slide Vertical image layout, positioned right example slide

SlideLayout.ThreeUpImage

A layout with three images per slide: a primary, a top and bottom images.

PropsTypeRequiredExample
...slidePropsSlide Props
primaryImagePane & { position?: 'right' \| 'left'; }{src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg', alt: 'Fred the dog looking at the camera' }
topImagePane{src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg', alt: 'Fred the dog looking at the camera' }
bottomImagePane{src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg', alt: 'Fred the dog looking at the camera' }

where

type ImagePane = {
src: string;
alt: string;
imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
imgContainerProps?: ComponentProps<typeof FlexBox>;
objectFit?: React.CSSProperties['objectFit'];
}

Three up image layout, positioned left example slide

SlideLayout.FullBleedImage

A layout with an image that covers the entire slide.

PropsTypeRequiredExample
...slidePropsSlide Props
srcstringhttps://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg
altstringFred the dog looking at the camera
imgPropsImgHTMLAttributes<HTMLImageElement>{ style: { objectFit: 'contain' } }
imgContainerPropsComponentProps<typeof FlexBox>{ style: { border: '8px solid white' } }
objectFitReact.CSSProperties['objectFit']cover

Full bleed image layout example slide