Honeycomb

hidden

The hiding helpers allow you to hide elements on a certain breakpoints.

import { Box, hiddenHelpers } from '@flixbus/honeycomb-react';
const { hidden, hiddenZero, hiddenXS, hiddenSM, hiddenMD, hiddenLG, hiddenXL } = hiddenHelpers();

<>
<Box extraClasses={hidden}>Always hidden</Box>
<Box extraClasses={hiddenZero}>Hidden in breakpoint: <strong>zero</strong></Box>
<Box extraClasses={hiddenXS}>Hidden in breakpoint: <strong>xs</strong></Box>
<Box extraClasses={hiddenSM}>Hidden in breakpoint: <strong>sm</strong></Box>
<Box extraClasses={hiddenMD}>Hidden in breakpoint: <strong>md</strong></Box>
<Box extraClasses={hiddenLG}>Hidden in breakpoint: <strong>lg</strong></Box>
<Box extraClasses={hiddenXL}>Hidden in breakpoint: <strong>xl</strong></Box>
</>