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

Class	Styles	Use case
`is-hidden`	`display: none !important;`	Remove an element from layout.
`is-block`	`display: block !important;`	Render an element as a block-level box.
`is-inline`	`display: inline !important;`	Keep an element inline with surrounding content.
`is-inline-block`	`display: inline-block !important;`	Keep inline flow while allowing width and height.
`is-flex`	`display: flex !important;`	Create a block-level Flexbox container.
`is-inline-flex`	`display: inline-flex !important;`	Create an inline Flexbox container.
`is-grid`	`display: grid !important;`	Create a block-level CSS Grid container.
`is-table`	`display: table !important;`	Use table layout behavior.
`is-table-row`	`display: table-row !important;`	Render an element as a table row.
`is-table-cell`	`display: table-cell !important;`	Render an element as a table cell.

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.

Prefix	Min width	Example
`sm:`	`576px`	`sm:is-flex`
`md:`	`768px`	`md:is-grid`
`lg:`	`1024px`	`lg:is-hidden`
`xl:`	`1280px`	`xl:is-block`

Responsive class reference

Responsive variants are available for the most common layout states.

Base	Small	Medium	Large	Extra large
`is-hidden`	`sm:is-hidden`	`md:is-hidden`	`lg:is-hidden`	`xl:is-hidden`
`is-block`	`sm:is-block`	`md:is-block`	`lg:is-block`	`xl:is-block`
`is-flex`	`sm:is-flex`	`md:is-flex`	`lg:is-flex`	`xl:is-flex`
`is-inline-flex`	`sm:is-inline-flex`	`md:is-inline-flex`	`lg:is-inline-flex`	`xl:is-inline-flex`
`is-grid`	`sm:is-grid`	`md:is-grid`	`lg:is-grid`	`xl:is-grid`

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

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.