HTML-Prototype von in2code

Components

Stage

Stage home

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.1.1-</insert-markup>

Welcome at TUM Campus Heilbronn

Since fall 2018 the renowned Technical University of Munich is present at the Bildungscampus Heilbronn and offers a wide variety of services to its more than 500 students in five programs. The state-of-the-art campus of the Dieter Schwarz Foundation and the excellence in research and teaching are now an integral part of one of the most innovative regions in Germany.

dfgdfg

dfgfdg

fdgdfg

dfgdfg

rferf

dfgdfg
01
03
Markup: templates/output/06-components/stage/stage-home.html 

<div class="c-stage-home">
  <picture class="c-stage-home__image">
    <source srcset="https://placeholder.in2code.de/2560x800" media="(min-width: 1920px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/1920x800" media="(min-width: 768px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/768x800" type="image/webp"/><img loading="eager" src="https://placeholder.in2code.de/2560x800" width="2560" height="1080" alt=""/>
  </picture>
  <div class="c-stage-home__content">
    <div class="container">
      <header class="frame__header">
        <h1>Welcome at TUM Campus Heilbronn</h1>
      </header>
      <p>Since fall 2018 the renowned<a href="https://www.tum.de/en/" target="_blank" rel="noreferrer">
          <u>Technical University of Munich</u></a> is present at the Bildungscampus Heilbronn and offers a wide variety of services to its more than 500 students in five programs. The state-of-the-art campus of the Dieter Schwarz Foundation and the excellence in research and teaching are now an integral part of one of the most innovative regions in Germany.</p>
    </div>
  </div>
</div>
<div class="c-stage-cards container">
  <div class="c-stage-card c-stage-card--grey">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
  <div class="c-stage-card c-stage-card--orange">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
  <div class="c-stage-card c-stage-card--purple">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
</div>
<div class="c-stage-cards-slider container">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">
        <div class="c-stage-card c-stage-card--grey c-stage-card--slider">
          <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
          <div class="c-stage-card__content">
            <p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
              </svg></a>
          </div>
        </div>
      </li>
      <li class="glide__slide">
        <div class="c-stage-card c-stage-card--orange c-stage-card--slider">
          <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
          <div class="c-stage-card__content">
            <p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
              </svg></a>
          </div>
        </div>
      </li>
      <li class="glide__slide">
        <div class="c-stage-card c-stage-card--purple c-stage-card--slider">
          <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
          <div class="c-stage-card__content">
            <p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
              </svg></a>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="glide__nav">
    <div data-glide-el="controls">
      <button class="btn glide__arrow glide__arrow--prev" type="button" data-glide-dir="&lt;">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
        </svg><span class="u-visually-hidden">Vorheriger Slide</span>
      </button>
    </div>
    <div class="glide__counter glide__counter--current">01</div>
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="btn glide__bullet glide__bullet--active" type="button" data-glide-dir="=0"><span class="u-visually-hidden">Slide 1</span></button>
      <button class="btn glide__bullet" type="button" data-glide-dir="=1"><span class="u-visually-hidden">Slide 2</span></button>
      <button class="btn glide__bullet" type="button" data-glide-dir="=2"><span class="u-visually-hidden">Slide 3</span></button>
    </div>
    <div class="glide__counter glide__counter--total">03</div>
    <div data-glide-el="controls">
      <button class="btn glide__arrow glide__arrow--right" type="button" data-glide-dir="&gt;">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
        </svg><span class="u-visually-hidden">Nächster Slide</span>
      </button>
    </div>
  </div>
</div>
Source: assets/sass/06-components/stage/_components.stage-home.scss, line 11

Stage subpage

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.1.2-</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--grey-light
Grey light
<insert-markup>4.1.2-0</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--grey
Grey
<insert-markup>4.1.2-1</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--grey-dark
Grey dark
<insert-markup>4.1.2-2</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--blue-light-283
Blue light 283
<insert-markup>4.1.2-3</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--blue-light-542
Blue light 542
<insert-markup>4.1.2-4</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--blue
Blue
<insert-markup>4.1.2-5</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--blue-medium
Blue medium
<insert-markup>4.1.2-6</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--blue-dark-301
Blue dark 301
<insert-markup>4.1.2-7</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--blue-dark-540
Blue dark 540
<insert-markup>4.1.2-8</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--orange
Orange
<insert-markup>4.1.2-9</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--orange-light
Orange light
<insert-markup>4.1.2-10</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--green
Green
<insert-markup>4.1.2-11</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--purple
Purple
<insert-markup>4.1.2-12</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--beige
Beige
<insert-markup>4.1.2-13</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--yellow
Yellow
<insert-markup>4.1.2-14</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

