{"id":121433,"date":"2024-01-24T13:35:30","date_gmt":"2024-01-24T12:35:30","guid":{"rendered":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/notification-banner\/"},"modified":"2026-07-20T16:30:10","modified_gmt":"2026-07-20T14:30:10","slug":"notification-banner","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/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 = Notification Box&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<p class=\"has-big-font-size has-normal-font-size wp-block-paragraph\">Block offers a box that  <\/p>\n\n<ul class=\"wp-block-list has-normal-font-size\">\n<li>an icon,  <\/li>\n\n\n\n<li>a picture,  <\/li>\n\n\n\n<li>a title and  <\/li>\n\n\n\n<li>may contain any other blocks<\/li>\n<\/ul>\n<jgu-base-heading react-props=\"{\n    &quot;heading&quot;: &quot;Block Settings&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<p class=\"has-big-font-size wp-block-paragraph\">Alignment: none, max. 1700 px wide or the full width of the window <\/p>\n\n<p class=\"has-normal-font-size wp-block-paragraph\">Replace one icon with another from a list<\/p>\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;Settings in the 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<ul class=\"wp-block-list\">\n<li>Show Close Button<\/li>\n\n\n\n<li>Icon color: red or white<\/li>\n\n\n\n<li>Background color: gray or green<\/li>\n<\/ul>\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;Watch out!&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 wp-block-paragraph\">Please pay attention&#8230; \ud83d\ude09<\/p>\n\n\n\n<ul class=\"wp-block-list has-big-font-size\">\n<li>Item 1<\/li>\n\n\n\n<li>Item 2<\/li>\n\n\n\n<li>Item 3<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p class=\"has-big-font-size wp-block-paragraph\">The default icon is the sign with the exclamation point. You can also select a different icon (via: Replace Icon). <\/p>\n\n\n\n<p class=\"has-big-font-size wp-block-paragraph\">Don&#8217;t nest any columns here\u2014it won&#8217;t look good on mobile devices, at the very least, because the column contents will extend beyond the edge!<\/p>\n\n\n\n<p class=\"has-big-font-size wp-block-paragraph\">Designed as a full-width box, similar to a special report or breaking news alert.<\/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<p class=\"has-big-font-size wp-block-paragraph\"><\/p>\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 wp-block-paragraph\">The same thing in green\u2014don&#8217;t overuse it; it was originally intended as a rare change of pace.<\/p>\n\n\n\n<p class=\"has-big-font-size wp-block-paragraph\">Do NOT mix the green notification box with red icons\u2014the contrast is too low!<\/p>\n\n\n<\/jgu-base-notificationbanner>\n    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Block offers a box that Alignment: none, max. 1700 px wide or the full width of the window Replace one icon with another from a list<\/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-121433","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Notification Banner = Notification Box\"} \/--><!-- wp:paragraph {\"className\":\"has-big-font-size\",\"fontSize\":\"normal\",\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size has-normal-font-size\">Block offers a box that  <\/p>\n<!-- \/wp:paragraph --><!-- wp:list {\"fontSize\":\"normal\"} -->\n<ul class=\"wp-block-list has-normal-font-size\"><!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>an icon,  <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>a picture,  <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>a title and  <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>may contain any other blocks<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><!-- wp:jgu\/heading {\"heading\":\"Block Settings\"} \/--><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size\">Alignment: none, max. 1700 px wide or the full width of the window <\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph {\"fontSize\":\"normal\",\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-normal-font-size\">Replace one icon with another from a list<\/p>\n<!-- \/wp:paragraph --><!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Settings in the Sidebar\"} \/--><!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>Show Close Button<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>Icon color: red or white<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>Background color: gray or green<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><!-- 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\":\"Watch out!\"} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Inhalt\u2026\",\"className\":\"has-big-font-size\",\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size\">Please pay attention... ;-)<\/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 {\"translatedWithWPMLTM\":\"1\"} -->\n<li>Item 1<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>Item 2<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item {\"translatedWithWPMLTM\":\"1\"} -->\n<li>Item 3<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><\/div><\/div>\n<!-- \/wp:media-text -->\n\n<!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size\">The default icon is the sign with the exclamation point. You can also select a different icon (via: Replace Icon). <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size\">Don't nest any columns here\u2014it won't look good on mobile devices, at the very least, because the column contents will extend beyond the edge!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size\">Designed as a full-width box, similar to a special report or breaking news alert.<\/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 --><!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph --><!-- wp:jgu\/notification-banner {\"icon\":\"bullhorn-solid\",\"iconColor\":\"white\",\"bgColor\":\"green\"} -->\n<!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size\">The same thing in green\u2014don't overuse it; it was originally intended as a rare change of pace.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p class=\"has-big-font-size\">Do NOT mix the green notification box with red icons\u2014the contrast is too low!<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/notification-banner -->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/pages\/121433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/users\/107"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/comments?post=121433"}],"version-history":[{"count":2,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/pages\/121433\/revisions"}],"predecessor-version":[{"id":121439,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/pages\/121433\/revisions\/121439"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/media?parent=121433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/categories?post=121433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/en\/wp-json\/wp\/v2\/tags?post=121433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}