Jump to main content Jump to doc navigation

Fred Elements are made of HTML with specific attributes. The markup can be enhanced using Twig and Element Settings.

Custom Tags


To make themes more portable {{template.theme_dir}} can be used in an element as a dynamic placeholder reference to the template's theme directory (e.g. '/assets/theme/default/'.)

Markup Examples

<!-- Simple Element -->
<div class="panel">
    <p data-fred-name="header_text">Default Value</p>

<!-- Enhanced Element -->
<div class="panel {{ panel_class }}">
    <p data-fred-name="panel_text">Default Value</p>

    {% if cta_link %}
    <a class="btn {{ cta_class }}" href="{{ cta_link }}">{{ cta_text }}</a>
    {% endif %}

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.



$0 per month—let's make that $500!

Learn more