Key-Value Table

Key-Value Table

Section with optional CSS class, optional title, and key-value rows. Renders either as a single-column table (default) or as a card grid with 2, 3, or 4 columns (responsive: columns stack on narrow viewports, e.g. ≤480px).

In static .mjml templates

• Table layout: Fragment key-value-table.mjml — placeholders {{KEY_VALUE_CSS_CLASS}}, {{KEY_VALUE_TITLE}}, {{TABLE_ROWS}} (HTML <tr> rows).
• Card grid layout: Fragment key-value-cards.mjml — placeholders {{KEY_VALUE_CSS_CLASS}}, {{KEY_VALUE_TITLE}}, {{KEY_VALUE_CARD_SECTIONS}} (raw MJML sections).

In API (TypeScript)

import { buildMjmlKeyValueSection } from '~/utils/emailTemplates';

// Table (default): single column, mj-table
buildMjmlKeyValueSection({
  title: 'Webinar-Details',
  cssClass: 'details',
  rows: [
    { label: 'Dauer:', value: '60 Minuten' },
    { label: 'Datum:', value: '27. Juni 2025' },
  ],
});

// Card grid: 2, 3, or 4 columns, responsive
buildMjmlKeyValueSection({
  title: 'Details',
  cssClass: 'details',
  rows: [
    { label: 'Dauer:', value: '60 Min' },
    { label: 'Datum:', value: '27. Juni 2025' },
    { label: 'Sprache:', value: 'Deutsch' },
  ],
  columns: 3,
});

title and cssClass are optional. When columns is 2, 3, or 4, the section uses key-value-cards.mjml and renders as a responsive card grid; otherwise it uses key-value-table.mjml. Used for contact data, metadata, and detail blocks.