Accessibility Breakpoints Modifiers
The .o-sr-only
and .o-not-sr-only
utility classes can be used with breakpoints modifiers.
A typical use case is to hide a text on small screens and show it on larger screens.
<span class="o-not-sr-only o-sm-sr-only">Settings</span>
XXS and below
link XXS and belowo-xxs-sr-only
o-xxs-not-sr-only
XS and below
link XS and belowo-xs-sr-only
o-xs-not-sr-only
SM and below
link SM and belowo-sm-sr-only
o-sm-not-sr-only
MD and below
link MD and belowo-md-sr-only
o-md-not-sr-only
LG and below
link LG and belowo-lg-sr-only
o-lg-not-sr-only
XL and below
link XL and belowo-xl-sr-only
o-xl-not-sr-only
XXL and below
link XXL and belowo-xxl-sr-only
o-xxl-not-sr-only