components
Hidden (code)
Hide elements.
Hidden on print.
Hidden on screen. But use VisuallyHidden if you want it to be read by screenreaders.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| above | 'xs''sm''md''lg' | - | - | Hidden above breakpoint. |
| as | String | - | - | Change the rendered html-element. |
| below | 'sm''md''lg''xl' | - | - | Hidden below breakpoint. |
| className | String | - | - | Extend classNames. |
| Boolean | - | - | Hidden on print. | |
| screen | Boolean | - | - | Hidden on screen. |
System Props
This component does not allow any system props.
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
NOTE: Use screenreader when possible
If you want to hide an element on the screen, but to be read by screenreaders, use the Screenreader component instead.
Above
The following text is hidden above xs: Hidden above xs.
The following text is hidden above sm: Hidden above sm.
The following text is hidden above md: Hidden above md.
The following text is hidden above lg: Hidden above lg.
Below
The following text is hidden below sm: Hidden below sm.
The following text is hidden below md: Hidden below md.
The following text is hidden below lg: Hidden below lg.
The following text is hidden below xl: Hidden below xl.
The following text is hidden on print:
Try to print me.
Screen
The following text is hidden on screen:
Nope, not visible on screen.