Newskit Logo

Components

Visible, Hidden & ScreenReaderOnly

The collection of these three components can be used to show and hide content at different breakpoints.

Status

Supported

Introduced

v0.2.0
View code

Status

Supported

Introduced

Components

Visibility is comprised of three components.

Visible

Content will be visible if the screen size matches the applied breakpoint.

Hidden

Content will be hidden if the screen size matches the applied breakpoint.

ScreenReaderOnly

Wraps an element making sure that it is not visible to the user, but still readable by a screen reader.

Code Example

Note

You can toggle on the breakpoint indicator at the top of the screen with the ~ key (above the Tab key).

Screen Reader Only

The 'ScreenReaderOnly' component wraps an element as the child of the component, making sure that it is not visible to the user but still readable by a screen reader, using the id to reference it.

Usage

The following guidance describes how and when to appropriately use Visible, Hidden, and ScreenReaderOnly.

Do

Use ‘Visible’ or ‘Hidden’ where SEO is a consideration, to avoid layout shift.

Do not

Avoid hiding elements that are required by users across breakpoints. Have equivalent functionality for different breakpoints, eg a Drawer for top-level navigation items on xs or sm breakpoints where space is limited.

Accessibility Considerations

Visibility has the following accessibility considerations:

Focus order

When used 'Hidden’ excludes content from focus order when the screen size matches the applied breakpoint.

WAI-ARIA

When an id is provided, it can be used to reference this element, for example from an aria-describedby attribute.

Note

Be careful to test at all breakpoints when using ‘Hidden’ or ‘Visible’.

SEO Considerations

Use ‘Visible’ or ‘Hidden’ where SEO is a consideration, to avoid layout shift.

API

'Visible', 'Hidden' and 'ScreenReaderOnly' have a range of props that can be used to define an appropriate experience for different use cases.

Visible Component Props

‘Visible’ has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
children
React.ReactNode
Content of the visiblity container.
display
string
CSS attribute for display.

For more information on the display CSS property, please refer to the documentation here
xs
boolean
Render when in xs breakpoint.
sm
boolean
Render when in sm breakpoint.
md
boolean
Render when in md breakpoint.
lg
boolean
Render when in lg breakpoint.
xl
boolean
Render when in xl breakpoint.
targetDevices
Array<Devices>
Array of devices for which the content is visible with higher priority than the above breakpoints.
Hidden Component Props

‘Hidden’ has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
children
React.ReactNode
Content of the hidden container.
display
string
CSS attribute for display.

For more information on the display CSS property, please refer to the documentation here
xs
boolean
Hidden when in xs breakpoint.
sm
boolean
Hidden when in sm breakpoint.
md
boolean
Hidden when in md breakpoint.
lg
boolean
Hidden when in lg breakpoint.
xl
boolean
Hidden when in xl breakpoint.
targetDevices
Array<Devices>
Array of devices for which the content is hidden with higher priority than the above breakpoints.
ScreenReaderOnly Component Props

‘ScreenReaderOnly’ has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
children
string
The description of an element is passed as the child of the component.
id
string
If provided, the id can be used to reference this element, for example from an
aria-describedby
attribute.

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?