<!-- Default -->
<div class="contentelement blue-background mb--medium ce-textmedia" id="ce2973">
  <div class="container-fluid"><a class="hashanchor" id="c2973" data-da-link-item="true" role="button" tabindex="0" data-da-btn="true" data-da-id="56" data-da-next="57" data-da-prev="55" data-da-focused="false"></a>
    <div class="ce-textmedia__inner" data-wrapping="wrap" data-position-horizontal="center" data-position-vertical="above" data-hasmedia="0">
      <div class="row">
        <div class="ce-textmedia__text col-12">
          <div class="ce-content">
            <header class="ce">
              <h2 class="text-center" data-da-header="true" data-da-id="57" data-da-next="58" data-da-prev="56" data-da-focused="false" data-da-down="60" data-da-up="455">
                <div class="header__svg">
                  <div class="header__svg-spacer header__svg-spacer--tooth"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 78.22 81.44" data-da-img="true" data-da-id="58" data-da-next="59" data-da-prev="57" data-da-focused="false">
                      <path class="lighten" d="M34.54,53.56c1.25-.11,5.59.26,7.93,9.89,2.76,11.35,3.07,16,8.28,15S59,69.89,60,60.69s.92-15.64,3.68-23.92.92-15.65-2.14-18.71-9.82-7.06-16.57-4c-5.59,2.54-9.28,2.77-10.38,2.77h-.35c-1.1,0-4.79-.23-10.38-2.77-6.75-3.07-13.5.92-16.57,4S2.34,28.49,5.1,36.77,7.86,51.49,8.78,60.69s4,16.87,9.2,17.79,5.52-3.68,8.28-15c2.34-9.63,6.67-10,7.93-9.89Z"></path>
                      <path class="darken" d="M41.69,15.1a28.31,28.31,0,0,1-9,2.64v0l-1,.07h-.23l-1-.06v0a28.31,28.31,0,0,1-9-2.64c-7.3-3.32-14.51,1.07-17.62,4.18C-.66,23.68-.79,32.51,1.36,39S4,50.62,4.51,57.22c.14,1.74.29,3.53.49,5.46C6.07,73.43,9.8,80.39,15,81.3a8.19,8.19,0,0,0,1.41.14c4.24,0,5.23-4.24,7-12q.42-1.8.93-3.9c2.22-9.12,6.15-9.24,6.92-9.17h.52c4.39-.39,6.54,7.57,6.93,9.17q.51,2.1.93,3.9c2,8.52,3,12.8,8.44,11.83,5.25-.92,8.88-7.71,10-18.62.19-1.93.34-3.73.49-5.46.55-6.6,1-11.82,3.14-18.26s2-15.28-2.37-19.68C56.2,16.17,49,11.79,41.69,15.1ZM59.9,38.36C57.68,45,57.21,50.6,56.66,57.06c-.14,1.73-.3,3.52-.49,5.43-1,9.71-4.2,16.21-8.42,16.95-3.39.6-4.11-1.16-6.27-10.4-.28-1.2-.59-2.51-.93-3.92-2.5-10.26-7.38-10.73-8.89-10.61h-.27c-1.51-.12-6.39.35-8.89,10.61-.34,1.41-.65,2.72-.93,3.92-2.16,9.24-2.88,11-6.27,10.4-4.22-.74-7.45-7.24-8.42-16.95-.19-1.91-.34-3.7-.49-5.43-.54-6.46-1-12-3.24-18.7-2.59-7.79-1-14.82,1.92-17.74,2.08-2.08,6.21-4.81,10.82-4.81a11.34,11.34,0,0,1,4.69,1,28.79,28.79,0,0,0,10.18,2.84v0H32.3a28.89,28.89,0,0,0,10.18-2.84c6.35-2.89,12.73,1,15.5,3.8C60.9,23.54,62.49,30.57,59.9,38.36Z"></path>
                      <rect class="darken" x="66.54" y="18.01" width="11.66" height="1.89" transform="translate(-0.47 1.88) rotate(-1.48)"></rect>
                      <rect class="darken" x="61.56" y="9.44" width="11.66" height="1.89" transform="translate(13.45 52.1) rotate(-46.48)"></rect>
                      <rect class="darken" x="57.62" y="0.02" width="1.89" height="11.66" transform="translate(-0.13 1.52) rotate(-1.48)"></rect>
                    </svg></div>
                </div> Zahn-Vorsorge
              </h2>
              <div class="subheadline text-center">Zahngesundheit ist wichtig!</div>
            </header>
            <p class="text-center">Deshalb bieten wir Ihnen Informationen und Angebote zur Zahnvorsorge bei<br /> Erwachsenen und Kindern oder Zahnersatz wie Kronen, Br&uuml;cken, Prothesen oder Implantate.<br /></p>
            <div class="oranger_button" role="button" tabindex="0" data-da-id="59" data-da-next="60" data-da-prev="58" data-da-focused="false">
              <p class="text-center"><a class="btn" href="/de/leistungen-versicherung/zaehne" title="jetzt informieren!" target="_top" role="button" tabindex="0" data-da-link-item="true" data-da-btn="true" data-da-id="60" data-da-next="61" data-da-prev="59" data-da-focused="false" data-da-down="63" data-da-up="455">jetzt informieren</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="ce-textmedia__curve"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="61" data-da-next="62" data-da-prev="60" data-da-focused="false">
          <path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
        </svg></div>
    </div>
  </div>
