Visibility

Visibility utilities control whether an element is visible while preserving its layout space. Unlike display utilities, visibility does not remove an element from the document flow — the element still occupies its normal space even when hidden.

These utilities are useful for progressive disclosure, responsive interfaces, reserved layout space, conditional UI states, and table and data layouts.

All visibility utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	CSS	Common use
Base	`is-visible`, `is-invisible`, `is-collapse`	`visibility: visible \| hidden \| collapse`	Show, hide-in-place, or collapse table rows.
Responsive sm	`sm:is-visible`, `sm:is-invisible`	`576px+`	Visibility changes at small breakpoint.
Responsive md	`md:is-visible`, `md:is-invisible`	`768px+`	Visibility changes at medium breakpoint.
Responsive lg	`lg:is-visible`, `lg:is-invisible`	`1024px+`	Visibility changes at large breakpoint.
Responsive xl	`xl:is-visible`, `xl:is-invisible`	`1280px+`	Visibility changes at extra-large breakpoint.

Usage

<div class="is-visible">
  Visible Content
</div>

<div class="is-invisible">
  Hidden Content
</div>

Visible

Use is-visible to explicitly restore visibility to an element. This is the default browser behavior, but the class is useful when overriding a previously set is-invisible at a breakpoint.

<div class="is-visible">
  FrontAlign
</div>

Invisible

Use is-invisible to hide an element while keeping its layout space reserved. The element remains in the document flow and continues to occupy its normal dimensions.

<div class="is-invisible">
  Hidden Notification
</div>

Collapse

Use is-collapse to collapse table rows and columns where the browser supports it. Primarily intended for table-related content — behavior may vary outside table elements.

<tr class="is-collapse">
  <td>Hidden Row</td>
</tr>

Combining with opacity

Visibility utilities work well alongside opacity utilities for layered visual states.

<div class="is-visible opacity-75">
  Secondary Content
</div>

Combining with transitions

For smoother interactions, pair visibility patterns with transition utilities.

<div class="transition-opacity opacity-0">
  Animated Content
</div>

Responsive visibility scale

Class	Breakpoint	Effect
`sm:is-visible`	`576px+`	Visible from small screens and above.
`sm:is-invisible`	`576px+`	Hidden from small screens and above.
`md:is-visible`	`768px+`	Visible from medium screens and above.
`md:is-invisible`	`768px+`	Hidden from medium screens and above.
`lg:is-visible`	`1024px+`	Visible from large screens and above.
`lg:is-invisible`	`1024px+`	Hidden from large screens and above.
`xl:is-visible`	`1280px+`	Visible from extra-large screens and above.
`xl:is-invisible`	`1280px+`	Hidden from extra-large screens and above.

Real-world examples

Hide on mobile, show on tablet

<div class="is-invisible md:is-visible">
  Tablet And Desktop Content
</div>

Show on mobile, hide on desktop

<div class="is-visible lg:is-invisible">
  Mobile Navigation
</div>

Desktop-only information

<div class="is-invisible xl:is-visible">
  Advanced Controls
</div>

Reserved alert space

<div class="is-invisible">
  Error Message Placeholder
</div>

Responsive sidebar

<aside class="is-invisible xl:is-visible">
  Sidebar Content
</aside>

Progressive disclosure

<div class="is-invisible md:is-visible">
  Additional Information
</div>

Choosing the right utility

Use case	Recommended utility
Normal visible content	`is-visible`
Hide while preserving layout space	`is-invisible`
Remove element from layout entirely	`is-hidden` (display utility)
Collapse table rows or columns	`is-collapse`
Show on tablet and above	`is-invisible md:is-visible`
Hide on desktop	`is-visible lg:is-invisible`
Desktop-only sidebar or controls	`is-invisible xl:is-visible`

Usage notes

Use visibility utilities when layout space should remain reserved after hiding — the element keeps its width and height and surrounding content does not shift.
Use display utilities (is-hidden) when the element should be removed from the document flow entirely and surrounding content should reflow.
is-invisible is the correct choice for reserved alert placeholders, loading skeletons, and progressive reveal effects where layout stability matters.
Use is-collapse primarily for table rows and columns — behavior on non-table elements is inconsistent across browsers.
Combine is-invisible with responsive md:is-visible or lg:is-visible to show content progressively at wider breakpoints.
Pair visibility utilities with opacity and transition utilities for smoother show/hide experiences without layout shifts.
is-visible is useful as an explicit reset when overriding a previously applied is-invisible at a larger breakpoint.