Barmer Fractal

List: Social Media 

<div class="m-list list--socialmedia">

    <h4 class="list__headline">
        Die Barmer auf:
    </h4>

    <ul class="a-list-basic list--social-icon">
        <li class="list__item ">
            <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--facebook" aria-hidden="true"></i>
            </a>

        </li>
        <li class="list__item ">
            <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--twitter" aria-hidden="true"></i>
            </a>

        </li>
        <li class="list__item ">
            <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--instagram" aria-hidden="true"></i>
            </a>

        </li>
        <li class="list__item ">
            <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--youtube" aria-hidden="true"></i>
            </a>

        </li>
        <li class="list__item ">
            <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--linkedin" aria-hidden="true"></i>
            </a>

        </li>
        <li class="list__item ">
            <a class="a-btn btn--socialmedia" href="#" title="">
                <i class="a-icon icon--xing" aria-hidden="true"></i>
            </a>

        </li>
    </ul>

</div>
 
<div class="m-list {{viewtypes.specifier}}" {{# content.id}}id="{{this}}"{{/content.id}}>
  {{# switches.hasBackButton }}{{ render '@button--back' partials.btnBack merge=true }}{{/ switches.hasBackButton}}

  {{# switches.hasHeadline }}
    {{# switches.hasIcon }}
      {{render '@icon' partials.icon merge=true}}
    {{/switches.hasIcon}}
    <h4 class="list__headline">
      {{# switches.isLinkableHeadline }}
        {{ render '@link' partials.headline merge=true }}
      {{/ switches.isLinkableHeadline }}
      {{^ switches.isLinkableHeadline }}
        {{{content.headline}}}
      {{/ switches.isLinkableHeadline }}
    </h4>
  {{/ switches.hasHeadline }}

  {{render '@list-basic' partials.list merge=true }}
</div>
 
{
  "switches": {
    "hasHeadline": true,
    "hasIcon": false,
    "isLinkableHeadline": false
  },
  "viewtypes": {
    "specifier": "list--socialmedia"
  },
  "content": {
    "headline": "Die Barmer auf:"
  },
  "partials": {
    "list": {
      "viewtypes": {
        "specifier": "list--social-icon"
      },
      "content": {},
      "partials": {
        "listitems": [
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "button--facebook"
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "button--twitter"
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "button--instagram"
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "button--youtube"
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "button--linkedin"
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "button--xing"
          }
        ]
      },
      "switches": {}
    }
  }
}

No notes defined.