Visibility
Show or hide an element and set its display type. Hidden and visible controls plus display helpers like flex, grid, and inline, each with responsive and bit-depth variants for device-specific layouts.
Visibility Across Devices
Every device carries a size class: sm, md, or lg. Each column below targets one of them, so switching the device in the screen picker changes which column has content.
<!-- 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>
<!-- Display as flex on medium+ -->
<div class="hidden md:flex">md:flex</div>
<!-- Display as grid on large screens -->
<div class="hidden lg:grid">lg:grid</div>Display Utilities
Control how elements are displayed with specific display types. These classes set the CSS display property.
| Class | Effect | CSS Output |
|---|---|---|
hidden
|
Hide element completely |
display: none
|
visible
|
Display as block element |
display: block
|
block
|
Display as block element |
display: block
|
inline
|
Display as inline element |
display: inline
|
inline-block
|
Display as inline block element |
display: inline-block
|
flex
|
Display as flex container |
display: flex
|
grid
|
Display as grid container |
display: grid
|
inline-grid
|
Display as inline grid container |
display: inline-grid
|
table
|
Display as table element |
display: table
|
table-row
|
Display as table row element |
display: table-row
|
table-cell
|
Display as table cell element |
display: table-cell
|
Responsive Display Control
All display utilities take the size prefixes. They are mobile-first, so a prefix applies on its own size class and every larger one. See Responsive Responsive Adapt styles to the device's size class, orientation, and bit depth using variant prefixes The Responsive system adapts a layout to the device it renders on. Size-based breakpoints follow the size class each device carries, and Bit-depth variants follow its color capabilities. Combine them to control how your content appears across TRMNL's range of devices. for the size class each device carries.
| Example Class | Effect | Active On |
|---|---|---|
sm:hidden
|
Hide on small screens and larger | sm, md, lg (every device) |
md:flex
|
Display as flex on medium screens and larger | md, lg |
lg:grid
|
Display as grid on large screens | lg |
sm:inline-block
|
Display as inline-block on small screens and larger | sm, md, lg (every device) |
<!-- Basic responsive display -->
<div class="hidden md:block">Show as block on medium+</div>
<div class="block md:flex">Block by default, flex on medium+</div>
<div class="hidden lg:inline-grid">Show as inline-grid on large screens</div>
<!-- Complex responsive layouts -->
<div class="inline sm:inline-block md:flex lg:grid">
Changes display type at each breakpoint
</div>
<!-- Hide on mobile, show different layouts -->
<div class="hidden sm:flex md:grid lg:table">
Different layout per screen size
</div>
<!-- Table-style structures -->
<div class="table">
<div class="table-row">
<div class="table-cell">Cell A</div>
<div class="table-cell">Cell B</div>
</div>
</div>Bit-Depth Display Control
All display utilities take the bit-depth prefixes. These are not progressive the way the size prefixes are: 2bit: applies on 2-bit screens and nowhere else.
| Example Class | Effect | Active On |
|---|---|---|
1bit:hidden
|
Hide on monochrome displays | Every 1-bit profile (TRMNL OG, Playdate, Frame, and the color panels that dither to black and white) |
2bit:flex
|
Display as flex on 4-shade grayscale displays | Every 2-bit profile (TRMNL OG V2, Waveshare 5.8" B/W) |
4bit:grid
|
Display as grid on 16-shade grayscale displays | Every 4-bit profile (TRMNL V2, Kindle 2024, reMarkable Paper 2, and most Kobo and Inkplate panels) |
Device-Specific Display Control
Combine a size and a bit-depth prefix on any display utility to narrow the target to one group of panels. Use the pattern size:bit-depth:display.
| Example Class | Target Device | Effect |
|---|---|---|
md:1bit:block
|
1-bit screens at md or lg (TRMNL OG, Frame) | Display as block |
md:2bit:flex
|
2-bit screens at md or lg (TRMNL OG V2, Waveshare 5.8" B/W) | Display as flex |
lg:4bit:grid
|
4-bit screens at lg (TRMNL V2, Kindle Scribe, reMarkable Paper 2, and 11 more) | Display as grid |
sm:4bit:table
|
Every 4-bit screen, since sm is the smallest size class | Display as table |
<!-- Device-specific layouts -->
<div class="hidden md:1bit:block md:2bit:flex lg:4bit:grid">
Different display types per device generation
</div>
<!-- Optimize for ePaper performance -->
<div class="table 1bit:block 2bit:flex">
Simple layouts for lower bit-depth displays
</div>
<!-- Complex responsive + bit-depth targeting -->
<div class="hidden sm:inline md:1bit:block md:2bit:flex lg:4bit:grid">
Progressive enhancement across all device capabilities
</div>Dark Mode Display Control
Visibility utilities support dark-first prefixes for screen dark mode targeting.
Use dark: to show or hide content by screen dark mode.
Light-mode behavior is the default state.
<!-- Hide only in dark mode -->
<div class="dark:hidden">Dark mode hides this</div>
<!-- Show only in dark mode -->
<div class="hidden dark:block">Dark mode shows this</div>
<!-- Combined targeting -->
<div class="dark:md:portrait:2bit:hidden">
Hidden on dark medium+ portrait 2-bit screens
</div>