Content Elements (Contao)

Reusable Contao 4.13 content elements for VTXM projects.

This bundle contains presentation-ready content elements only. It intentionally does not include structural layout or container elements.

Structural elements such as article-insert, layout-preset and content-grid are handled separately.

Features

Content elements included:

• Iconbox
• Members Grid
• Live Teaser
• Quote Teaser
• Announcement
• Tabs
• Accordion
• Timeline

The bundle is theme-agnostic:

• no frontend CSS included
• no JavaScript included
• stable template hooks
• Contao cssID support preserved

Content Elements

The bundle registers these content elements in the vtxm category:

• vtxm_iconbox
• vtxm_members_grid
• vtxm_live_teaser
• vtxm_quote_teaser
• vtxm_announcement
• vtxm_tabs
• vtxm_accordion
• vtxm_timeline

Usage

Add a new content element from the vtxm category.

Typical use cases:

• vtxm_iconbox for service boxes, benefits or compact feature blocks
• vtxm_members_grid for team / band member layouts
• vtxm_live_teaser for concerts, events or live announcements
• vtxm_quote_teaser for quotes, reviews or press snippets
• vtxm_announcement for short announcements and callouts
• vtxm_tabs for tabbed content groups
• vtxm_accordion for FAQ-style expandable content
• vtxm_timeline for history, milestones or chronological entries

Recommended Role

Use this bundle for reusable content blocks.

Recommended separation:

• article-insert = article include module
• layout-preset = macro layout / split layout
• content-grid = micro layout / grid container
• content-elements = reusable content blocks

Example structure:

Content Grid
└── Source article: Services
      ├── Iconbox
      ├── Iconbox
      ├── Iconbox
      └── Iconbox

MultiColumnWizard Fields

These elements use MultiColumnWizard fields in the Contao backend:

• vtxm_tabs
• vtxm_accordion
• vtxm_timeline

Editors can manage entries in structured rows instead of writing JSON manually.

Notes

No styling or JavaScript behavior is included by design.

Use your project CSS and JavaScript to define:

• spacing
• grid behavior
• colors
• animations
• tab switching
• accordion behavior

All elements preserve Contao cssID support through the shared AbstractWrappedContentElement.

The iconboxIcon value is escaped in the template. Use it for icon class names, labels or short markers. SVG or HTML icon markup is intentionally not rendered raw in this version.

HTML Hooks

Root classes:

• .ce_vtxm_iconbox
• .ce_vtxm_members_grid
• .ce_vtxm_live_teaser
• .ce_vtxm_quote_teaser
• .ce_vtxm_announcement
• .ce_vtxm_tabs
• .ce_vtxm_accordion
• .ce_vtxm_timeline

Additional hooks are available inside the individual templates.

Templates

Templates are located at:

src/Resources/contao/templates/

Templates:

• ce_vtxm_iconbox.html5
• ce_vtxm_members_grid.html5
• ce_vtxm_live_teaser.html5
• ce_vtxm_quote_teaser.html5
• ce_vtxm_announcement.html5
• ce_vtxm_tabs.html5
• ce_vtxm_accordion.html5
• ce_vtxm_timeline.html5

Requirements

This bundle requires:

• Contao 4.13
• PHP 8.0+
• menatwork/contao-multicolumnwizard-bundle

Installation (via Composer / Contao Manager)

Add the package definition to your Contao project composer.json or install it via your configured repository setup.

Example package reference:

{
  "repositories": [
    {
      "type": "package",
      "package": {
        "name": "vtxm-h/content-elements",
        "version": "1.0.2",
        "type": "contao-bundle",
        "license": "MIT",
        "description": "Reusable Contao 4.13 content elements for VTXM projects.",
        "dist": {
          "url": "https://github.com/vtxm-h/content-elements/archive/refs/tags/v1.0.2.zip",
          "type": "zip"
        },
        "autoload": {
          "psr-4": {
            "Vendor\\ContentElementsBundle\\": "src/"
          }
        },
        "require": {
          "php": "^8.0",
          "contao/core-bundle": "^4.13",
          "contao/manager-plugin": "^2.0",
          "menatwork/contao-multicolumnwizard-bundle": "^3.6"
        },
        "extra": {
          "contao-manager-plugin": "Vendor\\ContentElementsBundle\\ContaoManager\\Plugin"
        }
      }
    }
  ]
}

Install:

composer require vtxm-h/content-elements

Then update the Contao database so the new tl_content fields are created.

Compatibility

Contao 4.13 PHP 8.0+

License

MIT