Hidden content
Hide classes allow for distint content displays for mobile and desktop displays. Using combinations of these, you can present the same content in two forms, one that displays for one set of viewports, and one which displays for another.
This component requires different window sizes to show off its effects. Resize your window to see the example more accurately.
Examples and Code
Section titled “Examples and Code”
Open Full Example
<div class="hide hide--mobile">This text will be hidden on mobile widths.</div>
<div class="hide hide--tablet">This text will be hidden on tablet widths.</div>
<div class="hide hide--desktop">This text will be hidden on desktop widths.</div>
<div class="hide hide--tablet hide--desktop">This text will only show on mobile.</div>
<div class="hide hide--tablet hide--mobile">This text will only show on desktop.</div>Guidance
Section titled “Guidance”Usage Guidance
Section titled “Usage Guidance”- Use hide classes to prevent an alternate display of the same content
- Use hide classes to remove redundant or unnecessary content from constrained mobile views
- Don’t use the hide classes to hide critical content from any viewport
Styles
Section titled “Styles”| Classname | Effect | Reason to Use |
|---|---|---|
hide--mobile | Content will not display on mobile viewports | Use to hide a desktop-oriented display that will not work on mobile displays |
hide--tablet | Content will not display on tablet viewports | Use in conjunction with hide--desktop or hide--mobile |
hide--desktop | Content will not display on desktop viewports | Use to hide mobile oriented content that will have an alternative on desktop |