<div class="jumpbox t-dark">
  <h2 class="headline headline--1 jumpbox__headline"><span>Ich bin eine</span> <br /> Jumpbox</h2>
  <div class="jumpbox__button"><a class="button button--primary" target="_blank" href="#"><svg class="icon icon--arrow-external button__icon" viewBox="0 0 200 200">
        <use xlink:href="#icon-arrow-external"></use>
      </svg><span class="button__text">Website besuchen</span></a></div>
</div>

{
  "title": "#[span Ich bin eine] #[br] Jumpbox\n",
  "button": {
    "icon": "arrow-external",
    "text": "Website besuchen",
    "link": "#",
    "external": true
  },
  "dark": true
}

<div class="jumpbox jumpbox--dgb-blue-wave t-dark">
  <h2 class="headline headline--1 jumpbox__headline"><span>Ich bin eine</span> <br /> Jumpbox</h2>
  <div class="jumpbox__button"><a class="button button--primary" target="_blank" href="#"><svg class="icon icon--arrow-external button__icon" viewBox="0 0 200 200">
        <use xlink:href="#icon-arrow-external"></use>
      </svg><span class="button__text">Website besuchen</span></a></div>
</div>

{
  "title": "#[span Ich bin eine] #[br] Jumpbox\n",
  "button": {
    "icon": "arrow-external",
    "text": "Website besuchen",
    "link": "#",
    "external": true
  },
  "dark": true,
  "backgroundColor": "dgb-blue-wave"
}

<div class="jumpbox jumpbox--dgb-green t-dark">
  <h2 class="headline headline--1 jumpbox__headline"><span>Ich bin eine</span> <br /> Jumpbox</h2>
  <div class="jumpbox__button"><a class="button button--primary" target="_blank" href="#"><svg class="icon icon--arrow-external button__icon" viewBox="0 0 200 200">
        <use xlink:href="#icon-arrow-external"></use>
      </svg><span class="button__text">Website besuchen</span></a></div>
</div>

{
  "title": "#[span Ich bin eine] #[br] Jumpbox\n",
  "button": {
    "icon": "arrow-external",
    "text": "Website besuchen",
    "link": "#",
    "external": true
  },
  "dark": true,
  "backgroundColor": "dgb-green"
}

<div class="jumpbox jumpbox--dgb-green-wave t-dark">
  <h2 class="headline headline--1 jumpbox__headline"><span>Ich bin eine</span> <br /> Jumpbox</h2>
  <div class="jumpbox__button"><a class="button button--primary" target="_blank" href="#"><svg class="icon icon--arrow-external button__icon" viewBox="0 0 200 200">
        <use xlink:href="#icon-arrow-external"></use>
      </svg><span class="button__text">Website besuchen</span></a></div>
</div>

{
  "title": "#[span Ich bin eine] #[br] Jumpbox\n",
  "button": {
    "icon": "arrow-external",
    "text": "Website besuchen",
    "link": "#",
    "external": true
  },
  "dark": true,
  "backgroundColor": "dgb-green-wave"
}

<div class="jumpbox jumpbox--dgb-blue t-dark"><svg class="icon icon--certificate jumpbox__icon " viewBox="0 0 200 200">
    <use xlink:href="#icon-certificate"></use>
  </svg>
  <div class="jumpbox__text">
    <div class="text">
      <h2 class="headline headline--3"><span class="f-w-normal">Zertifikat  „Wir sind an Bord!“</span> <br /> Für besonders engagierte Kindertagesstätten</h2>
    </div>
  </div>
  <div class="jumpbox__button"><a class="button button--primary" href="#"><span class="button__text">Zur Zertifizierung</span></a></div>
</div>

