Page sections

Use Columns to create landing page sections, which collapse to a single column on small sizes.

// Edit the live code below
<>
<Columns collapseAt='30em' style={{ minHeight: '40vh' }}>
<Stack yAlign='center' xAlign='center'>
<BatteryCharging size='42px' />
So charged.
</Stack>
<Stack yAlign='center' xAlign='center'>
<Gem size='42px' />
Much wow.
</Stack>
<Stack yAlign='center' xAlign='center'>
<Smile size='42px' />
Such happy.
</Stack>
</Columns>
<Columns collapseAt='30em' ratio='1/2' style={{ minHeight: '40vh' }}>
<Box xAlign='center' yAlign='center'>
<BatteryCharging size='42px' />
</Box>
<Stack yAlign='center'>
<b>Batteries included</b>
<p>LYTS comes with many useful components out of the box to make your life easier.</p>
<a>Learn more</a>
</Stack>
</Columns>
</>