Visibility
ScreenReaderOnly
ScreenReaderOnly Overview
The ScreenReaderOnly component wraps an element making sure that it is not visible to the user but still readable by a screen reader.
ScreenReaderOnly Props
childrenstring
The description of an element is passed as the child of the component.idstring
When provided the id can be used to reference this element, for example from a `aria-describedby` attribute.ScreenReaderOnly Playground
Element description
Visible
Visible Overview
The Visible is a container component. The content will only be visible
if the screen size matches the applied breakpoint.
Visible Props
childrenany
Content of the visiblity containerdisplaystring
CSS attribute for display.More informationxsboolean
Render when in xs breakpointsmboolean
Render when in sm breakpointmdboolean
Render when in md breakpointlgboolean
Render when in lg breakpointxlboolean
Render when in xl breakpointtargetDevicesArray<Devices>
Array of devices for which the content is hidden with higher priority than the above breakpointsVisible Playground
Visible Content
Hidden
Hidden Overview
The Hidden is a container component. The content will only be hidden
if the screen size matches the applied breakpoint.
Hidden Props
childrenany
Content of the visiblity containerdisplaystring
CSS attribute for displayMore informationxsboolean
Hidden when in xs breakpointsmboolean
Hidden when in xs breakpointmdboolean
Hidden when in xs breakpointlgboolean
Hidden when in xs breakpointxlboolean
Render when in xl breakpointtargetDevicesArray<Devices>
Array of devices for which the content is hidden with higher priority than the above breakpoints