{"id":191,"date":"2022-02-09T08:19:10","date_gmt":"2022-02-09T08:19:10","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=191"},"modified":"2022-02-09T08:19:10","modified_gmt":"2022-02-09T08:19:10","slug":"buttons","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/buttons\/","title":{"rendered":"Button"},"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;Button&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        }\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\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test Neuer Tab&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;,\n        &quot;opensInNewTab&quot;: true\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test1 selber Tab&lt;br&gt;&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;,\n        &quot;url&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test2&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test 1&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;className&quot;: &quot;disabled&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test1&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;className&quot;: &quot;disabled&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test2&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;className&quot;: &quot;disabled&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n<\/div>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test&quot;,\n    &quot;icon&quot;: &quot;calendar-check&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test1&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;,\n        &quot;url&quot;: &quot;https:\\\/\\\/google.com&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test2&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-end\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test1&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test2&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\">Links ausgerichtet<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Ein Button&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Zweiter dahinter&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\">zentral ausgerichtet<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: center\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Ein Button&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Zweiter dahinter&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\">rechts ausgerichtet<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: right\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Ein Button&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Zweiter dahinter&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\">Abstand zwischen Buttons<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: space-between\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Ein Button&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Zweiter dahinter&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\">Kleine Buttons<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Ein Button&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;isSmall&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Primary&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Default&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Line&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Primary&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Default&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Line&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Primary&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;isSmall&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Default&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;isSmall&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Line&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;isSmall&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Primary&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: true,\n    &quot;isSmall&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Default&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: true,\n    &quot;isSmall&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Line&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: true,\n    &quot;isSmall&quot;: true,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n<\/div>\n\n\n\n<p class=\"has-big-font-size\">Types<\/p>\n\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\">Button primary mit viel Text<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Das ist ein Button mit viel Text und dient zur Demostration des Verhaltens auf verschiedenen Endger\\u00e4ten&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<p class=\"has-big-font-size\">Styling default<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Das ist ein Button mit viel Text und dient zur Demostration des Verhaltens auf verschiedenen Endger\\u00e4ten&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Das ist ein Button&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n<p class=\"has-big-font-size\">Styling Line<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Das ist ein Button mit viel Text und dient zur Demostration des Verhaltens auf verschiedenen Endger\\u00e4ten&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Das ist ein Button&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;asdfa&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button>    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Links ausgerichtet zentral ausgerichtet rechts ausgerichtet Abstand zwischen Buttons Kleine Buttons Types Button primary mit viel Text Styling default Styling Line<\/p>\n","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-191","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/pageheader {\"items\":[{\"box\":{\"index\":\"Module\",\"title\":\"Button\",\"link\":{\"url\":\"\",\"title\":\"mehr erfahren\"}},\"color\":\"dark\",\"image\":{\"url\":\"https:\/\/via.placeholder.com\/1600x1050\"},\"imgCredit\":\"\"}],\"type\":\"small\"} \/-->\n\n<!-- wp:spacer {\"height\":\"100px\"} -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:columns {\"className\":\"\"} -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/button {\"align\":\"\",\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Test Neuer Tab\",\"link\":{\"url\":\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/\",\"linkTarget\":\"\",\"rel\":\"\",\"opensInNewTab\":true}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test1 selber Tab\\u003cbr\\u003e\",\"styling\":\"default\",\"link\":{\"linkTarget\":\"\",\"rel\":\"\",\"url\":\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test2\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/button {\"align\":\"\",\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Test 1\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"className\":\"disabled\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test1\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"className\":\"disabled\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test2\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"className\":\"disabled\"} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Test\",\"icon\":\"calendar-check\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test1\",\"styling\":\"default\",\"link\":{\"linkTarget\":\"\",\"rel\":\"\",\"url\":\"https:\/\/google.com\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test2\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"right\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Test\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test1\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Test2\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:spacer {\"height\":\"100px\"} -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Links ausgerichtet<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"flex-start\",\"orientation\":\"horizontal\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Ein Button\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Zweiter dahinter\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">zentral ausgerichtet<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"center\",\"orientation\":\"horizontal\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Ein Button\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Zweiter dahinter\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">rechts ausgerichtet<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"right\",\"orientation\":\"horizontal\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Ein Button\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Zweiter dahinter\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Abstand zwischen Buttons<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"space-between\",\"orientation\":\"horizontal\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Ein Button\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Zweiter dahinter\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Kleine Buttons<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"flex-start\",\"orientation\":\"horizontal\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Ein Button\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"isSmall\":true} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:spacer {\"height\":\"100px\"} -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"width\":\"25%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"><!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Primary\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Default\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Line\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"25%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"><!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Primary\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"iconBefore\":true} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Default\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"iconBefore\":true} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Line\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"iconBefore\":true} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"25%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"><!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Primary\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"isSmall\":true} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Default\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"isSmall\":true} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Line\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"isSmall\":true} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"25%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"><!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Primary\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"iconBefore\":true,\"isSmall\":true} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Default\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"iconBefore\":true,\"isSmall\":true} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Line\",\"styling\":\"line\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"},\"iconBefore\":true,\"isSmall\":true} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Types<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"},\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Button primary mit viel Text<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button -->\n<!-- wp:jgu\/button-item {\"text\":\"Das ist ein Button mit viel Text und dient zur Demostration des Verhaltens auf verschiedenen Endger\u00e4ten\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Styling default<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button -->\n<!-- wp:jgu\/button-item {\"text\":\"Das ist ein Button mit viel Text und dient zur Demostration des Verhaltens auf verschiedenen Endger\u00e4ten\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:jgu\/button -->\n<!-- wp:jgu\/button-item {\"text\":\"Das ist ein Button\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Styling Line<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button -->\n<!-- wp:jgu\/button-item {\"text\":\"Das ist ein Button mit viel Text und dient zur Demostration des Verhaltens auf verschiedenen Endger\u00e4ten\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:jgu\/button -->\n<!-- wp:jgu\/button-item {\"text\":\"Das ist ein Button\",\"styling\":\"default\",\"link\":{\"url\":\"\",\"linkTarget\":\"\",\"rel\":\"\"}} \/-->\n<!-- \/wp:jgu\/button -->\n\n<!-- wp:jgu\/button -->\n<!-- wp:jgu\/button-item {\"text\":\"asdfa\"} \/-->\n<!-- \/wp:jgu\/button -->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/191","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=191"}],"version-history":[{"count":3,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/191\/revisions"}],"predecessor-version":[{"id":118913,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/191\/revisions\/118913"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/categories?post=191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/tags?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}