Skip to content

Latest commit

 

History

History
52 lines (31 loc) · 1.76 KB

README.md

File metadata and controls

52 lines (31 loc) · 1.76 KB
Raw

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): image

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: image

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: Image of Updated Footer

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:

image