Barmer Fractal

Teaser Collections: Downloadlist 

<div class="o-teaser-collection teaser-collection--download">

    <h3 class="teaser-collection__headline teaser-collection__headline--h2">Downloadlist</h3>

    <div class="teaser-collection__text">
        <p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>

    </div>

    <div class="teaser-collection__teaser-wrapper">
        <a class="m-download " href="#">
            <div class="download__title">
                BARMER Dokument My only complaint would be the o

            </div>
            <div class="download__size">PDF 1.2 MB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

        <a class="m-download " href="#">
            <div class="download__title">
                BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

            </div>
            <div class="download__size">PNG 3.66 MB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

        <a class="m-download " href="#">
            <div class="download__title">
                BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet.

            </div>
            <div class="download__size">PNG 3.66 MB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

    </div>

</div>
 
<div class="o-teaser-collection {{viewtypes.specifier}}" {{#content.id}}id="{{this}}"{{/content.id}}>

  {{# switches.hasHeadline }}
    <h3 class="teaser-collection__headline {{viewtypes.headlineSpecifier}}">{{ content.headline }}</h3>
  {{/switches.hasHeadline}}

  {{# switches.hasDetailText }}
    <div class="teaser-collection__text">
      {{# switches.isPlaintext }}
        {{ content.plaintext }}
      {{/ switches.isPlaintext }}
      {{^ switches.isPlaintext }}
        {{ render '@richtext' partials.richtext merge=true }}
      {{/ switches.isPlaintext }}
    </div>
  {{/switches.hasDetailText}}

  <div class="teaser-collection__teaser-wrapper" {{{ content.attributes }}}>
    {{# each partials.teaserItems }}
      {{#ifcond @index '<' ../switches.teaserItemAmount}}
        {{#ifcond switches.isColumnPosition '==' 1}}
          {{ render (stringToPartial ../partials.includedItemType) this merge=true }}
        {{/ifcond}}
      {{/ifcond}}
    {{/each}}
  </div>

  {{# switches.hasTwoColumns }}
    <div class="teaser-collection__teaser-wrapper" {{{ content.attributes }}}>
      {{# each partials.teaserItems }}
        {{#ifcond @index '<' ../switches.teaserItemAmount}}
          {{#ifcond switches.isColumnPosition '==' 2}}
            {{ render (stringToPartial ../partials.includedItemType) this merge=true }}
          {{/ifcond}}
        {{/ifcond}}
      {{/each}}
    </div>
  {{/switches.hasTwoColumns}}

  {{# switches.hasFooter }}
    <div class="teaser-collection__footer">
      {{content.footertext}}
    </div>
  {{/switches.hasFooter}}

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

</div>
 
{
  "switches": {
    "hasHeadline": true,
    "hasDetailText": true,
    "hasTwoColumns": false,
    "isPlaintext": false,
    "teaserItemAmount": 3,
    "hasCTA": false,
    "hasButton": false,
    "hasFooter": false
  },
  "viewtypes": {
    "specifier": "teaser-collection--download",
    "headlineSpecifier": "teaser-collection__headline--h2"
  },
  "content": {
    "headline": "Downloadlist",
    "plaintext": "Dies ist ein bißchen Plaintext",
    "badge": "",
    "button": "",
    "footertext": ""
  },
  "partials": {
    "includedItemType": "download",
    "teaserItems": [
      {
        "switches": {
          "isColumnPosition": 1
        },
        "content": {
          "title": "BARMER Dokument My only complaint would be the o",
          "meta": "PDF 1.2 MB"
        }
      },
      {
        "switches": {
          "isColumnPosition": 1
        },
        "content": {
          "title": "BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat",
          "meta": "PNG 3.66 MB"
        }
      },
      {
        "switches": {
          "isColumnPosition": 1
        },
        "content": {
          "title": "BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet.",
          "meta": "PNG 3.66 MB"
        }
      }
    ],
    "richtext": {
      "switches": {
        "hasDefaultText": false
      },
      "content": {
        "text": "<p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>"
      }
    },
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--primary"
      },
      "content": {
        "label": "Hier zu den Neuigkeiten"
      }
    }
  }
}

Headline Tag is default rendered as a H3, but styling is controlled by headlineSpecifier.