@berlitz/spacer v2.0.9

Spacer

The Spacer component creates space between your other Components/Elements. Use the size Prop to specify the size of the space, based on the theme size variables. This comes with responsive breakpoints. This can be used as a wrapper which will act as padding around the wrapped children.

Installation

yarn add @berlitz/spacer

Props

Usage

import React from 'react'
import Spacer from '@berlitz/spacer'

const MyApp = () => 
<App>
    <Hero>
    <Section>
        <H1>Boo!</H1>
        <LeadText> Hello Friend 👻</LeadText>
        <Spacer size="xl"/>
        <Content>Some Paragraph</Content>
        <Spacer
            noBottom
            size="xl"
            breakpoints={{
                lg: 'md',
                xl: 'xxl',
            }}
        >
            <Image/>
        </Spacer>
        <ThreeCatPillars/>
    </Section>
    <Footer/>
</App>

When to use this component

• Rather than extending components just for space, this component comes very handy.
• Quickly Add space anywhere necessary