Display - ArchCSS

Display values

Use these classes to set the display property of any element. All classes support responsive prefixes (sm:, md:, lg:, xl:).

Class	CSS Property	Description
`.block`	`display: block`	Block-level element, takes full width
`.inline-block`	`display: inline-block`	Inline but respects width & height
`.inline`	`display: inline`	Inline element, flows with text
`.flex`	`display: flex`	Block-level flex container
`.inline-flex`	`display: inline-flex`	Inline flex container
`.grid`	`display: grid`	Block-level grid container
`.inline-grid`	`display: inline-grid`	Inline grid container
`.table`	`display: table`	Behaves like a `<table>` element
`.inline-table`	`display: inline-table`	Inline-level table
`.table-caption`	`display: table-caption`	Behaves like a `<caption>` element
`.table-cell`	`display: table-cell`	Behaves like a `<td>` element
`.table-column`	`display: table-column`	Behaves like a `<col>` element
`.table-column-group`	`display: table-column-group`	Behaves like a `<colgroup>` element
`.table-footer-group`	`display: table-footer-group`	Behaves like a `<tfoot>` element
`.table-header-group`	`display: table-header-group`	Behaves like a `<thead>` element
`.table-row`	`display: table-row`	Behaves like a `<tr>` element
`.table-row-group`	`display: table-row-group`	Behaves like a `<tbody>` element
`.flow-root`	`display: flow-root`	Creates a new block formatting context
`.contents`	`display: contents`	Removes the element's box, children flow normally
`.list-item`	`display: list-item`	Renders with a list-item box and marker

.block - fills the full width .inline-block .inline-block

.inline flows with surrounding .inline text content.

.flex child .flex child .flex child

.grid .grid .grid .grid

<div class="block">Block element</div>
<span class="inline-block">Inline block</span>
<span class="inline">Inline</span>
<div class="flex">...</div>
<div class="grid">...</div>

Hidden

Use .hidden to set display: none !important, completely removing an element from the document flow. Use .show to reset it back to its default display value.

Note: .hidden uses !important and will override other display utilities. Use responsive variants like md:hidden to conditionally hide elements at specific breakpoints.

Visible element .hidden - not rendered Visible element

<!-- Hide an element completely -->
<div class="hidden">Not rendered</div>

<!-- Reset display -->
<div class="show">Visible again</div>

Responsive visibility

All display utilities accept responsive prefixes following ArchCSS's mobile-first breakpoint system. Prefix any display class with a breakpoint to apply it at that screen size and above.

Prefix	Breakpoint	Applies at
none	All screens	Always applied
`sm:`	`≥ 576px`	Small devices and up
`md:`	`≥ 768px`	Medium devices and up
`lg:`	`≥ 992px`	Large devices and up
`xl:`	`≥ 1200px`	Extra-large devices and up

Common responsive patterns:

Class	Behaviour
`hidden md:block`	Hidden on mobile, block from md up
`block md:hidden`	Visible on mobile, hidden from md up
`hidden lg:flex`	Hidden until lg, then flex
`flex md:grid`	Flex on mobile, grid from md up
`sm:flex`	Flex from sm breakpoint up
`lg:hidden`	Hides element from lg breakpoint up

Always visible Hidden on mobile (md:block) Mobile only (md:hidden)

<!-- Nav that collapses on mobile -->
<nav class="flex">
  <a href="/">Logo</a>

  <!-- Hidden on mobile, shown from md up -->
  <ul class="hidden md:flex">
    <li><a href="/about">About</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>

  <!-- Hamburger: visible on mobile only -->
  <button class="block md:hidden">Menu</button>
</nav>