Visibility
There are a number of ways to show/hide text visually and in the context of a screen reader. Use the inspect tools to see what the gap below is.
completely hidden text
mostly hidden text
Only seen by screen readers
<p class="cads-hide">completely hidden text</p>
<p class="cads-invisible">mostly hidden text</p>
<p class="cads-sr-only">Only seen by screen readers</p>
<p aria-hidden="true">
This text can be seen, but won't be read by a screen reader.
</p>Show from breakpoint up
Show this text from the md breakpoint and above
Show this text from the lg breakpoint and above
<p class="cads-show-md-up">Show this text from the md breakpoint and above</p>
<p class="cads-show-lg-up">Show this text from the lg breakpoint and above</p>Show for breakpoint only
Show this text at the md breakpoint
Show this text at the lg breakpoint
<p class="cads-show-md-only">Show this text at the md breakpoint</p>
<p class="cads-show-lg-only">Show this text at the lg breakpoint</p>Hide from breakpoint up
<p class="cads-hide-md-up">Hide this text from the md breakpoint and above</p>
<p class="cads-hide-lg-up">Hide this text from the lg breakpoint and above</p>Hide for breakpoint only
<p class="cads-hide-md-only">Hide this text for the md breakpoint</p>
<p class="cads-hide-lg-only">Hide this text for the lg breakpoint</p>Questions and contributions
All design system discussions take place in the #design-system Slack channel. For current issues, roadmap and other info see the Github project board and related issues.