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.


  • modmore
  • modmore
  • Jens Wittmann – Gestaltung & Entwicklung
  • Raffy
  • eydolan
  • Digital Penguin
  • Fabian Christen
  • Dannevang Digital
  • deJaya
  • Sepia River Studios
  • Following Sea
  • Anton Tarasov
  • Lefthandmedia
  • Nick Clark
  • Chris Fickling
  • Murray Wood
  • YJ
  • CrewMark
  • Richard


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

Learn more