Custom display variants

Last updated: 22 May, 2026

This article explains how display variants in Formcentric can be used and individually extended. In addition to using predefined classes, it shows how to define custom variants and integrate them into the desired appearance via CSS or templates.

Using display variants

Many themes support display variants via classes, which can be applied to the markup from the Editor configuration.

Important basic rules:

style_class is intended for additional CSS classes
field_width is an independent property and should be used for width classes
Comma-separated classes from the Editor are normalised to spaces at runtime

Common examples from the built-in themes:

mwf-s, mwf-m, mwf-l for field widths
mwf-separator for separator variants in supported themes
fc-file__dashboard--inline and fc-file__dashboard--modal for file upload display variants

Creating and using your own display variants

To use your own display variants, you will need three things:

A class or a variant assignment in the Editor
A theme or CSS that actually evaluates this class
Templates that pass the style_class to the matching DOM element (optional)

Defining the CSS class in the Editor

Specify a class in the Editor or in your field configuration, for example:

my-highlight
my-compact
fc-file__dashboard--modal

Creating and including the CSS file

Step 1: Create the CSS file


Lm15LWhpZ2hsaWdodCB7CiAgICBib3JkZXI6IDJweCBzb2xpZCAjMGY2MmZlOwogICAgYm9yZGVyLXJhZGl1czogOHB4Owp9Cg==

Step 2: Include the CSS file in HTML or build

Conventionally with a <link>
In the framework via the normal CSS or SCSS import
In a theme directly in the corresponding partial files

Step 3: Define CSS rules

Where possible, work against stable theme or wrapper classes and not against arbitrary DOM depths.

Adjusting specific elements

Recommendations for more precise adjustments:

Open the browser’s developer tools
Check the element actually rendered and its classes
Evaluate whether the class ends up on the external field container or an inner wrapper
Then target the CSS accordingly

In the case of file uploads or more complex fields, always check which element in the template receives the style_class.