Utility classes

Citizen provides a set of utility classes you can use directly in wikitext, templates, and gadgets to format content and add interactivity without writing custom CSS.

Layout

Control the positioning and flow of your content.

Class	Description
.floatright	Floats content to the right. Stacks vertically on small screens.
.floatleft	Floats content to the left. Stacks vertically on small screens.
.floatnone	Clears floating alignment.
.citizen-overflow	Wraps content in a horizontally scrollable container with indicators.
.citizen-overflow-sticky-header	Makes an element sticky within a .citizen-overflow container.

Element sticky header

You can make headers sticky within a scrollable area (like a wide table) by adding the citizen-overflow-sticky-header class. This works for both div elements and wikitables.

For div elements:

<div class="citizen-overflow">
  <div class="citizen-overflow-sticky-header">I am sticky 👍</div>
  <div>I am not sticky 👎</div>
</div>

For wikitables:

{| class="wikitable"
|- class="citizen-overflow-sticky-header"
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}

Tables

Enhance the look and feel of your tables.

Class	Description
.wikitable	Applies standard Citizen styling. Automatically wrapped in .citizen-overflow.
.wikitable--border	Adds vertical borders.
.wikitable--stripe	Adds zebra striping for better readability.
.wikitable--fluid	Expands the table to fill 100% of the available width.
.citizen-table-nowrap	Prevents the table from being wrapped in a scrollable container.

Interaction

Add interactive elements to your pages.

Class	Description
.citizen-search-trigger	Opens the site search interface when clicked.

Search trigger

You can create buttons or links that trigger the search popup using the .citizen-search-trigger class.

To create a simple search button:

<div class="citizen-search-trigger">Click me to open search</div>

To prefill the search query (for example, to search only templates):

<div class="citizen-search-trigger" data-citizen-search-prefill="Template:">Click me to search templates</div>