Styleguide

Transport Lexicon 

<section>
    <div class="container bg-white">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-12 mt-3 lexicon" aria-label="Lexicon index">
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/a">a</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/b">b</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/c">c</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/d">d</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/e">e</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/f">f</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/g">g</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/h">h</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/i">i</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/j">j</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/k">k</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/l">l</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/m">m</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/n">n</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/o">o</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/p">p</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/q">q</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/r">r</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/s">s</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/t">t</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/u">u</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/v">v</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/w">w</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/x">x</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block" href="/lexicon/transportlexikon/y">y</a>
                    <a class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block bg-gray-300 text-white" href="/lexicon/transportlexikon/z">z</a>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="pt-4 pb-4 bg-white">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-8 col-lg-8 col-xl-8 lexicon" aria-label="lexicon entry teaser">
                <ul class="list-group border px-3 pt-2">
                    <li class="list-group-item border-top-0 border-right-0 border-bottom border-left-0 mt-3">
                        <h3 class="h5"><a href="/lexicon/transportlexikon/zeitfenstermanagement" title="Zeitfenstermanagementsystem">Zeitfenstermanagementsystem</a></h3>
                        <div class="my-2">
                            <p>
                                Was ist Zeitfenstermanagement?<br />Das Wort Zeitfenstermanagement stammt aus der Logistik und ist eine Form des Rampenmanagements. Das vorwiegende Ziel eines solchen Systems ist es, Standzeiten
                                <a href="/lexicon/transportlexikon/zeitfenstermanagement" title="Zeitfenstermanagementsystem">[...]</a>
                            </p>
                        </div>
                    </li>
                    <li class="list-group-item border-top-0 border-right-0 border-bottom-0 border-left-0 mt-3">
                        <h3 class="h5"><a href="/lexicon/transportlexikon/zulieferer" title="Zulieferer">Zulieferer</a></h3>
                        <div class="my-2">
                            <p>
                                Was ist ein Zulieferer?<br>Bei einem Zulieferer handelt es sich um eine natürliche oder juristische Person, die Einzelteile oder Module herstellt. Diese Teile wiederum sind Bestandteil des
                                <a href="/lexicon/transportlexikon/zulieferer" title="Zulieferer">[...]</a>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
 
<section>
  <div class="container bg-white">
    <div class="container">
      <div class="row justify-content-center text-center">
        <div class="col-12 mt-3 lexicon" aria-label="Lexicon index">
          {{#each navigation}}
            <a
              class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block"
              href="/lexicon/transportlexikon/{{this}}"
            >{{this}}</a>
          {{/each}}
          <a
            class="abcBox text-uppercase p-3 mb-1 bg-gray-200 rounded d-inline-block bg-gray-300 text-white"
            href="/lexicon/transportlexikon/z"
          >z</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="pt-4 pb-4 bg-white">
  <div class="container">
    <div class="row justify-content-center">
      <div
        class="col-sm-12 col-md-8 col-lg-8 col-xl-8 lexicon"
        aria-label="lexicon entry teaser"
      >
        <ul class="list-group border px-3 pt-2">
          {{#each item}}
            <li
              class="list-group-item border-top-0 border-right-0 border-bottom{{#if @last}}-0{{/if}} border-left-0 mt-3"
            >
              {{#with link}}
                <h3 class="h5"><a
                    href="{{href}}"
                    title="{{title}}"
                  >{{{text}}}</a></h3>
              {{/with}}
              <div class="my-2"><p>
                  {{{teaser}}}
                  {{#with link}}
                    <a href="{{href}}" title="{{title}}">[...]</a>
                  {{/with}}
                </p>
              </div>
            </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</section>
 
{
  "navigation": [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y"
  ],
  "item": [
    {
      "teaser": "Was ist Zeitfenstermanagement?<br />Das Wort Zeitfenstermanagement stammt aus der Logistik und ist eine Form des Rampenmanagements. Das vorwiegende Ziel eines solchen Systems ist es, Standzeiten",
      "link": {
        "href": "/lexicon/transportlexikon/zeitfenstermanagement",
        "title": "Zeitfenstermanagementsystem",
        "text": "Zeitfenstermanagementsystem"
      }
    },
    {
      "teaser": "Was ist ein Zulieferer?<br>Bei einem Zulieferer handelt es sich um eine natürliche oder juristische Person, die Einzelteile oder Module herstellt. Diese Teile wiederum sind Bestandteil des",
      "link": {
        "href": "/lexicon/transportlexikon/zulieferer",
        "title": "Zulieferer",
        "text": "Zulieferer"
      }
    }
  ]
}
  • Handle: @transport-lexicon
  • Preview:
  • Filesystem Path: components/tools/transport-lexicon/transport-lexicon.hbs

No notes defined.