mdx-deck-layouts

MDX-Deck Layouts samples. These layouts/templates help to make the presentation more realistic and not boring.
Please create an issue if you want specific layouts for the presentations.

VerticalFlex.js

Creates a flex-box layout of direct components stacked vertically (columns).

Example (In combination with Split Layout):

HorizontalFlex.js

Creates a flex-box layout of direct components stacked horizontally, better than conventional LeftRight layout if the number of elements are greater than 2.

Example:

Provider.js

Updated Provider file with an added Footer which displays the slide count as ‘Slide 1 of N’ apart from the dots at the bottom.

Example:

ImageHorizontal.js

Flex box of N horizontal images with proper spacing and padding to ensure that they look beautiful :)

GridLayout Example

Mix of Vertical layout with HorizontalFlex can give you a matrix like view if you want to make the slides more stylish.

Code:

---
export default VerticalLayout   
<Appear>
<h4>Title Comes Here</h4>
<h4><HorizontalFlex key="1"><h6>Short Title Here </h6><h6>Description of the title<br></br> And continued here</h6></HorizontalFlex></h4>
<h4><HorizontalFlex key="2"><h6>Short Title Here</h6><h6>Description of the title<br></br> And continued here</h6></HorizontalFlex></h4>
</Appear>

Example: