Eigenschaften

Anwendungsbereich

Anpassungsmöglichkeiten


Artikel mit Bild links

Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  <section class="element-wrapper article-gray">
    <div class="container">
      <div class="row">
        <div class="article-wrapper">
          <div class="col-xs-12 col-sm-6 article-img hidden-xs">
            <img src="/_catalogs/masterpage/layouts/eah-jena/images/blankslide400x400.png" alt="" />
          </div>
          <div class="col-xs-12 col-sm-6 article-text">
            <div class="title">Überschrift</div>
            <div class="article-content content-text-left">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
              dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
              clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
              consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
              sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
              sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  

Artikel mit Bild rechts

Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  <section class="element-wrapper article-gray">
    <div class="container">
      <div class="row">
        <div class="article-wrapper">
          <div class="col-xs-12 col-sm-6 article-text">
            <div class="title">Überschrift</div>
            <div class="article-content content-text-left">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
              dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
              clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
              consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
              sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
              sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 article-img hidden-xs">
            <img src="/_catalogs/masterpage/layouts/eah-jena/images/blankslide400x400.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </section>
  

Artikel mit Bild links (und Hindergrund Blau) und Button

Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  <section class="element-wrapper article-blue">
    <div class="container">
      <div class="row">
        <div class="article-wrapper">
          <div class="col-xs-12 col-sm-6 article-img hidden-xs">
            <img src="/_catalogs/masterpage/layouts/eah-jena/images/blankslide400x400.png" alt="" />
          </div>
          <div class="col-xs-12 col-sm-6 article-text">
            <div class="title">Überschrift</div>
            <div class="article-content content-text-left">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
              dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
              clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
              consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
              sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
              sea takimata sanctus est Lorem ipsum dolor sit amet.
              <div class="button-wrapper">
                <a class="btn btn-blue" role="button" href="#">
                  Mehr Erfahren
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  

Artikel mit Bild rechst (und Hindergrund Blau) und Button

Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    <section class="element-wrapper article-blue">
      <div class="container">
        <div class="row">
          <div class="article-wrapper">
            <div class="col-xs-12 col-sm-6 article-text">
              <div class="title">Überschrift</div>
              <div class="article-content content-text-left">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
                clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
                sea takimata sanctus est Lorem ipsum dolor sit amet.
                <div class="button-wrapper">
                  <a class="btn btn-blue" role="button" href="#">
                    Mehr Erfahren
                  </a>
                </div>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 article-img hidden-xs">
              <img src="/_catalogs/masterpage/layouts/eah-jena/images/blankslide400x400.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>