.c-stage-subpage__content--state-blue
State blue
<insert-markup>4.1.2-15</insert-markup>

Campus Heilbronn

Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.

Markup: templates/output/06-components/stage/stage-subpage.html 

<div class="c-stage-subpage">
  <picture class="c-stage-subpage__image">
    <source srcset="https://placeholder.in2code.de/2560x800" media="(min-width: 1920px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/1920x800" media="(min-width: 768px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/768x800" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder.in2code.de/2560x800" width="2560" height="1080" alt=""/>
  </picture>
  <div class="container">
    <div class="c-stage-subpage__content [modifier class]">
      <p class="roofline"></p>
      <h1>Campus Heilbronn</h1>
      <p>Studying at TUM Campus Heilbronn is a one-of-a-kind experience: academic excellence, top-notch facilities and stunning architecture combine here with a truly international student body as well as the proximity to Heilbronn’s city center and thriving job market.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/stage/_components.stage-subpage.scss, line 5

Text & Media

Text & Media - Above, center

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.1-</insert-markup>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa

Demo - Textmedia - Above, center

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Markup: templates/output/06-components/textmedia/text-media-ce-center-ce-above.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="1">
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - Above, center</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 11

Text & Media - Below, center

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.2-</insert-markup>

Demo - Textmedia - Below, center

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Markup: templates/output/06-components/textmedia/text-media-ce-center-ce-below.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--center c-textmedia--below c-textmedia--flex">
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - Below, center</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
      </figure>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 19

Text & Media - Beside Text, Left

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.3-</insert-markup>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa

Demo - Textmedia - Beside Text, Left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Markup: templates/output/06-components/textmedia/text-media-ce-left-ce-intext-ce-nowrap.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
      </figure>
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - Beside Text, Left</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 27

Text & Media - Beside Text, Right

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.4-</insert-markup>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa

Demo - Textmedia - Beside Text, Right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Markup: templates/output/06-components/textmedia/text-media-ce-right-ce-intext-ce-nowrap.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
      </figure>
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - Beside Text, Right</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 35

Text & Media - In Text, Left

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.5-</insert-markup>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa

Demo - Textmedia - In Text, Left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Markup: templates/output/06-components/textmedia/text-media-ce-left-ce-intext-ce-wrap.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--left c-textmedia--intext c-textmedia--float">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
      </figure>
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - In Text, Left</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 43

Text & Media - In Text, Right

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.6-</insert-markup>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa

Demo - Textmedia - In Text, Right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Markup: templates/output/06-components/textmedia/text-media-ce-right-ce-intext-ce-wrap.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--float">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image">
        <picture>
          <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050" type="image/webp"/>
          <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750" type="image/webp"/>
          <source srcset="https://placeholder.in2code.de/700x525" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050" alt="" loading="lazy" decoding="async"/>
        </picture>
      </figure>
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - In Text, Right</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 51

Text & Media - Lightbox

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.7-</insert-markup>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa

Demo - Textmedia - Beside Text, Right - With Lightbox

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Markup: templates/output/06-components/textmedia/text-media-lightbox.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--right c-textmedia--intext c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="2" data-ce-images="3">
      <figure class="image"><a class="glightbox" href="https://placeholder.in2code.de/700x525.png" data-gallery="gallery1234" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa">
          <picture>
            <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050.png" type="image/webp"/>
            <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750.png" type="image/webp"/>
            <source srcset="https://placeholder.in2code.de/700x525.png" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050.png" alt="" loading="lazy" decoding="async"/>
          </picture>
          <div class="image__overlay">
            <lupe></lupe>
          </div></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image"><a class="glightbox" href="https://placeholder.in2code.de/700x525.png" data-gallery="gallery1234" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa">
          <picture>
            <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050.png" type="image/webp"/>
            <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750.png" type="image/webp"/>
            <source srcset="https://placeholder.in2code.de/700x525.png" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050.png" alt="" loading="lazy" decoding="async"/>
          </picture>
          <div class="image__overlay">
            <lupe></lupe>
          </div></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image"><a class="glightbox" href="https://placeholder.in2code.de/700x525.png" data-gallery="gallery1234" data-description="">
          <picture>
            <source media="(min-width: 62.5em)" srcset="https://placeholder.in2code.de/1400x1050.png" type="image/webp"/>
            <source media="(min-width: 43.75em)" srcset="https://placeholder.in2code.de/1000x750.png" type="image/webp"/>
            <source srcset="https://placeholder.in2code.de/700x525.png" type="image/webp"/><img src="https://placeholder.in2code.de/1400x1050.png" alt="" loading="lazy" decoding="async"/>
          </picture>
          <div class="image__overlay">
            <lupe></lupe>
          </div></a>
      </figure>
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - Beside Text, Right - With Lightbox</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 59

