LYTSExamples

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>

</>