<div class="jumpbox">
  <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
  }
}

<div class="jumpbox jumpbox--centered">
  <h2 class="headline headline--1 jumpbox__headline">Sie haben weitere Fragen? <br /> Schreiben Sie uns:</h2>
  <div class="jumpbox__button"><a class="button button--secondary button--transparent" target="_blank" href="mailto:mail@lorem.de"><span class="button__text">mail@lorem.de</span></a></div>
</div>

{
  "title": "Sie haben weitere Fragen? #[br] Schreiben Sie uns:\n",
  "button": {
    "icon": null,
    "text": "mail@lorem.de",
    "link": "mailto:mail@lorem.de",
    "external": true,
    "style": "secondary",
    "transparent": true
  },
  "centered": true
}

<div class="jumpbox jumpbox--condensed">
  <div class="jumpbox__text">
    <div class="text">
      <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
    </div>
  </div>
</div>

{
  "title": null,
  "button": null,
  "condensed": true,
  "text": {
    "content": [
      "p Hinweisbox #[a.link(href='#') mit Link]\n"
    ]
  }
}