Display

Use display utilities to control how an element participates in layout. They help you hide elements, switch between block and inline rendering, create Flexbox or Grid containers, and change layout behavior across responsive breakpoints without writing custom CSS.

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

Quick reference

Usage

Apply display utilities directly in your markup.

<div class="is-hidden">
  Hidden content
</div>

<span class="is-block">
  A span rendered as a block element
</span>

<div class="is-flex gap-2 align-items-center">
  <span>Label</span>
  <button class="button is-primary">Action</button>
</div>

<div class="is-grid grid-cols-2 gap-3">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Basic layout switch

Use a base display class for the default state, then add a responsive class to change the layout at a breakpoint.

<div class="is-block md:is-flex gap-3 align-items-center">
  <div>Content</div>
  <button class="button is-primary">Action</button>
</div>

Mobile navigation

Show a mobile trigger on small screens and reveal the desktop navigation at larger breakpoints.

<button class="button is-light lg:is-hidden">
  Menu
</button>

<nav class="is-hidden lg:is-flex gap-3 align-items-center">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <a href="#">Components</a>
</nav>

Responsive card grid

Start with a simple stacked layout, then switch to Grid when there is enough horizontal space.

<section class="is-block lg:is-grid grid-cols-3 gap-4">
  <article class="surface rounded-3 p-4">Card 1</article>
  <article class="surface rounded-3 p-4">Card 2</article>
  <article class="surface rounded-3 p-4">Card 3</article>
</section>

Inline actions

Use is-inline-flex when an element should stay inline while still supporting alignment and spacing.

<a href="#" class="is-inline-flex align-items-center gap-1">
  <span>View documentation</span>
  <span aria-hidden="true">→</span>
</a>

Desktop-only toolbar

Hide advanced controls on small screens and show them when the layout has enough space.

<div class="is-hidden md:is-flex gap-2 align-items-center">
  <button class="button is-light">Filter</button>
  <button class="button is-light">Export</button>
  <button class="button is-primary">Create</button>
</div>

Responsive display

FrontAlign follows a mobile-first model. A class without a prefix applies immediately; a prefixed class applies from that breakpoint and above.

Responsive class reference

Responsive variants are available for the most common layout states.

Responsive variants are intentionally limited to common layout switches. This keeps the CSS smaller while covering the patterns used most often in real interfaces.

Contents

.is-contents {
  display: contents;
}

display: contents removes an element's own box from rendering entirely — no size, no position, nothing to paint — while its children render exactly as if they were direct children of its parent. This makes it possible to satisfy a Grid or Flex layout's "direct children only" rule without dropping the wrapper element from the DOM, which is often required for semantic HTML, a component boundary, or a framework's rendering model.

<div class="grid grid-cols-3 gap-4">
  <section class="is-contents">
    <div>Item 1</div>
    <div>Item 2</div>
  </section>
  <div>Item 3</div>
</div>

Here, <section> contributes no box of its own to the grid — Item 1 and Item 2 are placed directly into the grid's column tracks as if <section> weren't there, while still existing in the DOM for semantics, styling hooks, or a component's own internal structure.

Responsive Contents

Like is-hidden, is-block, is-flex, is-inline-flex, and is-grid, is-contents accepts the same sm:, md:, lg:, and xl: prefixes described in Responsive display.

<section class="md:is-contents">
  <div>Item 1</div>
  <div>Item 2</div>
</section>

Below md, <section> keeps its browser-default display: block, rendering as a normal wrapper — useful if you want it to look like a distinct card or group on small screens. At md and up, it switches to display: contents and its children join the parent Grid or Flex layout directly.

Overriding Other Display Utilities

Unlike most display utilities in the Quick reference table, is-contents and its responsive variants do not use !important. That's intentional, but it has one consequence worth knowing: if an element already has a display value set through a utility that does carry !important (is-block, is-hidden, is-grid, and others), a later is-contents — or a breakpoint variant like md:is-contents — will not be able to override it, !important always wins regardless of source order or the media query it's inside.

is-contents reliably overrides an element's browser-default display value (as in the example above, where no other display utility was applied), or another utility that also omits !important. If you need to switch an element that already carries an !important display utility over to is-contents at a breakpoint, remove the earlier utility instead of stacking them.

An Accessibility Caveat

display: contents doesn't just remove an element's box — in some browser and assistive-technology combinations, it has also stripped the element's accessible role and properties from the accessibility tree, particularly on interactive elements like <button>, <a>, and table cells. Support has improved significantly in recent browser versions, but the safest rule is: reach for .is-contents on layout wrappers (<div>, <section>) that don't themselves carry interactive or semantic meaning, and avoid it on elements whose role needs to reach assistive technology.

Usage notes

• Use is-hidden only when the element should be removed from layout and accessibility flow.
• Prefer is-inline-flex for links, badges and compact actions that need icon alignment.
• Use is-flex for one-dimensional alignment and is-grid for multi-column layouts.
• Combine display utilities with spacing, alignment, Flexbox and Grid utilities instead of creating custom layout classes.
• Keep mobile behavior as the base state, then enhance with sm:, md:, lg: and xl: variants.
• Do not use display utilities for spacing or alignment. Use gap, margin, padding, Flexbox, Grid and alignment utilities for those concerns.
• Do not use is-hidden for animated UI states such as dropdowns, drawers, accordions or modals. Those should rely on component state and runtime behavior.
• Use is-contents to satisfy a Grid or Flex layout's direct-children requirement without dropping a wrapper element from the DOM — check the accessibility caveat before applying it to interactive elements, and see Overriding Other Display Utilities before combining it with !important-based display classes.