Barmer Fractal

Card: Cs B 

<div class="o-card cs--b" id="card-1">
    <div class="card__content">
        <div class="card__overline" role="button" tabindex="0" aria-expanded="true" aria-controls="card-1">
            Vorteile für Azubis
        </div>
        <div class="card__headline">Azubi-Vorteile bei der barmer</div>

        <div class="card__cta-wrapper">
            <a class="a-btn btn--conversion" href="" title="">
                Jetzt entdecken
            </a>

        </div>
    </div>

    <div class="card__image">
        <picture class="a-picture ">
            <source media="(max-width: 800px)" srcset="../../images/16x9/mann-mit-kind.jpg">
            <source media="(min-width: 801px) and (max-width:1024px)" srcset="../../images/1x1/mann-mit-kind.jpg">
            <source media="(min-width: 1025px)" srcset="../../images/4x3/mann-mit-kind.jpg">
            <img src="../../images/4x3/mann-mit-kind.jpg" alt="" loading="lazy">
        </picture>

    </div>
</div>
 
<div class="o-card {{viewtypes.specifier}}" id="{{content.id}}">
  <div class="card__content">
    <div class="card__overline"
         role="button"
         tabindex="0"
         aria-expanded="{{content.ariaExpanded}}"
         aria-controls="{{content.id}}">
      {{content.overline}}
    </div>
    <div class="card__headline">{{content.headline}}</div>

    {{#switches.hasCTA}}
      <div class="card__cta-wrapper">
        {{ render '@button' this.partials.button merge=true }}
      </div>
    {{/switches.hasCTA}}
  </div>

  <div class="card__image">
    {{# switches.hasBadgeImage }}
      {{render '@badge-image' this.partials.badgeImage merge=true }}
    {{/ switches.hasBadgeImage}}
    {{ render '@picture' this.partials.picture merge=true}}
  </div>
</div>
 
{
  "switches": {
    "hasCTA": true,
    "hasBadgeImage": false
  },
  "viewtypes": {
    "id": "card-cs-b",
    "specifier": "cs--b"
  },
  "content": {
    "id": "card-1",
    "ariaExpanded": true,
    "overline": "Vorteile für Azubis",
    "headline": "Azubi-Vorteile bei der barmer"
  },
  "partials": {
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--conversion"
      },
      "content": {
        "label": "Jetzt entdecken"
      }
    },
    "picture": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 800px)",
            "srcset": "../../images/16x9/mann-mit-kind.jpg"
          },
          {
            "media": "(min-width: 801px) and (max-width:1024px)",
            "srcset": "../../images/1x1/mann-mit-kind.jpg"
          },
          {
            "media": "(min-width: 1025px)",
            "srcset": "../../images/4x3/mann-mit-kind.jpg"
          }
        ],
        "img": {
          "src": "../../images/4x3/mann-mit-kind.jpg",
          "alt": ""
        }
      }
    }
  }
}

No notes defined.