Text & Media - no images

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.2.8-</insert-markup>

Demo - Textmedia - Above, center

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Markup: templates/output/06-components/textmedia/text-media-no-images.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textmedia  frame-space-before-medium" id="c10006">
  <div class="c-textmedia c-textmedia--center c-textmedia--above c-textmedia--flex">
    <div class="c-textmedia__gallery" data-ce-columns="1" data-ce-images="0">
    </div>
    <div class="c-textmedia__bodytext">
      <!-- Grid/ Element header-->
      <header class="frame__header">
        <h2>Demo - Textmedia - Above, center</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textmedia.scss, line 68

Accordion

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.3-</insert-markup>

Accordion

Markup: templates/output/06-components/accordion.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium frame--full frame--background frame--blue" id="c23861">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Accordion</h2>
  </header>
  <div class="c-accordion">
    <div class="c-accordion__item">
      <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-c1" id="c-accordion__id-c1"><span class="c-accordion__item-title h6">Accordion Title</span><span class="c-accordion__item-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg></span></button>
      <div class="c-accordion__item-panel" id="c-accordion__sect-c1" role="region" aria-labelledby="c-accordion__id-c1">
        <div>
          <div class="rte-content">
            <ul>
              <li><a href="#">Campus Heilbronn</a>
                <ul>
                  <li><a href="#">Test</a></li>
                </ul>
              </li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a>
                <ol>
                  <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
                </ol>
              </li>
              <li><a href="#">Alumni</a></li>
            </ul>
            <p><strong>Strong is used to indicate strong importance.</strong>&nbsp;<a href="#">This is a text link.</a>&nbsp;<em>This text has added emphasis.</em>&nbsp;<strong><a href="#">This is a bold text link.</a></strong>&nbsp;<em><a href="#">This text link has added emphasis.</a></em></p>
            <ul class="ul-style-check">
              <li><a href="#">Campus Heilbronn</a>
                <ul>
                  <li><a href="#">Test</a></li>
                </ul>
              </li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a></li>
              <li><a href="#">Alumni</a>
                <ol>
                  <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
                </ol>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="c-accordion__item">
      <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-c2" id="c-accordion__id-c2"><span class="c-accordion__item-title h6">Accordion Title</span><span class="c-accordion__item-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg></span></button>
      <div class="c-accordion__item-panel" id="c-accordion__sect-c2" role="region" aria-labelledby="c-accordion__id-c2">
        <div>
          <div class="rte-content">
            <ul>
              <li><a href="#">Campus Heilbronn</a></li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a></li>
              <li><a href="#">Alumni</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.accordion.scss, line 5

Quote

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.4-</insert-markup>

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 ipsu.

Max Muster,
CEO Umbrella Corporation

Markup: templates/output/06-components/quote.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium frame--small" id="c23987">
  <div class="c-quote">
    <svg width="73" height="71" viewbox="0 0 73 71" aria-hidden="true" focusable="false">
      <svg width="73" height="71" viewBox="0 0 73 71" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-quote"></use>
      </svg>
    </svg>
    <blockquote>
      <p class="h5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/><br/>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 ipsu.</p>
      <footer itemprop="author publisher">
        <p class="h6" itemprop="name">Max Muster,<br/>CEO Umbrella Corporation</p>
      </footer>
    </blockquote>
  </div>
</div>
Source: assets/sass/06-components/_components.quote.scss, line 5

Banner

Image banner