</div>

{
  "headline": "Hello World",
  "kicker": "Lorem ipsum dolor",
  "text": "Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.",
  "button": {
    "text": "Button label",
    "link": "#"
  }
}

<!-- Gradient and Image -->
<!-- Background-image: add class "background-image" as well as "style=background-image..." -->
<!-- Add class "container-gradient" to .container-fluid -->
<div class="contentelement blue-background mb--medium ce-textmedia background-image" id="ce2973" style="background-image: url(https://placehold.co/1440x570)">
  <div class="container-fluid container--gradient">
    <div class="gradient-bg"></div><a class="hashanchor" id="c2973" data-da-link-item="true" role="button" tabindex="0" data-da-btn="true" data-da-id="56" data-da-next="57" data-da-prev="55" data-da-focused="false"></a>
    <div class="ce-textmedia__inner" data-wrapping="wrap" data-position-horizontal="center" data-position-vertical="above" data-hasmedia="0">
      <div class="row">
        <div class="ce-textmedia__text col-12">
          <div class="ce-content">
            <header class="ce">
              <h2 class="text-center" data-da-header="true" data-da-id="57" data-da-next="58" data-da-prev="56" data-da-focused="false" data-da-down="60" data-da-up="455">
                <div class="header__svg">
                  <div class="header__svg-spacer header__svg-spacer--tooth"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 78.22 81.44" data-da-img="true" data-da-id="58" data-da-next="59" data-da-prev="57" data-da-focused="false">
                      <path class="lighten" d="M34.54,53.56c1.25-.11,5.59.26,7.93,9.89,2.76,11.35,3.07,16,8.28,15S59,69.89,60,60.69s.92-15.64,3.68-23.92.92-15.65-2.14-18.71-9.82-7.06-16.57-4c-5.59,2.54-9.28,2.77-10.38,2.77h-.35c-1.1,0-4.79-.23-10.38-2.77-6.75-3.07-13.5.92-16.57,4S2.34,28.49,5.1,36.77,7.86,51.49,8.78,60.69s4,16.87,9.2,17.79,5.52-3.68,8.28-15c2.34-9.63,6.67-10,7.93-9.89Z"></path>
                      <path class="darken" d="M41.69,15.1a28.31,28.31,0,0,1-9,2.64v0l-1,.07h-.23l-1-.06v0a28.31,28.31,0,0,1-9-2.64c-7.3-3.32-14.51,1.07-17.62,4.18C-.66,23.68-.79,32.51,1.36,39S4,50.62,4.51,57.22c.14,1.74.29,3.53.49,5.46C6.07,73.43,9.8,80.39,15,81.3a8.19,8.19,0,0,0,1.41.14c4.24,0,5.23-4.24,7-12q.42-1.8.93-3.9c2.22-9.12,6.15-9.24,6.92-9.17h.52c4.39-.39,6.54,7.57,6.93,9.17q.51,2.1.93,3.9c2,8.52,3,12.8,8.44,11.83,5.25-.92,8.88-7.71,10-18.62.19-1.93.34-3.73.49-5.46.55-6.6,1-11.82,3.14-18.26s2-15.28-2.37-19.68C56.2,16.17,49,11.79,41.69,15.1ZM59.9,38.36C57.68,45,57.21,50.6,56.66,57.06c-.14,1.73-.3,3.52-.49,5.43-1,9.71-4.2,16.21-8.42,16.95-3.39.6-4.11-1.16-6.27-10.4-.28-1.2-.59-2.51-.93-3.92-2.5-10.26-7.38-10.73-8.89-10.61h-.27c-1.51-.12-6.39.35-8.89,10.61-.34,1.41-.65,2.72-.93,3.92-2.16,9.24-2.88,11-6.27,10.4-4.22-.74-7.45-7.24-8.42-16.95-.19-1.91-.34-3.7-.49-5.43-.54-6.46-1-12-3.24-18.7-2.59-7.79-1-14.82,1.92-17.74,2.08-2.08,6.21-4.81,10.82-4.81a11.34,11.34,0,0,1,4.69,1,28.79,28.79,0,0,0,10.18,2.84v0H32.3a28.89,28.89,0,0,0,10.18-2.84c6.35-2.89,12.73,1,15.5,3.8C60.9,23.54,62.49,30.57,59.9,38.36Z"></path>
                      <rect class="darken" x="66.54" y="18.01" width="11.66" height="1.89" transform="translate(-0.47 1.88) rotate(-1.48)"></rect>
                      <rect class="darken" x="61.56" y="9.44" width="11.66" height="1.89" transform="translate(13.45 52.1) rotate(-46.48)"></rect>
                      <rect class="darken" x="57.62" y="0.02" width="1.89" height="11.66" transform="translate(-0.13 1.52) rotate(-1.48)"></rect>
                    </svg></div>
                </div> Zahn-Vorsorge
              </h2>
              <div class="subheadline text-center">Zahngesundheit ist wichtig!</div>
            </header>
            <p class="text-center">Deshalb bieten wir Ihnen Informationen und Angebote zur Zahnvorsorge bei<br /> Erwachsenen und Kindern oder Zahnersatz wie Kronen, Br&uuml;cken, Prothesen oder Implantate.<br /></p>
            <div class="oranger_button" role="button" tabindex="0" data-da-id="59" data-da-next="60" data-da-prev="58" data-da-focused="false">
              <p class="text-center"><a class="btn" href="/de/leistungen-versicherung/zaehne" title="jetzt informieren!" target="_top" role="button" tabindex="0" data-da-link-item="true" data-da-btn="true" data-da-id="60" data-da-next="61" data-da-prev="59" data-da-focused="false" data-da-down="63" data-da-up="455">jetzt informieren</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="ce-textmedia__curve"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="61" data-da-next="62" data-da-prev="60" data-da-focused="false">
          <path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
        </svg></div>
    </div>
  </div>
</div>

{
  "headline": "Hello World",
  "kicker": "Lorem ipsum dolor",
  "text": "Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.",
  "button": {
    "text": "Button label",
    "link": "#"
  },
  "gradient": true,
  "backgroundImage": "https://placehold.co/1440x570"
}