Barmer Fractal

List Basic: Default 

<ul class="a-list-basic ">
    <li class="list__item ">
        Das erste List-Item als statischer Text
    </li>
    <li class="list__item ">
        Und hier ein zweites List-Item, auch statischer Text
    </li>
    <li class="list__item ">
        <a href="http://zdf.de" class="a-link ">
            Drittes List-Item als eingehängtes Link-Atom
        </a>

    </li>
    <li class="list__item ">
        <a href="http://zdf.de" class="a-link ">
            <span class="link__inner">Abschließend ein viertes, recht langes List-Item als eingehängtes Link-Atom mit Chevron</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
        </a>

    </li>
</ul>
 
<ul class="a-list-basic {{viewtypes.specifier}}" {{{content.ariaAttrs}}}>
  {{#each partials.listitems as |listitem| }}
    <li class="list__item {{listitem.viewtypes.specifier}}">
      {{# switches.hasIcon }}
      {{render '@icon' partials.icon merge=true}}
      {{/switches.hasIcon}}
      {{#if switches.hasTextContent }}
        {{{content.text}}}
      {{else}}
        {{render (stringToPartial listitem.type) partials.item merge=true}}
      {{/if }}
      {{#if switches.hasSublist }}
        {{render '@list-basic' partials.subList merge=true}}
      {{/if}}
    </li>
  {{/each}}
</ul>
 
{
  "switches": {},
  "viewtypes": {
    "specifier": ""
  },
  "content": {},
  "partials": {
    "listitems": [
      {
        "switches": {
          "hasTextContent": true,
          "hasIcon": false
        },
        "content": {
          "text": "Das erste List-Item als statischer Text"
        }
      },
      {
        "switches": {
          "hasTextContent": true
        },
        "content": {
          "text": "Und hier ein zweites List-Item, auch statischer Text"
        }
      },
      {
        "switches": {
          "hasTextContent": false
        },
        "type": "link",
        "partials": {
          "item": {
            "content": {
              "text": "Drittes List-Item als eingehängtes Link-Atom"
            }
          }
        }
      },
      {
        "switches": {
          "hasTextContent": false
        },
        "type": "link--with-chevron-right",
        "partials": {
          "item": {
            "content": {
              "text": "Abschließend ein viertes, recht langes List-Item als eingehängtes Link-Atom mit Chevron"
            }
          }
        }
      }
    ]
  }
}

No notes defined.