Downloads

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.7-</insert-markup>
Markup: templates/output/06-components/downloads.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium" id="c53245">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Downloads</h2>
  </header>
  <div class="c-downloads">
    <ul class="flex">
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-arrivals-winter-semester-2023.pdf" target="_blank">Titel des Downloads in kleiner &Uuml;berl&auml;nge</a>
          <p class="c-downloads__item-type">pdf, 126 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-press-mindshift-magazine-second-edition-english.pdf" target="_blank">tum-campus-heilbronn-press-mindshift-magazine-second-edition-english.pdf</a>
          <p class="c-downloads__item-type">pdf, 2 MB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-press-mindshift-magazine-second-edition-german.pdf" target="_blank">tum-campus-heilbronn-press-mindshift-magazine-second-edition-german.pdf</a>
          <p class="c-downloads__item-type">pdf, 2 MB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-student-handbook.pdf" target="_blank">tum-campus-heilbronn-student-handbook.pdf</a>
          <p class="c-downloads__item-type">pdf, 908 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-tum-talk-2023-chn-de.pdf" target="_blank">tum-campus-heilbronn-tum-talk-2023-chn-de.pdf</a>
          <p class="c-downloads__item-type">pdf, 114 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-tum-talk-2023-chn-en.pdf" target="_blank">tum-campus-heilbronn-tum-talk-2023-chn-en.pdf</a>
          <p class="c-downloads__item-type">pdf, 109 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
    </ul>
  </div>
</div>
Source: assets/sass/06-components/_components.downloads.scss, line 5

Highlight

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.8-</insert-markup>
Markup: templates/output/06-components/highlight.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium" id="c5284">
  <div class="c-highlight">
    <picture class="c-highlight__image c-highlight__image--large">
      <source srcset="https://placeholder.in2code.de/1160x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/1160x600" title="" alt="" loading="lazy" maxwidth="1160"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image">
      <source srcset="https://placeholder.in2code.de/580x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/860x600" title="" alt="" loading="lazy" maxwidth="860"/>
    </picture>
    <picture class="c-highlight__image c-highlight__image--large">
      <source srcset="https://placeholder.in2code.de/1160x600" media="(min-width: 1000px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/860x600" media="(min-width: 500px)" type="image/webp"/>
      <source srcset="https://placeholder.in2code.de/440x600" type="image/webp"/><img src="https://placeholder.in2code.de/1160x600" title="" alt="" loading="lazy" maxwidth="1160"/>
    </picture>
  </div>
</div>
Source: assets/sass/06-components/_components.highlight.scss, line 5

Persons

Page menu

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.10-</insert-markup>
Linktext
Linktext
.c-page-menu--grey-light
Grey light
<insert-markup>4.10-0</insert-markup>
Linktext
Linktext
.c-page-menu--grey
Grey
<insert-markup>4.10-1</insert-markup>
Linktext
Linktext
.c-page-menu--grey-dark
Grey dark
<insert-markup>4.10-2</insert-markup>
Linktext
Linktext
.c-page-menu--blue-light-283
Blue light 283
<insert-markup>4.10-3</insert-markup>
Linktext
Linktext
.c-page-menu--blue-light-542
Blue light 542
<insert-markup>4.10-4</insert-markup>
Linktext
Linktext
.c-page-menu--blue
Blue
<insert-markup>4.10-5</insert-markup>
Linktext
Linktext
.c-page-menu--blue-medium
Blue medium
<insert-markup>4.10-6</insert-markup>
Linktext
Linktext
.c-page-menu--blue-dark-301
Blue dark 301
<insert-markup>4.10-7</insert-markup>
Linktext
Linktext
.c-page-menu--blue-dark-540
Blue dark 540
<insert-markup>4.10-8</insert-markup>
Linktext
Linktext
.c-page-menu--orange
Orange
<insert-markup>4.10-9</insert-markup>
Linktext
Linktext
.c-page-menu--orange-light
Orange light
<insert-markup>4.10-10</insert-markup>
Linktext
Linktext
.c-page-menu--green
Green
<insert-markup>4.10-11</insert-markup>
Linktext
Linktext
.c-page-menu--purple
Purple
<insert-markup>4.10-12</insert-markup>
Linktext
Linktext
.c-page-menu--beige
Beige
<insert-markup>4.10-13</insert-markup>
Linktext
Linktext
.c-page-menu--yellow
Yellow
<insert-markup>4.10-14</insert-markup>
Linktext
Linktext
.c-page-menu--state-blue
State blue
<insert-markup>4.10-15</insert-markup>
Linktext
Linktext
Markup: templates/output/06-components/page-menu.html 

