When to use
- To offer content only on small screens.
- For tailored content that fits small spaces.
- To keep such content from getting lost on large screens.
When not to use
- For content only on large screens—use a Desktop component.
- For more control over what appears on different screen sizes—use a Hide component.
Component status
Figma | React | iOS | Android |
|---|---|---|---|
N/A | Released | N/A | N/A |
Behavior
Offer similar content to everyone
Users approach their interactions with your content similarly no matter their device. They’re looking for information or to accomplish a task. If a user can’t find that information or feature on your mobile site or app, they assume you don’t have it.
Make sure your content is available everywhere. Change its form so it fits best in the space available and fits user expectations for the device. But keep it present.
Don’t hide anything essential
Even with differently sized screens, users still have the same basic needs. Make sure that even if you hide things, users can still accomplish their main tasks.
Use progressive disclosure to keep content available but initially out of sight. In this way, you hide content on specific screens but offer clear alternatives to get to it.