Classes

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

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 horizontal scroll container. See Overflow handling.
.citizen-overflow-sticky-header	Marks the last sticky row of an element inside a .citizen-overflow container — everything from the element's start through the marked row stays visible while the rest scrolls. See Overflow handling.

Tables

Enhance the look and feel of your tables.

Class	Description
.wikitable	Applies standard Citizen styling. Automatically wrapped for 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 for overflow.

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>