Styleguide

Figure Caption Row 

<section class="bg-gray-20 mb-5 p-0">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-8">
                <div class="d-flex flex-wrap bg-white shadow-sm">
                    <figure role="figure" class="m-0 w-100 h-100 w-lg-50">
                        <img src="/STATIC/binary/images/global/card-secure.svg" alt="Das TIMOCOM Sicherheitsnetz" class="bg-blue-100" title="Das TIMOCOM Sicherheitsnetz" width="100%" />
                    </figure>
                    <figcaption class="m-0 w-100 w-lg-50 d-flex px-4 flex-column justify-content-center">
                        <h2 class="wordbreak wordbreak mt-4">Das TIMOCOM Sicherheitsnetz</h2>
                        <p class="mt-3 lead">Wir bieten maximalen Schutz für Ihre Geschäfte. Darum vertrauen uns so viele Kunden.</p>
                        <p>
                            <a href="/services/sicherheit" title="Sicherheit ist im Bereich Frachtenbörsen eines der zentralen Themen. Hier geht es um den Schutz unserer Kunden vor &#x27;Schwarzen Schafen&#x27; in der Transportbranche." target="_self">Hier erfahren, wie es funktioniert &gt;</a>
                        </p>
                    </figcaption>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="mt-5 col-sm-12 col-md-8">
                <div class="d-flex flex-wrap bg-white shadow-sm flex-row-reverse">
                    <figure role="figure" class="m-0 w-100 h-100 w-lg-50">
                        <img src="/STATIC/binary/images/global/card-secure.svg" alt="Das TIMOCOM Sicherheitsnetz" class="bg-blue-100" title="Das TIMOCOM Sicherheitsnetz" width="100%" />
                    </figure>
                    <figcaption class="m-0 w-100 w-lg-50 d-flex px-4 flex-column justify-content-center">
                        <h2 class="wordbreak wordbreak mt-4">Das TIMOCOM Sicherheitsnetz</h2>
                        <p class="mt-3 lead">Wir bieten maximalen Schutz für Ihre Geschäfte. Darum vertrauen uns so viele Kunden.</p>
                        <p>
                            <a href="/services/sicherheit" title="Sicherheit ist im Bereich Frachtenbörsen eines der zentralen Themen. Hier geht es um den Schutz unserer Kunden vor &#x27;Schwarzen Schafen&#x27; in der Transportbranche." target="_self">Hier erfahren, wie es funktioniert &gt;</a>
                        </p>
                    </figcaption>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="{{class}}">
  <div class="container">
    {{#each row}}
      <div class="{{class}}">
        {{#with column}}
          <div class="{{class}}">
            <div class="d-flex flex-wrap bg-white shadow-sm{{#if reverse}} flex-row-reverse{{/if}}">
              {{#with figure}}
                <figure role="figure" class="m-0 w-100 h-100 w-lg-50">
                  <img
                    src="{{src}}"
                    alt="{{alt}}"
                    class="bg-blue-100"
                    title="{{title}}"
                    width="100%"
                  />
                </figure>
              {{/with}}
              {{#with caption}}
                <figcaption
                  class="m-0 w-100 w-lg-50 d-flex px-4 flex-column justify-content-center"
                >
                  <h2 class="wordbreak wordbreak mt-4">{{headline}}</h2>
                  <p class="mt-3 lead">{{lead}}</p>
                  <p>
                    {{#with link}}
                      <a
                        href="{{href}}"
                        title="{{title}}"
                        target="_self"
                      >{{{text}}}</a>
                    {{/with}}
                  </p>
                </figcaption>
              {{/with}}
            </div>
          </div>
        {{/with}}
      </div>
    {{/each}}
  </div>
</section>
 
{
  "class": "bg-gray-20 mb-5 p-0",
  "row": [
    {
      "class": "row justify-content-center",
      "column": {
        "class": "col-sm-12 col-md-8",
        "reverse": false,
        "figure": {
          "src": "/STATIC/binary/images/global/card-secure.svg",
          "alt": "Das TIMOCOM Sicherheitsnetz",
          "title": "Das TIMOCOM Sicherheitsnetz"
        },
        "caption": {
          "headline": "Das TIMOCOM Sicherheitsnetz",
          "lead": "Wir bieten maximalen Schutz für Ihre Geschäfte. Darum vertrauen uns so viele Kunden.",
          "link": {
            "href": "/services/sicherheit",
            "title": "Sicherheit ist im Bereich Frachtenbörsen eines der zentralen Themen. Hier geht es um den Schutz unserer Kunden vor 'Schwarzen Schafen' in der Transportbranche.",
            "text": "Hier erfahren, wie es funktioniert &gt;"
          }
        }
      }
    },
    {
      "class": "row justify-content-center",
      "column": {
        "class": "mt-5 col-sm-12 col-md-8",
        "reverse": true,
        "figure": {
          "src": "/STATIC/binary/images/global/card-secure.svg",
          "alt": "Das TIMOCOM Sicherheitsnetz",
          "title": "Das TIMOCOM Sicherheitsnetz"
        },
        "caption": {
          "headline": "Das TIMOCOM Sicherheitsnetz",
          "lead": "Wir bieten maximalen Schutz für Ihre Geschäfte. Darum vertrauen uns so viele Kunden.",
          "link": {
            "href": "/services/sicherheit",
            "title": "Sicherheit ist im Bereich Frachtenbörsen eines der zentralen Themen. Hier geht es um den Schutz unserer Kunden vor 'Schwarzen Schafen' in der Transportbranche.",
            "text": "Hier erfahren, wie es funktioniert &gt;"
          }
        }
      }
    }
  ]
}
  • Handle: @figure-caption-row
  • Preview:
  • Filesystem Path: components/sections/figure-caption-row/figure-caption-row.hbs

No notes defined.