Usage

Wrap content using the BreakPoint component and define max-width or min-width for the content to be revealed. When hidden, it also removes itself from DOM.

<div className='m-t-2'>
    <Eyebrow>Current width: </Eyebrow>
    <BreakPoint max='tablet'>mobile</BreakPoint>
    <BreakPoint min='tablet' max='desktop'>tablet</BreakPoint>
    <BreakPoint min='desktop' max='large'>large</BreakPoint>
    <BreakPoint min='large'>widescreen</BreakPoint>
</div>

Max width

title: Resize the browser to see the change
noResize: true
---
<Stack spacing={2}>
    <BreakPoint max='mobile'>
        <Card className='fs-2'>smaller than mobile</Card>
    </BreakPoint>
    <BreakPoint max='desktop'>
        <Card className='fs-2'>smaller than tablet</Card>
    </BreakPoint>
    <BreakPoint max='large'>
        <Card className='fs-2'>smaller than large</Card>
    </BreakPoint>
    <BreakPoint max='widescreen'>
        <Card className='fs-2'>smaller than widescreen</Card>
    </BreakPoint>

    {/* component to show when nothing meets `max` prop */}
    <BreakPoint min='widescreen'><Eyebrow>nothing to display</Eyebrow></BreakPoint>
</Stack>

Min width

title: Resize the browser to see the change
noResize: true
---
<Stack spacing={2}>
    <BreakPoint min='mobile'>
        <Card className='fs-2'>larger than mobile</Card>
    </BreakPoint>
    <BreakPoint min='desktop'>
        <Card className='fs-2'>larger than tablet</Card>
    </BreakPoint>
    <BreakPoint min='large'>
        <Card className='fs-2'>larger than large</Card>
    </BreakPoint>
    <BreakPoint min='widescreen'>
        <Card className='fs-2'>larger than widescreen</Card>
    </BreakPoint>

    {/* component to show when nothing meets `min` prop */}
    <BreakPoint max='mobile'><Eyebrow>nothing to display</Eyebrow></BreakPoint>
</Stack>

Max and Min width

title: Resize the browser to see the change
noResize: true
---
<Stack spacing={2}>
    <BreakPoint min='mobile' max='tablet'>
        <Card className='fs-2'>between mobile and tablet</Card>
    </BreakPoint>
    <BreakPoint min='tablet' max='desktop'>
        <Card className='fs-2'>between tablet and desktop</Card>
    </BreakPoint>
    <BreakPoint min='desktop' max='large'>
        <Card className='fs-2'>between desktop and large</Card>
    </BreakPoint>
    <BreakPoint min='large' max='widescreen'>
        <Card className='fs-2'>between large and widescreen</Card>
    </BreakPoint>

    {/* component to show when nothing meets `min` or `max` prop */}
    <BreakPoint max='mobile'><Eyebrow>nothing to display</Eyebrow></BreakPoint>
    <BreakPoint min='widescreen'><Eyebrow>nothing to display</Eyebrow></BreakPoint>
</Stack>

Best Practices

  • When hiding the content, create an alternative method to reveal the content.
  • The BreakPoint should be used to improve the responsive layout of a screen not to just fit things on a screen.