{
  "title": null,
  "button": {
    "icon": null,
    "text": "Zur Zertifizierung",
    "link": "#",
    "external": null
  },
  "dark": true,
  "backgroundColor": "dgb-blue",
  "icon": {
    "icon": "certificate"
  },
  "text": {
    "content": [
      "+include('@headline', {\n  size: 3,\n  level: 2,\n  text: '#[span.f-w-normal Zertifikat  „Wir sind an Bord!“] #[br] Für besonders engagierte Kindertagesstätten'\n})\n"
    ]
  }
}

<div class="jumpbox jumpbox--dgb-blue-light t-dark"><svg class="icon icon--certificate jumpbox__icon " viewBox="0 0 200 200">
    <use xlink:href="#icon-certificate"></use>
  </svg>
  <div class="jumpbox__text">
    <div class="text">
      <h2 class="headline headline--3"><span class="f-w-normal">Zertifikat  „Wir sind an Bord!“</span> <br /> Für besonders engagierte Kindertagesstätten</h2>
    </div>
  </div>
  <div class="jumpbox__button"><a class="button button--primary" href="#"><span class="button__text">Zur Zertifizierung</span></a></div>
</div>

{
  "title": null,
  "button": {
    "icon": null,
    "text": "Zur Zertifizierung",
    "link": "#",
    "external": null
  },
  "dark": true,
  "backgroundColor": "dgb-blue-light",
  "icon": {
    "icon": "certificate"
  },
  "text": {
    "content": [
      "+include('@headline', {\n  size: 3,\n  level: 2,\n  text: '#[span.f-w-normal Zertifikat  „Wir sind an Bord!“] #[br] Für besonders engagierte Kindertagesstätten'\n})\n"
    ]
  }
}

<div class="jumpbox jumpbox--dgb-green t-dark"><svg class="icon icon--certificate jumpbox__icon " viewBox="0 0 200 200">
    <use xlink:href="#icon-certificate"></use>
  </svg>
  <div class="jumpbox__text">
    <div class="text">
      <h2 class="headline headline--3"><span class="f-w-normal">Zertifikat  „Wir sind an Bord!“</span> <br /> Für besonders engagierte Kindertagesstätten</h2>
    </div>
  </div>
  <div class="jumpbox__button"><a class="button button--primary" href="#"><span class="button__text">Zur Zertifizierung</span></a></div>
</div>

{
  "title": null,
  "button": {
    "icon": null,
    "text": "Zur Zertifizierung",
    "link": "#",
    "external": null
  },
  "dark": true,
  "backgroundColor": "dgb-green",
  "icon": {
    "icon": "certificate"
  },
  "text": {
    "content": [
      "+include('@headline', {\n  size: 3,\n  level: 2,\n  text: '#[span.f-w-normal Zertifikat  „Wir sind an Bord!“] #[br] Für besonders engagierte Kindertagesstätten'\n})\n"
    ]
  }
}

<div class="jumpbox jumpbox--dgb-green-light t-dark"><svg class="icon icon--certificate jumpbox__icon " viewBox="0 0 200 200">
    <use xlink:href="#icon-certificate"></use>
  </svg>
  <div class="jumpbox__text">
    <div class="text">
      <h2 class="headline headline--3"><span class="f-w-normal">Zertifikat  „Wir sind an Bord!“</span> <br /> Für besonders engagierte Kindertagesstätten</h2>
    </div>
  </div>
  <div class="jumpbox__button"><a class="button button--primary" href="#"><span class="button__text">Zur Zertifizierung</span></a></div>
</div>

{
  "title": null,
  "button": {
    "icon": null,
    "text": "Zur Zertifizierung",
    "link": "#",
    "external": null
  },
  "dark": true,
  "backgroundColor": "dgb-green-light",
  "icon": {
    "icon": "certificate"
  },
  "text": {
    "content": [
      "+include('@headline', {\n  size: 3,\n  level: 2,\n  text: '#[span.f-w-normal Zertifikat  „Wir sind an Bord!“] #[br] Für besonders engagierte Kindertagesstätten'\n})\n"
    ]
  }
}