NewsKit Mobile Logo

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
Props
import React from 'react';
import { ScreenReaderOnly } from 'newskit';

export default () => (
  <ScreenReaderOnly id="sr-only">
    Element description
  </ScreenReaderOnly>
);

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 container
displaystring
CSS attribute for display.More information
xsboolean
Render when in xs breakpoint
smboolean
Render when in sm breakpoint
mdboolean
Render when in md breakpoint
lgboolean
Render when in lg breakpoint
xlboolean
Render when in xl breakpoint
targetDevicesArray<Devices>
Array of devices for which the content is hidden with higher priority than the above breakpoints

Visible Playground

Visible Content
Props
Xs
Sm
Md
Lg
Xl
import React from 'react';
import { Visible } from 'newskit';

export default () => <Visible xs>Visible Content</Visible>;

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 container
displaystring
CSS attribute for displayMore information
xsboolean
Hidden when in xs breakpoint
smboolean
Hidden when in xs breakpoint
mdboolean
Hidden when in xs breakpoint
lgboolean
Hidden when in xs breakpoint
xlboolean
Render when in xl breakpoint
targetDevicesArray<Devices>
Array of devices for which the content is hidden with higher priority than the above breakpoints

Hidden Playground

Hidden Content
Props
Xs
Sm
Md
Lg
Xl
import React from 'react';
import { Hidden } from 'newskit';

export default () => <Hidden xs>Hidden Content</Hidden>;