{"id":114807,"date":"2024-01-24T13:35:30","date_gmt":"2024-01-24T12:35:30","guid":{"rendered":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/?page_id=114807"},"modified":"2026-05-06T15:55:39","modified_gmt":"2026-05-06T13:55:39","slug":"notification-banner","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/notification-banner\/","title":{"rendered":"Notification Banner"},"content":{"rendered":"<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;Notification Banner = Notizbox&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\n<p class=\"has-big-font-size has-normal-font-size\">Block bietet einen Kastens, welches <\/p>\n\n\n\n<ul class=\"wp-block-list has-normal-font-size\">\n<li>ein Icon, <\/li>\n\n\n\n<li>ein Bild, <\/li>\n\n\n\n<li>einen Titel und <\/li>\n\n\n\n<li>beliebige andere Bl\u00f6cke beinhalten kann<\/li>\n<\/ul>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;heading&quot;: &quot;Block-Einstellungen&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    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;\n    }\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Ausrichtung: keine, Max. 1700 px breit oder die gesamte Fensterbreite<\/p>\n\n\n\n<p class=\"has-normal-font-size\">Icon gegen ein anderes aus einer Liste tauschen<\/p>\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;Einstellungen in der Sidebar&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\n<ul class=\"wp-block-list\">\n<li>Schlie\u00dfen Button anzeigen<\/li>\n\n\n\n<li>Icon Farbe: rot oder wei\u00df<\/li>\n\n\n\n<li>Hintergrundfarbe: grau oder gr\u00fcn<\/li>\n<\/ul>\n\n\n<jgu-base-notificationbanner react-props=\"{\n    &quot;align&quot;: &quot;full&quot;,\n    &quot;children&quot;: &quot;&quot;,\n    &quot;icon&quot;: &quot;exclamation-triangle-solid&quot;,\n    &quot;iconColor&quot;: &quot;red&quot;,\n    &quot;showCloseButton&quot;: false,\n    &quot;position&quot;: &quot;top&quot;,\n    &quot;styling&quot;: &quot;inline&quot;,\n    &quot;bgColor&quot;: &quot;light&quot;,\n    &quot;isPreview&quot;: false\n}\">\n    \n\n<div class=\"wp-block-media-text is-stacked-on-mobile is-vertically-aligned-top\" style=\"grid-template-columns:21% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"225\" src=\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-content\/uploads\/sites\/22\/2024\/01\/spillplaz-300x225.jpg\" alt=\"\" class=\"wp-image-114816 size-medium\" srcset=\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-content\/uploads\/sites\/22\/2024\/01\/spillplaz-300x225.jpg 300w, https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-content\/uploads\/sites\/22\/2024\/01\/spillplaz-768x576.jpg 768w, https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-content\/uploads\/sites\/22\/2024\/01\/spillplaz.jpg 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><div class=\"wp-block-media-text__content\"><jgu-base-heading react-props=\"{\n    &quot;color&quot;: &quot;default&quot;,\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;Opgepasst&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Bitte aufpassen&#8230; \ud83d\ude09<\/p>\n\n\n\n<ul class=\"wp-block-list has-big-font-size\">\n<li>Listenpunkt 1<\/li>\n\n\n\n<li>Listenpunkt 2<\/li>\n\n\n\n<li>Listenpunkt 3<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p class=\"has-big-font-size\">Standard-Icon ist das Schild mit dem Ausrufezeichen. Hierf\u00fcr kann auch ein anderes Icon ausgew\u00e4hlt werden (\u00fcber: Icon ersetzen).<\/p>\n\n\n\n<p class=\"has-big-font-size\">Schachteln Sie hier blo\u00df keine Spalten hinein, das sieht sp\u00e4testens mobil nicht mehr gut aus, denn die Spalteninhalte ragen \u00fcber den Rand hinaus!<\/p>\n\n\n\n<p class=\"has-big-font-size\">Gedacht als \u00fcber die gesamte Breite laufende Box nach Art einer Sondermeldung oder Eilmeldung.<\/p>\n\n\n<jgu-base-contactcardgrid react-props=\"{\n    &quot;align&quot;: &quot;wide&quot;\n}\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 2em;\">\n\t\n<jgu-base-contactcard react-props=\"{\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;name&quot;: &quot;&quot;,\n    &quot;actions&quot;: [],\n    &quot;color&quot;: &quot;default&quot;\n}\">\n    \n<\/jgu-base-contactcard>\n\n<\/jgu-base-contactcardgrid>\n\n<\/jgu-base-notificationbanner>\n\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n<jgu-base-notificationbanner react-props=\"{\n    &quot;icon&quot;: &quot;bullhorn-solid&quot;,\n    &quot;iconColor&quot;: &quot;white&quot;,\n    &quot;bgColor&quot;: &quot;green&quot;,\n    &quot;children&quot;: &quot;&quot;,\n    &quot;showCloseButton&quot;: false,\n    &quot;position&quot;: &quot;top&quot;,\n    &quot;styling&quot;: &quot;inline&quot;,\n    &quot;isPreview&quot;: false\n}\">\n    \n\n<p class=\"has-big-font-size\">Das gleiche in gr\u00fcn, nicht \u00fcberm\u00e4\u00dfig verwenden, war mal gedacht als seltene Abwechslung.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Gr\u00fcne Notification Box NICHT mit roten Icons mischen, da ist der Kontrast zu gering!<\/p>\n\n\n<\/jgu-base-notificationbanner>\n    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Block bietet einen Kastens, welches Ausrichtung: keine, Max. 1700 px breit oder die gesamte Fensterbreite Icon gegen ein anderes aus einer Liste tauschen<\/p>\n","protected":false},"author":107,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-114807","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Notification Banner = Notizbox\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\",\"fontSize\":\"normal\"} -->\n<p class=\"has-big-font-size has-normal-font-size\">Block bietet einen Kastens, welches <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"fontSize\":\"normal\"} -->\n<ul class=\"wp-block-list has-normal-font-size\"><!-- wp:list-item -->\n<li>ein Icon, <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>ein Bild, <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>einen Titel und <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>beliebige andere Bl\u00f6cke beinhalten kann<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:jgu\/heading {\"heading\":\"Block-Einstellungen\"} \/-->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Ausrichtung: keine, Max. 1700 px breit oder die gesamte Fensterbreite<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"fontSize\":\"normal\"} -->\n<p class=\"has-normal-font-size\">Icon gegen ein anderes aus einer Liste tauschen<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Einstellungen in der Sidebar\"} \/-->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Schlie\u00dfen Button anzeigen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Icon Farbe: rot oder wei\u00df<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Hintergrundfarbe: grau oder gr\u00fcn<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:jgu\/notification-banner {\"align\":\"full\"} -->\n<!-- wp:media-text {\"mediaId\":114816,\"mediaLink\":\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/basis-plugin\/notification-banner\/spillplaz\/\",\"mediaType\":\"image\",\"mediaWidth\":21,\"mediaSizeSlug\":\"medium\",\"verticalAlignment\":\"top\"} -->\n<div class=\"wp-block-media-text is-stacked-on-mobile is-vertically-aligned-top\" style=\"grid-template-columns:21% auto\"><figure class=\"wp-block-media-text__media\"><img src=\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-content\/uploads\/sites\/22\/2024\/01\/spillplaz-300x225.jpg\" alt=\"\" class=\"wp-image-114816 size-medium\"\/><\/figure><div class=\"wp-block-media-text__content\"><!-- wp:jgu\/heading {\"color\":\"default\",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Opgepasst\"} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Inhalt\u2026\",\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Bitte aufpassen... ;-)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"className\":\"has-big-font-size\"} -->\n<ul class=\"wp-block-list has-big-font-size\"><!-- wp:list-item -->\n<li>Listenpunkt 1<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Listenpunkt 2<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Listenpunkt 3<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><\/div><\/div>\n<!-- \/wp:media-text -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Standard-Icon ist das Schild mit dem Ausrufezeichen. Hierf\u00fcr kann auch ein anderes Icon ausgew\u00e4hlt werden (\u00fcber: Icon ersetzen).<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Schachteln Sie hier blo\u00df keine Spalten hinein, das sieht sp\u00e4testens mobil nicht mehr gut aus, denn die Spalteninhalte ragen \u00fcber den Rand hinaus!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Gedacht als \u00fcber die gesamte Breite laufende Box nach Art einer Sondermeldung oder Eilmeldung.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/contact-card-grid -->\n<!-- wp:jgu\/contact-card \/-->\n<!-- \/wp:jgu\/contact-card-grid -->\n<!-- \/wp:jgu\/notification-banner -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/notification-banner {\"icon\":\"bullhorn-solid\",\"iconColor\":\"white\",\"bgColor\":\"green\"} -->\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Das gleiche in gr\u00fcn, nicht \u00fcberm\u00e4\u00dfig verwenden, war mal gedacht als seltene Abwechslung.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Gr\u00fcne Notification Box NICHT mit roten Icons mischen, da ist der Kontrast zu gering!<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/notification-banner -->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/114807","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\/107"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/comments?post=114807"}],"version-history":[{"count":12,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/114807\/revisions"}],"predecessor-version":[{"id":119966,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/114807\/revisions\/119966"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/media?parent=114807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/categories?post=114807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/tags?post=114807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}