<div class="c-page-menu [modifier class]">
  <div class="c-page-menu__item"><a href="#">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>Linktext</span></a></div>
  <div class="c-page-menu__item"><a href="#">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>Linktext</span></a></div>
</div>
Source: assets/sass/08-page/header/menu/_page.scss, line 5

Slider

Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.12-</insert-markup>
Markup: templates/output/06-components/buttons.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-buttons frame-space-before-medium" id="c52234">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Buttons</h2>
  </header>
  <div class="c-buttons c-buttons--left"><a class="btn btn--primary btn--filled btn--icon" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>test</span></a><a class="btn btn--secondary btn--outline" href="/">Test2</a><a class="btn btn--primary btn--outline btn--large btn--icon btn--icon-right" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><span>test3</span></a></div>
</div>
Source: assets/sass/06-components/_components.buttons.scss, line 5

Keyfacts

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.13-</insert-markup>

Key facts

Key fact titleKey fact text
Key fact titleKey fact text
Key fact titleKey fact text
Markup: templates/output/06-components/keyfacts.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-buttons frame-space-before-medium" id="c52234">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Key facts</h2>
  </header>
  <div class="c-keyfacts flex">
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-calendar"></use>
      </svg><b>Key fact title</b><span>Key fact text</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-check"></use>
      </svg><b>Key fact title</b><span>Key fact text</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-poi"></use>
      </svg><b>Key fact title</b><span>Key fact text</span>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.keyfacts.scss, line 5

Textdownload

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.14-</insert-markup>

Text-Downloads

Bodytext
TextlinkTextlink
Markup: templates/output/06-components/textdownload.html 

<!-- Grid/ Element container-->
<div class="frame frame-type-textdownloads frame-space-before-medium" id="c52234">
  <div class="c-textdownload frame--blue-light-283">
    <!-- Grid/ Element header-->
    <header class="frame__header">
      <h2>Text-Downloads</h2>
    </header>
    <div class="c-textdownload__text rte-content">Bodytext</div>
    <div class="c-textdownload__buttons c-buttons"><a class="btn btn--primary btn--filled btn--icon" href="/">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg><span>Textlink</span></a><a class="btn btn--secondary btn--filled" href="/">Textlink</a></div>
  </div>
</div>
Source: assets/sass/06-components/_components.textdownload.scss, line 5

Pagination

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.20-</insert-markup>
Markup: templates/output/06-components/pagination.html 

<div class="c-pagination">
  <ul>
    <li class="c-pagination__previous"><a href="#" rel="0">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
        </svg><span class="u-visually-hidden">Previous</span></a></li>
    <li class="c-pagination__counter">02</li>
    <li class="c-pagination__item"><a href="#">1</a></li>
    <li class="c-pagination__item"><a href="#" aria-current="page">2</a></li>
    <li class="c-pagination__item"><a href="#">3</a></li>
    <li class="c-pagination__item"><a href="#">4</a></li>
    <li class="c-pagination__counter">04</li>
    <li class="c-pagination__next"><a href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
        </svg><span class="u-visually-hidden">Next</span></a></li>
  </ul>
</div>
Source: assets/sass/06-components/_components.pagination.scss, line 1

cookie-banner

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>4.21-</insert-markup>

Dieser Inhalt wird erst nach Zustimmung zu Drittanbieter-Cookies geladen.

Iframe oder andere deaktivierte Dinge. Ab https://www.iubenda.com/de/help/4760-cookie-blockierung-manuelles-tagging#implementierung
Markup: templates/output/06-components/cookie-banner.html 

<div class="cookie-placeholder">
  <p>Dieser Inhalt wird erst nach Zustimmung zu Drittanbieter-Cookies geladen.</p>
  <button class="load-content-btn iubenda-cs-preferences-link btn btn--primary">Inhalt laden</button>
</div>
<div class="cookie-blocked-content u-hide">Iframe oder andere deaktivierte Dinge. Ab https://www.iubenda.com/de/help/4760-cookie-blockierung-manuelles-tagging#implementierung</div>
Source: assets/sass/06-components/_components.cookie-banner.scss, line 5