Styleguide

Milestones 

<div id="accordion" class="mt-4">
    <div class="card">
        <div>
            <a onclick="if(window.dataLayer){window.dataLayer.push({&#x27;event&#x27;: &#x27;call_to_interact&#x27;,&#x27;event_category&#x27;: &#x27;click_button&#x27;,&#x27;event_action&#x27;: &#x27; in &#x27;,&#x27;event_label&#x27;:&#x27;pageTag&#x3D;timocom-about-us - url&#x3D;/unternehmen/wir-über-uns - language&#x3D;de&#x27;});}" class="card-header btn-light w-100 text-center h4 pt-3 m-0 text-decoration-none color-gray-900 rounded-0 btn collapsed" target="_self" role="button" data-toggle="collapse" href="#multiCollapseOne" aria-expanded="false" aria-controls="multiCollapseOne">2010 - 1997
            </a>
        </div>
        <div id="multiCollapseOne" class="multi-collapse collapse">
            <div class="card-body pt-0 pb-4 px-4">
                <div class="row">
                    <div class="container">
                        <div class="row no-gutters flex-row-reverse">
                            <div class="col-sm">
                                <div class="h5 color-gray-900 pl-2 mt-4 mb-2 d-block d-xl-none d-lg-none">2010</div>
                                <div class="card mt-xl-4 mt-lg-4">
                                    <h3 class="wordbreak card-header h5">Transportbarometer-App</h3>

                                    <div class="card-body">
                                        <p>Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center flex-column d-none d-xl-block d-lg-block col-sm-12 col-md-12 col-lg-1 col-xl-1">
                                <div class="row h-50">
                                    <div class="col border-right">&nbsp;</div>
                                    <div class="col">&nbsp;</div>
                                </div>
                                <div class="m-2">
                                    <span class="h4 color-gray-900">2010</span>
                                </div>
                                <div class="row h-50">
                                    <div class="col border-right"></div>
                                    <div class="col">&nbsp;</div>
                                </div>
                            </div>
                            <div class="col-sm d-none d-xl-block d-lg-block"> </div>
                        </div>
                        <div class="row no-gutters">
                            <div class="col-sm">
                                <div class="h5 color-gray-900 pl-2 mt-4 mb-2 d-block d-xl-none d-lg-none">2010</div>
                                <div class="card mt-xl-4 mt-lg-4">
                                    <h3 class="wordbreak card-header h5">Transportbarometer-App</h3>

                                    <div class="card-body">
                                        <p>Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center flex-column d-none d-xl-block d-lg-block col-sm-12 col-md-12 col-lg-1 col-xl-1">
                                <div class="row h-50">
                                    <div class="col border-right">&nbsp;</div>
                                    <div class="col">&nbsp;</div>
                                </div>
                                <div class="m-2">
                                    <span class="h4 color-gray-900">2010</span>
                                </div>
                                <div class="row h-50">
                                    <div class="col border-right"></div>
                                    <div class="col">&nbsp;</div>
                                </div>
                            </div>
                            <div class="col-sm d-none d-xl-block d-lg-block"> </div>
                        </div>
                        <div class="row no-gutters flex-row-reverse">
                            <div class="col-sm">
                                <div class="h5 color-gray-900 pl-2 mt-4 mb-2 d-block d-xl-none d-lg-none">2017</div>
                                <div class="card mt-xl-4 mt-lg-4">
                                    <h3 class="wordbreak card-header h5">Transportbarometer-App</h3>

                                    <div class="card-body">
                                        <p>Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht.</p>
                                    </div>
                                </div>
                                <div class="card mt-xl-4 mt-lg-4">
                                    <h3 class="wordbreak card-header h5">Transportbarometer-App</h3>

                                    <div class="card-body">
                                        <p>Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center flex-column d-none d-xl-block d-lg-block col-sm-12 col-md-12 col-lg-1 col-xl-1">
                                <div class="row h-50">
                                    <div class="col border-right">&nbsp;</div>
                                    <div class="col">&nbsp;</div>
                                </div>
                                <div class="m-2">
                                    <span class="h4 color-gray-900">2017</span>
                                </div>
                                <div class="row h-50">
                                    <div class="col border-right"></div>
                                    <div class="col">&nbsp;</div>
                                </div>
                            </div>
                            <div class="col-sm d-none d-xl-block d-lg-block"> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div id="{{id}}" class="mt-4">
  {{#each card}}
    <div class="card">
      <div>
        <a
          onclick="{{onClick}}"
          class="card-header btn-light w-100 text-center h4 pt-3 m-0 text-decoration-none color-gray-900 rounded-0 btn collapsed"
          target="_self"
          role="button"
          data-toggle="collapse"
          href="#{{id}}"
          aria-expanded="false"
          aria-controls="{{id}}"
        >{{timespan}}
        </a>
      </div>
      <div id="{{id}}" class="multi-collapse collapse">
        <div class="card-body pt-0 pb-4 px-4">
          <div class="row">
            <div class="container">
              {{#each row}}
                <div class="row no-gutters{{#if reverse}} flex-row-reverse{{/if}}">
                  <div class="col-sm">
                    <div
                      class="h5 color-gray-900 pl-2 mt-4 mb-2 d-block d-xl-none d-lg-none"
                    >{{year}}</div>
                    {{#each card}}
                      <div class="card mt-xl-4 mt-lg-4">
                        {{render "@headline" headline}}
                        <div class="card-body">
                          {{#each paragraphs}}
                            <p>{{this}}</p>
                          {{/each}}
                        </div>
                      </div>
                    {{/each}}
                  </div>
                  <div
                    class="text-center flex-column d-none d-xl-block d-lg-block col-sm-12 col-md-12 col-lg-1 col-xl-1"
                  >
                    <div class="row h-50">
                      <div class="col border-right">&nbsp;</div>
                      <div class="col">&nbsp;</div>
                    </div>
                    <div class="m-2">
                      <span class="h4 color-gray-900">{{year}}</span>
                    </div>
                    <div class="row h-50">
                      <div class="col border-right"></div>
                      <div class="col">&nbsp;</div>
                    </div>
                  </div>
                  <div class="col-sm d-none d-xl-block d-lg-block"> </div>
                </div>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </div>
  {{/each}}
</div>
 
{
  "id": "accordion",
  "card": [
    {
      "timespan": "2010 - 1997",
      "id": "multiCollapseOne",
      "onClick": "if(window.dataLayer){window.dataLayer.push({'event': 'call_to_interact','event_category': 'click_button','event_action': ' in ','event_label':'pageTag=timocom-about-us - url=/unternehmen/wir-über-uns - language=de'});}",
      "row": [
        {
          "reverse": true,
          "year": "2010",
          "card": [
            {
              "headline": {
                "h3": true,
                "class": "wordbreak card-header h5",
                "text": "Transportbarometer-App"
              },
              "paragraphs": [
                "Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht."
              ]
            }
          ]
        },
        {
          "reverse": false,
          "year": "2010",
          "card": [
            {
              "headline": {
                "h3": true,
                "class": "wordbreak card-header h5",
                "text": "Transportbarometer-App"
              },
              "paragraphs": [
                "Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht."
              ]
            }
          ]
        },
        {
          "reverse": true,
          "year": "2017",
          "card": [
            {
              "headline": {
                "h3": true,
                "class": "wordbreak card-header h5",
                "text": "Transportbarometer-App"
              },
              "paragraphs": [
                "Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht."
              ]
            },
            {
              "headline": {
                "h3": true,
                "class": "wordbreak card-header h5",
                "text": "Transportbarometer-App"
              },
              "paragraphs": [
                "Da das Transportbarometer für erfolgreiche Preisverhandlungen unverzichtbar ist, haben wir es auch online zugänglich gemacht."
              ]
            }
          ]
        }
      ]
    }
  ]
}

No notes defined.