1.1.0 • Published 4 months ago
@spark-web/hidden v1.1.0
title: Hidden storybookPath: accessibility-hidden--default
isExperimentalPackage: false
Conditionally display content for different screen sizes and media types.
<Stack gap="small">
<Hidden below="wide">
<Placeholder label="Hidden below wide" height={64} />
</Hidden>
<Hidden above="desktop">
<Placeholder label="Visible below wide" height={64} />
</Hidden>
</Stack>
Examples
Responsive
Hide content responsively using the above
and below
props, which accept a
breakpoint name.
<Stack gap="small">
<Hidden below="wide">
<Placeholder label="1. Hidden below wide" height={64} />
</Hidden>
<Hidden below="desktop">
<Placeholder label="2. Hidden below desktop" height={64} />
</Hidden>
<Hidden below="tablet">
<Placeholder label="3. Hidden below tablet" height={64} />
</Hidden>
<Hidden above="mobile">
<Placeholder label="4. Hidden above mobile" height={64} />
</Hidden>
<Hidden above="tablet">
<Placeholder label="5. Hidden above tablet" height={64} />
</Hidden>
<Hidden above="desktop">
<Placeholder label="6. Hidden above desktop" height={64} />
</Hidden>
</Stack>
Conditionally display content for print using the on
prop.
<Stack gap="small">
<Hidden on="screen">
<Placeholder label="Hidden on screen" height={64} />
</Hidden>
<Hidden on="print">
<Placeholder label="Hidden on print" height={64} />
</Hidden>
</Stack>