{"id":341,"date":"2022-02-14T16:18:33","date_gmt":"2022-02-14T16:18:33","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=341"},"modified":"2026-03-10T10:33:53","modified_gmt":"2026-03-10T09:33:53","slug":"alertbox","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/alertbox\/","title":{"rendered":"AlertBox"},"content":{"rendered":"<jgu-base-pageheader react-props=\"{\n    &quot;items&quot;: [\n        {\n            &quot;box&quot;: {\n                &quot;index&quot;: &quot;Module&quot;,\n                &quot;title&quot;: &quot;Alertbox ( = Alarmbox) und Alertbox Raster \\\/Alertbox Grid&quot;,\n                &quot;link&quot;: {\n                    &quot;url&quot;: &quot;&quot;,\n                    &quot;title&quot;: &quot;mehr erfahren&quot;\n                }\n            },\n            &quot;color&quot;: &quot;dark&quot;,\n            &quot;image&quot;: {\n                &quot;url&quot;: &quot;https:\\\/\\\/via.placeholder.com\\\/1600x1050&quot;\n            },\n            &quot;imgCredit&quot;: &quot;&quot;,\n            &quot;video&quot;: false\n        }\n    ],\n    &quot;type&quot;: &quot;small&quot;,\n    &quot;align&quot;: &quot;full&quot;,\n    &quot;quicklinks&quot;: {\n        &quot;show&quot;: false,\n        &quot;selects&quot;: []\n    },\n    &quot;useBreadcrumb&quot;: false\n}\">\n<\/jgu-base-pageheader>\n\n<jgu-base-section react-props=\"{&quot;color&quot;:&quot;light&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;padding&quot;:&quot;medium&quot;}\">\n<div class=\"jgu-bgsection bg bg-light \"><div class=\"content padding-medium\"><jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Alertbox Raster (EN Alertbox Grid) im hellgrauen Abschnitt&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n<jgu-base-alertboxgrid style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 2em;\">\n\t\n<jgu-base-alertbox react-props=\"{\n    &quot;image&quot;: {\n        &quot;isSet&quot;: true,\n        &quot;src&quot;: &quot;&quot;,\n        &quot;url&quot;: null,\n        &quot;alt&quot;: &quot;&quot;,\n        &quot;id&quot;: null,\n        &quot;title&quot;: &quot;jgu-persons&quot;,\n        &quot;caption&quot;: &quot;test-03&quot;,\n        &quot;credit&quot;: &quot;&quot;\n    },\n    &quot;headline&quot;: &quot;Alertbox mit einem Pin-Icon aus der Werkzeugauswahl - Title&quot;,\n    &quot;subline&quot;: &quot;Diese Box ist standardm\\u00e4\\u00dfig hellgrau hervorgehoben. Die Alertbox kann in einem Raster dargestellt werden&quot;,\n    &quot;children&quot;: &quot;Sie unterscheidet sich vom Notification Banner dadurch, da\\u00df das Banner f\\u00fcr die gesamte Seitenbreite gebaut wurde.&quot;,\n    &quot;icon&quot;: &quot;thumbtack-solid&quot;,\n    &quot;headlineColor&quot;: &quot;dark&quot;,\n    &quot;iconOverHeadline&quot;: false,\n    &quot;isPreview&quot;: false\n}\">\n    \n<\/jgu-base-alertbox>\n\n<jgu-base-alertbox react-props=\"{\n    &quot;image&quot;: {\n        &quot;isSet&quot;: true,\n        &quot;src&quot;: &quot;&quot;,\n        &quot;url&quot;: &quot;https:\\\/\\\/www.pages.gitlab.rlp.net\\\/relaunch-jgu\\\/wordpress\\\/demo-assets\\\/images\\\/jgu-persons.svg&quot;,\n        &quot;alt&quot;: &quot;&quot;,\n        &quot;id&quot;: null,\n        &quot;title&quot;: &quot;jgu-persons&quot;,\n        &quot;caption&quot;: &quot;test-03&quot;,\n        &quot;credit&quot;: &quot;&quot;\n    },\n    &quot;headline&quot;: &quot;Alertbox ohne Icon&quot;,\n    &quot;children&quot;: &quot;Aber mit einem Bild.&quot;,\n    &quot;iconOverHeadline&quot;: true,\n    &quot;headlineColor&quot;: &quot;dark&quot;,\n    &quot;subline&quot;: &quot;&quot;,\n    &quot;icon&quot;: &quot;&quot;,\n    &quot;isPreview&quot;: false\n}\">\n    \n<\/jgu-base-alertbox>\n\n<jgu-base-alertbox react-props=\"{\n    &quot;headline&quot;: &quot;Icon \\&quot;vor\\&quot; der \\u00dcberschrift, tats\\u00e4chlich oberhalb der Headline, rechts in den Einstellungen ausw\\u00e4hlbar&quot;,\n    &quot;children&quot;: &quot;.&quot;,\n    &quot;icon&quot;: &quot;exclamation-triangle-solid&quot;,\n    &quot;iconOverHeadline&quot;: true,\n    &quot;headlineColor&quot;: &quot;dark&quot;,\n    &quot;subline&quot;: &quot;&quot;,\n    &quot;isPreview&quot;: false\n}\">\n    \n<\/jgu-base-alertbox>\n\n<\/jgu-base-alertboxgrid>\n<\/div><\/div>\n<\/jgu-base-section>\n\n<jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;h1&quot;,\n        &quot;tag&quot;: &quot;h2.h1&quot;\n    },\n    &quot;heading&quot;: &quot;Alertbox Raster vor dem Standardwei\\u00dfen Hintergrund&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n<jgu-base-alertboxgrid style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 2em;\">\n\t\n<jgu-base-alertbox react-props=\"{\n    &quot;image&quot;: {\n        &quot;isSet&quot;: true,\n        &quot;src&quot;: &quot;&quot;,\n        &quot;url&quot;: null,\n        &quot;alt&quot;: &quot;&quot;,\n        &quot;id&quot;: null,\n        &quot;title&quot;: &quot;jgu-persons&quot;,\n        &quot;caption&quot;: &quot;test-03&quot;,\n        &quot;credit&quot;: &quot;&quot;\n    },\n    &quot;headline&quot;: &quot;Die Iconfarbe ist standardm\\u00e4\\u00dfig dunkelblau&quot;,\n    &quot;subline&quot;: &quot;Rechts in den Einstellungen w\\u00e4hlen alternativdie Icon Farbe Rot aus.&quot;,\n    &quot;icon&quot;: &quot;bullhorn-solid&quot;,\n    &quot;iconColor&quot;: &quot;red&quot;,\n    &quot;headlineColor&quot;: &quot;dark&quot;,\n    &quot;children&quot;: &quot;&quot;,\n    &quot;iconOverHeadline&quot;: false,\n    &quot;isPreview&quot;: false\n}\">\n    \n<\/jgu-base-alertbox>\n\n<jgu-base-alertbox react-props=\"{\n    &quot;image&quot;: {\n        &quot;isSet&quot;: true,\n        &quot;src&quot;: &quot;&quot;,\n        &quot;url&quot;: &quot;https:\\\/\\\/www.pages.gitlab.rlp.net\\\/relaunch-jgu\\\/wordpress\\\/demo-assets\\\/images\\\/jgu-persons.svg&quot;,\n        &quot;alt&quot;: &quot;&quot;,\n        &quot;id&quot;: null,\n        &quot;title&quot;: &quot;jgu-persons&quot;,\n        &quot;caption&quot;: &quot;test-03&quot;,\n        &quot;credit&quot;: &quot;&quot;\n    },\n    &quot;headline&quot;: &quot;Listen Elemente gliedern den Inhalt der Alertbox&quot;,\n    &quot;icon&quot;: &quot;bullhorn-solid&quot;,\n    &quot;iconOverHeadline&quot;: true,\n    &quot;headlineColor&quot;: &quot;dark&quot;,\n    &quot;subline&quot;: &quot;&quot;,\n    &quot;children&quot;: &quot;&quot;,\n    &quot;isPreview&quot;: false\n}\">\n    \n<jgu-base-listitem react-props=\"{\n    &quot;icon&quot;: &quot;exclamation-triangle-solid&quot;,\n    &quot;title&quot;: &quot;Listenelement mit aufklappbarem Inhalt&quot;,\n    &quot;uuid&quot;: &quot;1656937140101&quot;,\n    &quot;showExpandableContent&quot;: true,\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;showInActions&quot;: false,\n    &quot;allowNesting&quot;: true,\n    &quot;expandableContent&quot;: &quot;&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;\n    }\n}\">\n    \n<jgu-base-listitem react-props=\"{\n    &quot;icon&quot;: &quot;address-card-solid&quot;,\n    &quot;title&quot;: &quot;Foo&quot;,\n    &quot;uuid&quot;: &quot;1656942603661&quot;,\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;showInActions&quot;: false,\n    &quot;allowNesting&quot;: true,\n    &quot;showExpandableContent&quot;: false,\n    &quot;expandableContent&quot;: &quot;&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;\n    }\n}\">\n    \n<\/jgu-base-listitem>\n\n<jgu-base-listitem react-props=\"{\n    &quot;icon&quot;: &quot;external-link-alt-solid&quot;,\n    &quot;title&quot;: &quot;Bar&quot;,\n    &quot;uuid&quot;: &quot;1656942608416&quot;,\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;showInActions&quot;: false,\n    &quot;allowNesting&quot;: true,\n    &quot;showExpandableContent&quot;: false,\n    &quot;expandableContent&quot;: &quot;&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;\n    }\n}\">\n    \n<\/jgu-base-listitem>\n\n<jgu-base-listitem react-props=\"{\n    &quot;icon&quot;: &quot;phone-solid&quot;,\n    &quot;title&quot;: &quot;&lt;a href=\\&quot;tel:112\\&quot; data-type=\\&quot;tel\\&quot; data-id=\\&quot;tel:112\\&quot;&gt;Rufen Sie einfach an&lt;\\\/a&gt;!&quot;,\n    &quot;uuid&quot;: &quot;1656942611820&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;tel:112&quot;\n    },\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;showInActions&quot;: false,\n    &quot;allowNesting&quot;: true,\n    &quot;showExpandableContent&quot;: false,\n    &quot;expandableContent&quot;: &quot;&quot;\n}\">\n    \n<\/jgu-base-listitem>\n\n<\/jgu-base-listitem>\n\n<jgu-base-listitem react-props=\"{\n    &quot;icon&quot;: &quot;lightbulb-solid&quot;,\n    &quot;title&quot;: &quot;Noch ein Element&quot;,\n    &quot;uuid&quot;: &quot;1656937167946&quot;,\n    &quot;showExpandableContent&quot;: true,\n    &quot;expandableContent&quot;: &quot;Der Inhalt ab der zweiten Zeile kann ausgeblendet werden&quot;,\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;showInActions&quot;: false,\n    &quot;allowNesting&quot;: true,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;\n    }\n}\">\n    \n<\/jgu-base-listitem>\n\n<\/jgu-base-alertbox>\n\n<\/jgu-base-alertboxgrid>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Alertbox ohne Raster&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n<jgu-base-alertbox react-props=\"{\n    &quot;icon&quot;: &quot;address-card-solid&quot;,\n    &quot;iconOverHeadline&quot;: true,\n    &quot;headline&quot;: &quot;&quot;,\n    &quot;headlineColor&quot;: &quot;dark&quot;,\n    &quot;subline&quot;: &quot;&quot;,\n    &quot;children&quot;: &quot;&quot;,\n    &quot;isPreview&quot;: false\n}\">\n    \n<\/jgu-base-alertbox>    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-341","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/pageheader {\"items\":[{\"box\":{\"index\":\"Module\",\"title\":\"Alertbox ( = Alarmbox) und Alertbox Raster \/Alertbox Grid\",\"link\":{\"url\":\"\",\"title\":\"mehr erfahren\"}},\"color\":\"dark\",\"image\":{\"url\":\"https:\/\/via.placeholder.com\/1600x1050\"},\"imgCredit\":\"\",\"video\":false}],\"type\":\"small\"} \/-->\n\n<!-- wp:jgu\/section {\"color\":\"light\"} -->\n<div class=\"jgu-bgsection bg bg-light \"><div class=\"content padding-medium\"><!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Alertbox Raster (EN Alertbox Grid) im hellgrauen Abschnitt\"} \/-->\n\n<!-- wp:jgu\/alertbox-grid -->\n<!-- wp:jgu\/alertbox {\"image\":{\"isSet\":true,\"src\":\"\",\"url\":null,\"alt\":\"\",\"id\":null,\"title\":\"jgu-persons\",\"caption\":\"test-03\",\"credit\":\"\"},\"headline\":\"Alertbox mit einem Pin-Icon aus der Werkzeugauswahl - Title\",\"subline\":\"Diese Box ist standardm\u00e4\u00dfig hellgrau hervorgehoben. Die Alertbox kann in einem Raster dargestellt werden\",\"children\":\"Sie unterscheidet sich vom Notification Banner dadurch, da\u00df das Banner f\u00fcr die gesamte Seitenbreite gebaut wurde.\",\"icon\":\"thumbtack-solid\"} \/-->\n\n<!-- wp:jgu\/alertbox {\"image\":{\"isSet\":true,\"src\":\"\",\"url\":\"https:\/\/www.pages.gitlab.rlp.net\/relaunch-jgu\/wordpress\/demo-assets\/images\/jgu-persons.svg\",\"alt\":\"\",\"id\":null,\"title\":\"jgu-persons\",\"caption\":\"test-03\",\"credit\":\"\"},\"headline\":\"Alertbox ohne Icon\",\"children\":\"Aber mit einem Bild.\",\"iconOverHeadline\":true} \/-->\n\n<!-- wp:jgu\/alertbox {\"headline\":\"Icon \\u0022vor\\u0022 der \u00dcberschrift, tats\u00e4chlich oberhalb der Headline, rechts in den Einstellungen ausw\u00e4hlbar\",\"children\":\".\",\"icon\":\"exclamation-triangle-solid\",\"iconOverHeadline\":true} \/-->\n<!-- \/wp:jgu\/alertbox-grid --><\/div><\/div>\n<!-- \/wp:jgu\/section -->\n\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"h1\",\"tag\":\"h2.h1\"},\"heading\":\"Alertbox Raster vor dem Standardwei\u00dfen Hintergrund\"} \/-->\n\n<!-- wp:jgu\/alertbox-grid -->\n<!-- wp:jgu\/alertbox {\"image\":{\"isSet\":true,\"src\":\"\",\"url\":null,\"alt\":\"\",\"id\":null,\"title\":\"jgu-persons\",\"caption\":\"test-03\",\"credit\":\"\"},\"headline\":\"Die Iconfarbe ist standardm\u00e4\u00dfig dunkelblau\",\"subline\":\"Rechts in den Einstellungen w\u00e4hlen alternativdie Icon Farbe Rot aus.\",\"icon\":\"bullhorn-solid\",\"iconColor\":\"red\"} \/-->\n\n<!-- wp:jgu\/alertbox {\"image\":{\"isSet\":true,\"src\":\"\",\"url\":\"https:\/\/www.pages.gitlab.rlp.net\/relaunch-jgu\/wordpress\/demo-assets\/images\/jgu-persons.svg\",\"alt\":\"\",\"id\":null,\"title\":\"jgu-persons\",\"caption\":\"test-03\",\"credit\":\"\"},\"headline\":\"Listen Elemente gliedern den Inhalt der Alertbox\",\"icon\":\"bullhorn-solid\",\"iconOverHeadline\":true} -->\n<!-- wp:jgu\/list-item {\"icon\":\"exclamation-triangle-solid\",\"title\":\"Listenelement mit aufklappbarem Inhalt\",\"uuid\":\"1656937140101\",\"showExpandableContent\":true} -->\n<!-- wp:jgu\/list-item {\"icon\":\"address-card-solid\",\"title\":\"Foo\",\"uuid\":\"1656942603661\"} \/-->\n\n<!-- wp:jgu\/list-item {\"icon\":\"external-link-alt-solid\",\"title\":\"Bar\",\"uuid\":\"1656942608416\"} \/-->\n\n<!-- wp:jgu\/list-item {\"icon\":\"phone-solid\",\"title\":\"\\u003ca href=\\u0022tel:112\\u0022 data-type=\\u0022tel\\u0022 data-id=\\u0022tel:112\\u0022\\u003eRufen Sie einfach an\\u003c\/a\\u003e!\",\"uuid\":\"1656942611820\",\"link\":{\"url\":\"tel:112\"}} \/-->\n<!-- \/wp:jgu\/list-item -->\n\n<!-- wp:jgu\/list-item {\"icon\":\"lightbulb-solid\",\"title\":\"Noch ein Element\",\"uuid\":\"1656937167946\",\"showExpandableContent\":true,\"expandableContent\":\"Der Inhalt ab der zweiten Zeile kann ausgeblendet werden\"} \/-->\n<!-- \/wp:jgu\/alertbox -->\n<!-- \/wp:jgu\/alertbox-grid -->\n\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Alertbox ohne Raster\"} \/-->\n\n<!-- wp:jgu\/alertbox {\"icon\":\"address-card-solid\",\"iconOverHeadline\":true} \/-->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":10,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/341\/revisions"}],"predecessor-version":[{"id":118752,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/341\/revisions\/118752"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}