Features

Citizen includes several built-in features designed to enhance the functionality and interactivity of your wiki.

Command palette

The command palette is a powerful tool for quick navigation and actions. Learn more about how to configure and use it in the command palette documentation.

Utility classes

Citizen provides a set of utility classes to help you 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>

Performance mode

Performance mode strips back animations and visual effects so the skin stays smooth on low-end hardware. Learn how it works and how to hook into it in the performance mode documentation.

Dark mode support

Some images, especially black text or icons, might not be visible in dark mode. You can invert their colors using the --filter-invert variable.

Simply add this CSS rule to the element containing the image:

filter: var( --filter-invert );