Visibility
The visibility utility provides two simple classes to control element display:
hidden to hide elements and
visible to show them. These work with
responsive prefixes to create device-specific layouts.
Visibility Across Devices
See how visibility classes behave across different screen sizes. Each column represents a different device size.
<!-- Always visible -->
<div class="visible">visible</div>
<!-- Always hidden -->
<div class="hidden">hidden</div>
<!-- Hidden by default, visible on medium+ -->
<div class="hidden md:visible">md:visible</div>
<!-- Visible by default, hidden on medium+ -->
<div class="visible md:hidden">md:hidden</div>
<!-- Visible by default, hidden on large -->
<div class="visible lg:hidden">lg:hidden</div>Basic Classes
The foundation of visibility control - these classes work on all devices without any conditions.
| Class | Effect | CSS Output |
|---|---|---|
hidden
|
Hide element on all devices |
display: none
|
visible
|
Show element on all devices |
display: block
|
Size-Based Visibility
Control visibility based on screen size. Remember: size prefixes are mobile-first (apply at that size and larger).
| Class | Effect | Active On |
|---|---|---|
sm:hidden
|
Hide on small screens and larger | All devices (600px+) |
sm:visible
|
Show on small screens and larger | All devices (600px+) |
md:hidden
|
Hide on medium screens and larger | TRMNL OG, TRMNL V2 (800px+) |
md:visible
|
Show on medium screens and larger | TRMNL OG, TRMNL V2 (800px+) |
lg:hidden
|
Hide on large screens | TRMNL V2 (1024px+) |
lg:visible
|
Show on large screens | TRMNL V2 (1024px+) |
Bit-Depth Visibility
Control visibility based on display color capabilities. Bit-depth prefixes target specific displays only.
| Class | Effect | Active On |
|---|---|---|
1bit:hidden
|
Hide on monochrome displays | TRMNL OG only |
1bit:visible
|
Show on monochrome displays | TRMNL OG only |
2bit:hidden
|
Hide on 4-shade grayscale displays | TRMNL OG V2 only |
2bit:visible
|
Show on 4-shade grayscale displays | TRMNL OG V2 only |
4bit:hidden
|
Hide on 16-shade grayscale displays | TRMNL V2, Kindle 2024 only |
4bit:visible
|
Show on 16-shade grayscale displays | TRMNL V2, Kindle 2024 only |
Device-Specific Targeting
Combine size and bit-depth prefixes to target specific devices. Use the pattern:
size:bit-depth:visibility
| Class | Target Device | Screen Specs |
|---|---|---|
md:1bit:visible
|
Show only on TRMNL OG | 800px, monochrome |
md:2bit:visible
|
Show only on TRMNL OG V2 | 800px, 4-shade grayscale |
lg:4bit:visible
|
Show only on TRMNL V2 | 1024px, 16-shade grayscale |
sm:4bit:visible
|
Show only on Kindle 2024 | 600px, 16-shade grayscale |