Styleguide

Standard Width 2 Col Container: Numbers Definition 

<section class="bg-white py-4 py-lg-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-12 col-lg-10 col-xl-10">
                <h2 class="wordbreak h4 mb-4 text-center">Warum die Zahlen für sich sprechen:</h2>

                <div class="row justify-content-center">
                    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
                        <div class="d-flex flex-row align-items-center pb-4 row">
                            <div class="col-12 col-md-4 d-flex justify-content-center justify-content-md-end">
                                <p class="text-center h1 mb-0 text-primary">
                                    &gt;135k
                                </p>
                            </div>
                            <div class="col-12 col-md-8">
                                <p class="mb-0">
                                    Bei mehr als 135.000 internationalen Systemnutzern finden Sie ganz schnell einen zuverlässigen Geschäftspartner, der Ihren Anforderungen und Bedürfnissen am besten entspricht. Profitieren Sie somit von den Vorteilen eines der größten Transport- und Logistiknetzwerke in Europa.
                                </p>
                            </div>
                        </div>
                        <div class="d-flex flex-row align-items-center pb-4 row">
                            <div class="col-12 col-md-4 d-flex justify-content-center justify-content-md-end">
                                <p class="text-center h1 mb-0 text-primary">
                                    &gt;135k
                                </p>
                            </div>
                            <div class="col-12 col-md-8">
                                <p class="mb-0">
                                    Bei mehr als 135.000 internationalen Systemnutzern finden Sie ganz schnell einen zuverlässigen Geschäftspartner, der Ihren Anforderungen und Bedürfnissen am besten entspricht. Profitieren Sie somit von den Vorteilen eines der größten Transport- und Logistiknetzwerke in Europa.
                                </p>
                            </div>
                        </div>
                        <div class="d-flex flex-row align-items-center pb-4 row">
                            <div class="col-12 col-md-4 d-flex justify-content-center justify-content-md-end">
                                <p class="text-center h1 mb-0 text-primary">
                                    &gt;135k
                                </p>
                            </div>
                            <div class="col-12 col-md-8">
                                <p class="mb-0">
                                    Bei mehr als 135.000 internationalen Systemnutzern finden Sie ganz schnell einen zuverlässigen Geschäftspartner, der Ihren Anforderungen und Bedürfnissen am besten entspricht. Profitieren Sie somit von den Vorteilen eines der größten Transport- und Logistiknetzwerke in Europa.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
                        <div class="d-flex flex-row align-items-center pb-4 row">
                            <div class="col-12 col-md-4 d-flex justify-content-center justify-content-md-end">
                                <p class="text-center h1 mb-0 text-primary">
                                    &gt;135k
                                </p>
                            </div>
                            <div class="col-12 col-md-8">
                                <p class="mb-0">
                                    Bei mehr als 135.000 internationalen Systemnutzern finden Sie ganz schnell einen zuverlässigen Geschäftspartner, der Ihren Anforderungen und Bedürfnissen am besten entspricht. Profitieren Sie somit von den Vorteilen eines der größten Transport- und Logistiknetzwerke in Europa.
                                </p>
                            </div>
                        </div>
                        <div class="d-flex flex-row align-items-center pb-4 row">
                            <div class="col-12 col-md-4 d-flex justify-content-center justify-content-md-end">
                                <p class="text-center h1 mb-0 text-primary">
                                    &gt;135k
                                </p>
                            </div>
                            <div class="col-12 col-md-8">
                                <p class="mb-0">
                                    Bei mehr als 135.000 internationalen Systemnutzern finden Sie ganz schnell einen zuverlässigen Geschäftspartner, der Ihren Anforderungen und Bedürfnissen am besten entspricht. Profitieren Sie somit von den Vorteilen eines der größten Transport- und Logistiknetzwerke in Europa.
                                </p>
                            </div>
                        </div>
                        <div class="d-flex flex-row align-items-center pb-4 row">
                            <div class="col-12 col-md-4 d-flex justify-content-center justify-content-md-end">
                                <p class="text-center h1 mb-0 text-primary">
                                    &gt;135k
                                </p>
                            </div>
                            <div class="col-12 col-md-8">
                                <p class="mb-0">
                                    Bei mehr als 135.000 internationalen Systemnutzern finden Sie ganz schnell einen zuverlässigen Geschäftspartner, der Ihren Anforderungen und Bedürfnissen am besten entspricht. Profitieren Sie somit von den Vorteilen eines der größten Transport- und Logistiknetzwerke in Europa.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="{{class}}">
  <div class="container">
    {{#with container}}
      <div class="row justify-content-center">
        <div class="{{class}}">
          {{render "@headline" headline}}
          <div class="row justify-content-center">
            {{#each column}}
              <div class="{{class}}">
                {{#each definition}}
                  {{render "@numbers-definition"}}
                {{/each}}
              </div>
            {{/each}}
          </div>
        </div>
      </div>
    {{/with}}
  </div>
</section>
 
{
  "class": "bg-white py-4 py-lg-5",
  "container": {
    "class": "col-sm-12 col-md-12 col-lg-10 col-xl-10",
    "headline": {
      "h2": true,
      "class": "wordbreak h4 mb-4 text-center",
      "text": "Warum die Zahlen für sich sprechen:"
    },
    "column": [
      {
        "class": "col-sm-12 col-md-6 col-lg-6 col-xl-6",
        "definition": [
          {
            "number": "",
            "definition": ""
          },
          {
            "number": "",
            "definition": ""
          },
          {
            "number": "",
            "definition": ""
          }
        ]
      },
      {
        "class": "col-sm-12 col-md-6 col-lg-6 col-xl-6",
        "definition": [
          {
            "number": "",
            "definition": ""
          },
          {
            "number": "",
            "definition": ""
          },
          {
            "number": "",
            "definition": ""
          }
        ]
      }
    ]
  }
}

No notes defined.