| 1 | ---
|
| 2 | title: Hidden
|
| 3 | storybookPath: accessibility-hidden--default
|
| 4 | isExperimentalPackage: false
|
| 5 | ---
|
| 6 |
|
| 7 | Conditionally display content for different screen sizes and media types.
|
| 8 |
|
| 9 | ```jsx live
|
| 10 | <Stack gap="small">
|
| 11 | <Hidden below="wide">
|
| 12 | <Placeholder label="Hidden below wide" height={64} />
|
| 13 | </Hidden>
|
| 14 | <Hidden above="desktop">
|
| 15 | <Placeholder label="Visible below wide" height={64} />
|
| 16 | </Hidden>
|
| 17 | </Stack>
|
| 18 | ```
|
| 19 |
|
| 20 | ## Examples
|
| 21 |
|
| 22 | ### Responsive
|
| 23 |
|
| 24 | Hide content responsively using the `above` and `below` props, which accept a
|
| 25 | breakpoint name.
|
| 26 |
|
| 27 | ```jsx live
|
| 28 | <Stack gap="small">
|
| 29 | <Hidden below="wide">
|
| 30 | <Placeholder label="1. Hidden below wide" height={64} />
|
| 31 | </Hidden>
|
| 32 | <Hidden below="desktop">
|
| 33 | <Placeholder label="2. Hidden below desktop" height={64} />
|
| 34 | </Hidden>
|
| 35 | <Hidden below="tablet">
|
| 36 | <Placeholder label="3. Hidden below tablet" height={64} />
|
| 37 | </Hidden>
|
| 38 | <Hidden above="mobile">
|
| 39 | <Placeholder label="4. Hidden above mobile" height={64} />
|
| 40 | </Hidden>
|
| 41 | <Hidden above="tablet">
|
| 42 | <Placeholder label="5. Hidden above tablet" height={64} />
|
| 43 | </Hidden>
|
| 44 | <Hidden above="desktop">
|
| 45 | <Placeholder label="6. Hidden above desktop" height={64} />
|
| 46 | </Hidden>
|
| 47 | </Stack>
|
| 48 | ```
|
| 49 |
|
| 50 | ### Print
|
| 51 |
|
| 52 | Conditionally display content for print using the `on` prop.
|
| 53 |
|
| 54 | ```jsx live
|
| 55 | <Stack gap="small">
|
| 56 | <Hidden on="screen">
|
| 57 | <Placeholder label="Hidden on screen" height={64} />
|
| 58 | </Hidden>
|
| 59 | <Hidden on="print">
|
| 60 | <Placeholder label="Hidden on print" height={64} />
|
| 61 | </Hidden>
|
| 62 | </Stack>
|
| 63 | ```
|
| 64 |
|
| 65 | ## Props
|
| 66 |
|
| 67 | <PropsTable displayName="Hidden" />
|
| 68 |
|
| 69 | [data-attribute-map]:
|
| 70 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|