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.

Small (600px)
visible md:hidden
Medium (800px)
Large (1024px)
<!-- 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