HTML-Prototype Schulpaket

Components

Navigation

Main-Menu

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

<insert-markup>4.1.1-</insert-markup>
Markup: templates/output/06-components/main-menu.html 

<header class="c-main-navigation">
  <div class="c-main-navigation__container">
    <nav class="c-main-navigation__top-menu o-container">
      <div class="o-flex-line">
        <button class="c-modal-trigger c-main-navigation__burger u-hide@desktop" aria-controls="main-menu-modal" aria-expanded="false" title="Menü öffnen">
          <svg class="c-main-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#bars-3-solid"></use>
          </svg>
        </button><a class="c-main-navigation__logo" href="/index-10-1_default.html" title="Zur Startseite"><img src="Images/logos/logo-example.svg" width="96" height="96" alt="Logo Max-Mustermann-Realschule"/></a>
      </div>
      <ul class="c-main-navigation__list o-list-bare u-hide@below-desktop">
        <li class="c-main-navigation__list-item">
          <button class="c-modal-trigger c-main-navigation__trigger-button" aria-controls="swipe-menu-514" aria-expanded="false" data-swipe-menu-external-trigger="">Aktuelles
          </button>
        </li>
        <li class="c-main-navigation__list-item">
          <button class="c-modal-trigger c-main-navigation__trigger-button" aria-controls="swipe-menu-740" aria-expanded="false" data-swipe-menu-external-trigger="">Schulfamilie
          </button>
        </li>
        <li class="c-main-navigation__list-item">
          <button class="c-modal-trigger c-main-navigation__trigger-button" aria-controls="swipe-menu-94" aria-expanded="false" data-swipe-menu-external-trigger="">Über uns
          </button>
        </li>
        <li class="c-main-navigation__list-item">
          <button class="c-modal-trigger c-main-navigation__trigger-button" aria-controls="swipe-menu-277" aria-expanded="false" data-swipe-menu-external-trigger="">Beratung
          </button>
        </li>
        <li class="c-main-navigation__list-item">
          <button class="c-modal-trigger c-main-navigation__trigger-button" aria-controls="swipe-menu-844" aria-expanded="false" data-swipe-menu-external-trigger="">Über uns
          </button>
        </li>
        <li class="c-main-navigation__list-item"><a class="c-main-navigation__link" href="#">WebUntis</a>
        </li>
      </ul>
      <ul class="c-main-navigation__list o-list-bare">
        <li class="c-main-navigation__list-item"><a class="c-main-navigation__link" href="#" title="User-Login">
            <svg class="c-main-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#user-circle-solid"></use>
            </svg></a></li>
        <li class="c-main-navigation__list-item"><a class="c-main-navigation__link" href="#" title="E-Mail Kontakt">
            <svg class="c-main-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#envelope-solid"></use>
            </svg></a></li>
        <li class="c-main-navigation__list-item"><a class="c-main-navigation__link" href="#" title="Telefon Kontakt">
            <svg class="c-main-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#phone-solid"></use>
            </svg></a></li>
      </ul>
    </nav>
    <div class="c-modal" id="main-menu-modal">
      <div class="c-modal__topbar o-container">
        <button class="c-modal__close-button" aria-controls="main-menu-modal" aria-expanded="false" title="Close modal">
          <svg class="c-modal__close-icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#x-mark-solid"></use>
          </svg>
        </button>
      </div>
      <div class="c-modal__content o-container">
        <nav class="c-swipe-menu-container">
          <ul class="c-swipe-menu c-swipe-menu--root o-list-bare" id="swipe-menu-root">
            <li class="c-swipe-menu__item">
              <button class="c-swipe-menu__button-activate" aria-expanded="false" aria-controls="swipe-menu-514" data-swipe-activate="">Aktuelles
                <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                  <title>Arrow left</title>
                  <use xlink:href="Images/svg/sprite.symbol.svg#arrow-right-small"></use>
                </svg>
              </button>
              <ul class="c-swipe-menu o-list-bare c-swipe-menu--lvl-1" id="swipe-menu-514">
                <li class="c-swipe-menu__item c-swipe-menu__item--deactivate">
                  <button class="c-swipe-menu__button-deactivate" aria-controls="swipe-menu-514" data-swipe-deactivate="">
                    <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                      <title>Arrow left</title>
                      <use xlink:href="Images/svg/sprite.symbol.svg#arrow-left-small"></use>
                    </svg>Back
                  </button>
                </li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Studiengangübersicht</a></li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Vor dem Studium</a></li>
                <li class="c-swipe-menu__item">
                  <button class="c-swipe-menu__button-activate" aria-expanded="false" aria-controls="swipe-menu-514" data-swipe-activate="">Im Studium
                    <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                      <title>Arrow left</title>
                      <use xlink:href="Images/svg/sprite.symbol.svg#arrow-right-small"></use>
                    </svg>
                  </button>
                  <ul class="c-swipe-menu o-list-bare c-swipe-menu--lvl-2" id="swipe-menu-514">
                    <li class="c-swipe-menu__item c-swipe-menu__item--deactivate">
                      <button class="c-swipe-menu__button-deactivate" aria-controls="swipe-menu-514" data-swipe-deactivate="">
                        <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                          <title>Arrow left</title>
                          <use xlink:href="Images/svg/sprite.symbol.svg#arrow-left-small"></use>
                        </svg>Back
                      </button>
                    </li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Studienstart</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">International Office</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Finanzierung und Stipendien</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Studienstart</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">International Office</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Finanzierung und Stipendien</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Studienstart</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">International Office</a></li>
                    <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Finanzierung und Stipendien</a></li>
                  </ul>
                </li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Nach dem Studium</a></li>
              </ul>
            </li>
            <li class="c-swipe-menu__item">
              <button class="c-swipe-menu__button-activate" aria-expanded="false" aria-controls="swipe-menu-740" data-swipe-activate="">Schulfamilie
                <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                  <title>Arrow left</title>
                  <use xlink:href="Images/svg/sprite.symbol.svg#arrow-right-small"></use>
                </svg>
              </button>
              <ul class="c-swipe-menu o-list-bare c-swipe-menu--lvl-1" id="swipe-menu-740">
                <li class="c-swipe-menu__item c-swipe-menu__item--deactivate">
                  <button class="c-swipe-menu__button-deactivate" aria-controls="swipe-menu-740" data-swipe-deactivate="">
                    <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                      <title>Arrow left</title>
                      <use xlink:href="Images/svg/sprite.symbol.svg#arrow-left-small"></use>
                    </svg>Back
                  </button>
                </li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Berufsbegleitende Studiengänge und Modulstudien</a></li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Berufsbegleitende Hochschulzertifikate und Fachseminare</a></li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Vorbereitungskurse und vieles mehr</a></li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Für Unternehmen</a></li>
              </ul>
            </li>
            <li class="c-swipe-menu__item">
              <button class="c-swipe-menu__button-activate" aria-expanded="false" aria-controls="swipe-menu-94" data-swipe-activate="">Über uns
                <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                  <title>Arrow left</title>
                  <use xlink:href="Images/svg/sprite.symbol.svg#arrow-right-small"></use>
                </svg>
              </button>
              <ul class="c-swipe-menu o-list-bare c-swipe-menu--lvl-1" id="swipe-menu-94">
                <li class="c-swipe-menu__item c-swipe-menu__item--deactivate">
                  <button class="c-swipe-menu__button-deactivate" aria-controls="swipe-menu-94" data-swipe-deactivate="">
                    <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                      <title>Arrow left</title>
                      <use xlink:href="Images/svg/sprite.symbol.svg#arrow-left-small"></use>
                    </svg>Back
                  </button>
                </li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Jobs &amp; Karriere</a></li>
              </ul>
            </li>
            <li class="c-swipe-menu__item">
              <button class="c-swipe-menu__button-activate" aria-expanded="false" aria-controls="swipe-menu-277" data-swipe-activate="">Beratung
                <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                  <title>Arrow left</title>
                  <use xlink:href="Images/svg/sprite.symbol.svg#arrow-right-small"></use>
                </svg>
              </button>
              <ul class="c-swipe-menu o-list-bare c-swipe-menu--lvl-1" id="swipe-menu-277">
                <li class="c-swipe-menu__item c-swipe-menu__item--deactivate">
                  <button class="c-swipe-menu__button-deactivate" aria-controls="swipe-menu-277" data-swipe-deactivate="">
                    <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                      <title>Arrow left</title>
                      <use xlink:href="Images/svg/sprite.symbol.svg#arrow-left-small"></use>
                    </svg>Back
                  </button>
                </li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Jobs &amp; Karriere</a></li>
              </ul>
            </li>
            <li class="c-swipe-menu__item">
              <button class="c-swipe-menu__button-activate" aria-expanded="false" aria-controls="swipe-menu-844" data-swipe-activate="">Über uns
                <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                  <title>Arrow left</title>
                  <use xlink:href="Images/svg/sprite.symbol.svg#arrow-right-small"></use>
                </svg>
              </button>
              <ul class="c-swipe-menu o-list-bare c-swipe-menu--lvl-1" id="swipe-menu-844">
                <li class="c-swipe-menu__item c-swipe-menu__item--deactivate">
                  <button class="c-swipe-menu__button-deactivate" aria-controls="swipe-menu-844" data-swipe-deactivate="">
                    <svg class="c-swipe-menu__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
                      <title>Arrow left</title>
                      <use xlink:href="Images/svg/sprite.symbol.svg#arrow-left-small"></use>
                    </svg>Back
                  </button>
                </li>
                <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">Kontakt</a></li>
              </ul>
            </li>
            <li class="c-swipe-menu__item"><a class="c-swipe-menu__link" href="#">WebUntis</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="c-modal__footer o-container">
        <!-- START MOBILE QUICK NAVIGATION-->
        <ul class="c-main-navigation__quick-navigation o-list-bare">
          <li class="c-main-navigation__quick-navigation-item"><a class="c-main-navigation__quick-navigation-link" href="#" title="User-Login">
              <svg class="c-main-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#user-circle-solid"></use>
              </svg></a></li>
          <li class="c-main-navigation__quick-navigation-item"><a class="c-main-navigation__quick-navigation-link" href="#" title="E-Mail Kontakt">
              <svg class="c-main-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#envelope-solid"></use>
              </svg></a></li>
          <li class="c-main-navigation__quick-navigation-item"><a class="c-main-navigation__quick-navigation-link" href="#" title="Telefon Kontakt">
              <svg class="c-main-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#phone-solid"></use>
              </svg></a></li>
        </ul>
        <!-- END MOBILE QUICK NAVIGATION-->
      </div>
    </div>
  </div>
</header>
Source: assets/sass/06-components/_components.navigation.scss, line 15

Quick Navigation

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

<insert-markup>4.3-</insert-markup>
Markup: templates/output/06-components/quick-navigation.html 

<nav class="c-quick-navigation">
  <ul class="c-quick-navigation__list o-list-bare o-grid o-grid-1-1 o-grid-1-1-1@tablet o-grid-1-1-1-1@desktop">
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon lock-closed</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#lock-closed"></use>
        </svg><span class="c-quick-navigation__label">Interner Bereich</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon phone</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#phone"></use>
        </svg><span class="c-quick-navigation__label">Kontakt</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon calendar-days</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#calendar-days"></use>
        </svg><span class="c-quick-navigation__label">Termine</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon downloads</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#downloads"></use>
        </svg><span class="c-quick-navigation__label">Formulare &amp; Downloads</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon sun</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#sun"></use>
        </svg><span class="c-quick-navigation__label">Ganztagsschule</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon heart</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#heart"></use>
        </svg><span class="c-quick-navigation__label">Mensa</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon info</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#info"></use>
        </svg><span class="c-quick-navigation__label">Corona-Infos</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon user-group</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#user-group"></use>
        </svg><span class="c-quick-navigation__label">Willkommenklasse für ukr. Kinder</span></a></li>
  </ul>
</nav>
Source: assets/sass/06-components/_components.quick-navigation.scss, line 5

Page-Footer

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

<insert-markup>4.4-</insert-markup>
Markup: templates/output/06-components/page-footer.html 

<footer class="c-page-footer">
  <div class="o-container">
    <p class="c-page-footer__copyright">© Max-Mustermann-Realschule - 2023</p>
    <ul class="c-page-footer__list o-list-bare">
      <li class="c-page-footer__list-item"><a class="c-page-footer__list-link" href="#">Kontakt</a></li>
      <li class="c-page-footer__list-item"><a class="c-page-footer__list-link" href="#">Datenschutz</a></li>
      <li class="c-page-footer__list-item"><a class="c-page-footer__list-link" href="#">Impressum</a></li>
    </ul>
  </div>
</footer>
Source: assets/sass/06-components/_components.page-footer.scss, line 5

Page-Slider

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

<insert-markup>4.6-</insert-markup>
  • Slider image 0
  • Slider image 1
  • Slider image 2
  • Slider image 3
  • Slider image 4

Max-Mustermann-Realschule

Zum Image-Film
Markup: templates/output/06-components/page-slider.html 

<section class="c-page-slider">
  <div class="c-page-slider__slider splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 0" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
                https://picsum.photos/id/191/2500/450 2500w,
                https://picsum.photos/id/191/2000/450 2000w,
                https://picsum.photos/id/191/1800/450 1800w,
                https://picsum.photos/id/191/1600/450 1600w,
                https://picsum.photos/id/191/1400/450 1400w,
                https://picsum.photos/id/191/1200/450 1200w,
                https://picsum.photos/id/191/1000/450 1000w,
                https://picsum.photos/id/191/800/400 800w,
                https://picsum.photos/id/191/600/300 600w,
                https://picsum.photos/id/191/500/250 500w,
                https://picsum.photos/id/191/400/200 400w
              " sizes="
                (min-width: 2300px) 2500px,
                (min-width: 2000px) 2000px,
                (min-width: 1800px) 1800px,
                (min-width: 1600px) 1600px,
                (min-width: 1400px) 1400px,
                (min-width: 1200px) 1200px,
                (min-width: 1000px) 1000px,
                (min-width: 800px) 800px,
                (min-width: 600px) 600px,
                (min-width: 500px) 500px,
                400px
              "/></li>
        <li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 1" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
                https://picsum.photos/id/107/2500/450 2500w,
                https://picsum.photos/id/107/2000/450 2000w,
                https://picsum.photos/id/107/1800/450 1800w,
                https://picsum.photos/id/107/1600/450 1600w,
                https://picsum.photos/id/107/1400/450 1400w,
                https://picsum.photos/id/107/1200/450 1200w,
                https://picsum.photos/id/107/1000/450 1000w,
                https://picsum.photos/id/107/800/400 800w,
                https://picsum.photos/id/107/600/300 600w,
                https://picsum.photos/id/107/500/250 500w,
                https://picsum.photos/id/107/400/200 400w
              " sizes="
                (min-width: 2300px) 2500px,
                (min-width: 2000px) 2000px,
                (min-width: 1800px) 1800px,
                (min-width: 1600px) 1600px,
                (min-width: 1400px) 1400px,
                (min-width: 1200px) 1200px,
                (min-width: 1000px) 1000px,
                (min-width: 800px) 800px,
                (min-width: 600px) 600px,
                (min-width: 500px) 500px,
                400px
              "/></li>
        <li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 2" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
                https://picsum.photos/id/177/2500/450 2500w,
                https://picsum.photos/id/177/2000/450 2000w,
                https://picsum.photos/id/177/1800/450 1800w,
                https://picsum.photos/id/177/1600/450 1600w,
                https://picsum.photos/id/177/1400/450 1400w,
                https://picsum.photos/id/177/1200/450 1200w,
                https://picsum.photos/id/177/1000/450 1000w,
                https://picsum.photos/id/177/800/400 800w,
                https://picsum.photos/id/177/600/300 600w,
                https://picsum.photos/id/177/500/250 500w,
                https://picsum.photos/id/177/400/200 400w
              " sizes="
                (min-width: 2300px) 2500px,
                (min-width: 2000px) 2000px,
                (min-width: 1800px) 1800px,
                (min-width: 1600px) 1600px,
                (min-width: 1400px) 1400px,
                (min-width: 1200px) 1200px,
                (min-width: 1000px) 1000px,
                (min-width: 800px) 800px,
                (min-width: 600px) 600px,
                (min-width: 500px) 500px,
                400px
              "/></li>
        <li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 3" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
                https://picsum.photos/id/206/2500/450 2500w,
                https://picsum.photos/id/206/2000/450 2000w,
                https://picsum.photos/id/206/1800/450 1800w,
                https://picsum.photos/id/206/1600/450 1600w,
                https://picsum.photos/id/206/1400/450 1400w,
                https://picsum.photos/id/206/1200/450 1200w,
                https://picsum.photos/id/206/1000/450 1000w,
                https://picsum.photos/id/206/800/400 800w,
                https://picsum.photos/id/206/600/300 600w,
                https://picsum.photos/id/206/500/250 500w,
                https://picsum.photos/id/206/400/200 400w
              " sizes="
                (min-width: 2300px) 2500px,
                (min-width: 2000px) 2000px,
                (min-width: 1800px) 1800px,
                (min-width: 1600px) 1600px,
                (min-width: 1400px) 1400px,
                (min-width: 1200px) 1200px,
                (min-width: 1000px) 1000px,
                (min-width: 800px) 800px,
                (min-width: 600px) 600px,
                (min-width: 500px) 500px,
                400px
              "/></li>
        <li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 4" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
                https://picsum.photos/id/278/2500/450 2500w,
                https://picsum.photos/id/278/2000/450 2000w,
                https://picsum.photos/id/278/1800/450 1800w,
                https://picsum.photos/id/278/1600/450 1600w,
                https://picsum.photos/id/278/1400/450 1400w,
                https://picsum.photos/id/278/1200/450 1200w,
                https://picsum.photos/id/278/1000/450 1000w,
                https://picsum.photos/id/278/800/400 800w,
                https://picsum.photos/id/278/600/300 600w,
                https://picsum.photos/id/278/500/250 500w,
                https://picsum.photos/id/278/400/200 400w
              " sizes="
                (min-width: 2300px) 2500px,
                (min-width: 2000px) 2000px,
                (min-width: 1800px) 1800px,
                (min-width: 1600px) 1600px,
                (min-width: 1400px) 1400px,
                (min-width: 1200px) 1200px,
                (min-width: 1000px) 1000px,
                (min-width: 800px) 800px,
                (min-width: 600px) 600px,
                (min-width: 500px) 500px,
                400px
              "/></li>
      </ul>
    </div>
  </div>
  <div class="c-page-slider__content-wrapper">
    <div class="c-page-slider__content">
      <h1>Max-Mustermann-Realschule</h1><a class="btn u-mt-4" href="#">Zum Image-Film</a>
    </div>
  </div>
</section>
Source: assets/sass/06-components/_components.page-slider.scss, line 5

Cards

Vertical card - with image

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

<insert-markup>4.7.1-</insert-markup>
#
27.10.2022

Neue Lehrer:innen im Kollegium

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früch
Markup: templates/output/06-components/cards/card-vertical-image.html 
<a class="c-card c-card--vertical c-card--vertical-image" href="/index-10-3_default.html">
  <picture class="c-card__image" data-container-images="">
    <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/191/500/250, https://picsum.photos/id/191/1000/500 2x" data-source-500="https://picsum.photos/id/191/600/300, https://picsum.photos/id/191/1200/600 2x" data-source-600="https://picsum.photos/id/191/700/350, https://picsum.photos/id/191/1400/700 2x" data-source-700="https://picsum.photos/id/191/800/400, https://picsum.photos/id/191/1600/800 2x" data-source-800="https://picsum.photos/id/191/900/450, https://picsum.photos/id/191/1800/900 2x" data-source-default="https://picsum.photos/id/191/400/200, https://picsum.photos/id/191/800/400 2x"/><img src="https://picsum.photos/id/191/900/450, https://picsum.photos/id/191/1800/900 2x" width="900" height="450" alt="#"/>
  </picture>
  <div class="c-card__content"><span class="c-card__date">27.10.2022</span>
    <h3 class="c-card__title">Neue Lehrer:innen im Kollegium</h3>
    <p class="c-card__description">Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früch</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
      <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
        <title>Chevron right</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
      </svg></span>
  </div></a>
Source: assets/sass/06-components/_components.cards.scss, line 11

Vertical card - text only

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

<insert-markup>4.7.2-</insert-markup>
27.10.2022

Neue Lehrer:innen im Kollegium

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früch
Markup: templates/output/06-components/cards/card-vertical-text.html 
<a class="c-card c-card--vertical" href="/index-10-3_default.html">
  <div class="c-card__content"><span class="c-card__date">27.10.2022</span>
    <h3 class="c-card__title">Neue Lehrer:innen im Kollegium</h3>
    <p class="c-card__description">Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früch</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
      <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
        <title>Chevron right</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
      </svg></span>
  </div></a>
Source: assets/sass/06-components/_components.cards.scss, line 19

Horizontal card - text only

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

<insert-markup>4.7.3-</insert-markup>

SpaceX Starship booster heads to launch pad for the fifth time

For the fifth time in five months, SpaceX has transported its most advanced Starship booster prototype from the Starbase factory.
Markup: templates/output/06-components/cards/card-horizontal-text.html 
<a class="c-card c-card--horizontal" href="#">
  <div class="c-card__content">
    <time class="c-card__date" datetime="2021-08-24">13. Oktober 2022</time>
    <h3 class="c-card__title">SpaceX Starship booster heads to launch pad for the fifth time</h3>
    <p class="c-card__description">For the fifth time in five months, SpaceX has transported its most advanced Starship booster prototype from the Starbase factory.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
      <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
        <title>Chevron right</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
      </svg></span>
  </div></a>
Source: assets/sass/06-components/_components.cards.scss, line 27

Horizontal card - with image

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

<insert-markup>4.7.4-</insert-markup>

SpaceX Starship booster heads to launch pad for the fifth time

For the fifth time in five months, SpaceX has transported its most advanced Starship booster prototype from the Starbase factory.

#
Markup: templates/output/06-components/cards/card-horizontal-image.html 
<a class="c-card c-card--horizontal c-card--horizontal-image" href="#">
  <div class="c-card__content">
    <time class="c-card__date" datetime="2021-08-24">13. Oktober 2022</time>
    <h3 class="c-card__title">SpaceX Starship booster heads to launch pad for the fifth time</h3>
    <p class="c-card__description">For the fifth time in five months, SpaceX has transported its most advanced Starship booster prototype from the Starbase factory.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
      <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
        <title>Chevron right</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
      </svg></span>
  </div>
  <div class="c-card__image"><img src="https://picsum.photos/id/112/240/120" width="240" height="120" alt="#" loading="lazy"/></div></a>
Source: assets/sass/06-components/_components.cards.scss, line 35

Card List

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

<insert-markup>4.8-</insert-markup>
Markup: templates/output/06-components/cards/card-list.html 

<ul class="c-card-list o-list-bare">
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal c-card--horizontal-image" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">17. November 2022</time>
        <h3 class="c-card__title">SpaceX Starship booster heads to launch pad for the fifth time</h3>
        <p class="c-card__description">NASA might grow more hostile against China in the space domain.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div>
      <div class="c-card__image"><img src="https://picsum.photos/id/112/240/120" width="240" height="120" alt="#" loading="lazy"/></div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal c-card--horizontal-image" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">10. November 2022</time>
        <h3 class="c-card__title">NASA’s Artemis program is set to launch a new satellite in the next decade</h3>
        <p class="c-card__description">NASA has selected three companies to further advance work on deployable solar array systems that will help power the agency's human and robotic exploration of the Moon under Artemis.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div>
      <div class="c-card__image"><img src="https://picsum.photos/id/108/240/120" width="240" height="120" alt="#" loading="lazy"/></div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal c-card--horizontal-image" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">20. Oktober 2022</time>
        <h3 class="c-card__title">NASA, Rice University Mark 60th Anniversary of John F. Kennedy Speech</h3>
        <p class="c-card__description">La misión Prueba de redireccionamiento del asteroide doble (DART, por sus siglas en inglés) de la NASA, la primera en el mundo que pone a prueba una tecnología para defender a la Tierra de posibles peligros de asteroides o cometas, impactará con su objetivo, un asteroide que no supone ninguna amenaza para la Tierra, a las 7:14 pm EDT del lunes 26</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div>
      <div class="c-card__image"><img src="https://picsum.photos/id/108/240/120" width="240" height="120" alt="#" loading="lazy"/></div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal c-card--horizontal-image" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">3. November 2022</time>
        <h3 class="c-card__title">China’s official view of NASA’s Artemis program appears to be dismissive</h3>
        <p class="c-card__description">A new Aerospace study wars that in crises and conflicts, &quot;commercial space actors risk getting caught in the middle of a tense and escalatory environment.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div>
      <div class="c-card__image"><img src="https://picsum.photos/id/116/240/120" width="240" height="120" alt="#" loading="lazy"/></div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">20. Oktober 2022</time>
        <h3 class="c-card__title">Report: Industry has to face reality that commercial satellites will be targets in war</h3>
        <p class="c-card__description">NASA has selected three companies to further advance work on deployable solar array systems that will help power the agency's human and robotic exploration of the Moon under Artemis.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">20. Oktober 2022</time>
        <h3 class="c-card__title">NASA, Rice University Mark 60th Anniversary of John F. Kennedy Speech</h3>
        <p class="c-card__description">NASA might grow more hostile against China in the space domain.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal c-card--horizontal-image" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">20. Oktober 2022</time>
        <h3 class="c-card__title">SpaceX teams refining countdown procedures for Starship testing</h3>
        <p class="c-card__description">NASA and Rice University in Houston will host multiple news in September to celebrate the 60th anniversary of John F. Kennedy’s historic speech at Rice Stadium, rallying the nation to land astronauts on the Moon before the end of the decade and bring the crew safely back to Earth.</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div>
      <div class="c-card__image"><img src="https://picsum.photos/id/116/240/120" width="240" height="120" alt="#" loading="lazy"/></div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
  <li class="c-card-list__item">
    <!-- START GENERIC CARD CONTENT--><a class="c-card c-card--horizontal" href="/index-10-3_default.html">
      <div class="c-card__content">
        <time class="c-card__date" datetime="2021-08-24">13. Oktober 2022</time>
        <h3 class="c-card__title">SpaceX Starship booster heads to launch pad for the fifth time</h3>
        <p class="c-card__description">La misión Prueba de redireccionamiento del asteroide doble (DART, por sus siglas en inglés) de la NASA, la primera en el mundo que pone a prueba una tecnología para defender a la Tierra de posibles peligros de asteroides o cometas, impactará con su objetivo, un asteroide que no supone ninguna amenaza para la Tierra, a las 7:14 pm EDT del lunes 26</p><span class="c-card__fake-link" aria-hidden="true">Weiterlesen
          <svg class="c-card__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
            <title>Chevron right</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
          </svg></span>
      </div></a>
    <!-- END GENERIC CARD CONTENT-->
  </li>
</ul>
<nav class="c-card-list-pagination">
  <ul class="c-card-list-pagination__list o-list-bare">
    <li class="c-card-list-pagination__item c-card-list-pagination__item--previous"><a class="c-card-list-pagination__link" href="#">
        <svg class="c-card-list-pagination__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
          <title>Arrow left</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#arrow-long-left"></use>
        </svg><span class="u-visually-hidden--mobile-only">Vorherige Seite</span></a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 1 der Suchliste navigieren">1</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 2 der Suchliste navigieren">2</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--dots"><span class="c-card-list-pagination__dots" aria-hidden="true">…</span></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 8 der Suchliste navigieren">8</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 9 der Suchliste navigieren">9</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--next"><a class="c-card-list-pagination__link" href="#"><span class="u-visually-hidden--mobile-only">Nächste Seite</span>
        <svg class="c-card-list-pagination__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
          <title>Arrow left</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#arrow-long-right"></use>
        </svg></a></li>
  </ul>
</nav>
Source: assets/sass/06-components/_components.card-list.scss, line 5

Card List Pagination

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

<insert-markup>4.8.1-</insert-markup>
Markup: templates/output/06-components/cards/card-list-pagination.html 

<nav class="c-card-list-pagination">
  <ul class="c-card-list-pagination__list o-list-bare">
    <li class="c-card-list-pagination__item c-card-list-pagination__item--previous"><a class="c-card-list-pagination__link" href="#">
        <svg class="c-card-list-pagination__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
          <title>Arrow left</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#arrow-long-left"></use>
        </svg><span class="u-visually-hidden--mobile-only">Vorherige Seite</span></a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 1 der Suchliste navigieren">1</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 2 der Suchliste navigieren">2</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--dots"><span class="c-card-list-pagination__dots" aria-hidden="true">…</span></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 8 der Suchliste navigieren">8</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--regular"><a class="c-card-list-pagination__link" href="#" title="Zu Seite 9 der Suchliste navigieren">9</a></li>
    <li class="c-card-list-pagination__item c-card-list-pagination__item--next"><a class="c-card-list-pagination__link" href="#"><span class="u-visually-hidden--mobile-only">Nächste Seite</span>
        <svg class="c-card-list-pagination__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
          <title>Arrow left</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#arrow-long-right"></use>
        </svg></a></li>
  </ul>
</nav>
Source: assets/sass/06-components/_components.card-list.scss, line 51

Events

Event-List

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

<insert-markup>4.9.1-</insert-markup>
Markup: templates/output/06-components/events/event-list.html 

<ul class="c-event-list o-list-bare o-grid o-grid-1-1@tablet">
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">iPad-Einführungsveranstaltung</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023, 10:00 - 12:00</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">iPad-Einführungsveranstaltung</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023, 10:00 - 12:00</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">Basta-Projekt</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">Internationaler Safer Internet Day</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023, 10:00 - 12:00</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">Basta-Projekt</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023, 10:00 - 12:00</span>
        </div>
        <div class="c-event-list__meta-location">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon location</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#location-solid-mini"></use>
          </svg><span>Mensa</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">SMV-Fachingsparty</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023, 10:00 - 12:00</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">2. Methodentag 'Aktive 5 + 6</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023, 10:00 - 12:00</span>
        </div>
        <div class="c-event-list__meta-location">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon location</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#location-solid-mini"></use>
          </svg><span>Zimmer E26</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
  <li class="c-event-list__item"><a class="c-event-list__link" href="/index-10-5_default.html">
      <h3 class="c-event-list__title">Vorstellung der Wahlpflichtfächergruppen (BwR / Französisch)</h3>
      <div class="c-event-list__meta-wrapper">
        <div class="c-event-list__meta-date">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon calendar</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
          </svg><span class="c-event-list__date">11.01.2023, 10:00 - 12:00</span>
        </div>
        <div class="c-event-list__meta-location">
          <svg class="c-event-list__meta-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
            <title>Icon location</title>
            <use xlink:href="Images/svg/sprite.symbol.svg#location-solid-mini"></use>
          </svg><span>Zimmer E16</span>
        </div>
      </div><span class="c-event-list__fake-link" aria-hidden="true">Weiterlesen
        <svg class="c-event-list__icon-chevron" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Chevron right</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#chevron-right"></use>
        </svg></span></a></li>
</ul>
Source: assets/sass/06-components/events/_components.events.scss, line 11

Event-Tiles

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

<insert-markup>4.9.2-</insert-markup>
  • 11. JanDatum
  • 10:00Uhrzeit
  • 8ABeteiligte
  • Ballhaus und KuKoOrt
Markup: templates/output/06-components/events/event-tiles.html 

<ul class="c-event-tiles o-list-bare o-grid o-grid-1-1@tablet o-grid-1-1-1@desktop">
  <li class="c-event-tiles__item">
    <svg class="c-event-tiles__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
      <title>Icon calendar-solid-mini</title>
      <use xlink:href="Images/svg/sprite.symbol.svg#calendar-solid-mini"></use>
    </svg><span class="c-event-tiles__title">11. Jan</span><span class="c-event-tiles__description">Datum</span>
  </li>
  <li class="c-event-tiles__item">
    <svg class="c-event-tiles__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
      <title>Icon clock-solid-mini</title>
      <use xlink:href="Images/svg/sprite.symbol.svg#clock-solid-mini"></use>
    </svg><span class="c-event-tiles__title">10:00</span><span class="c-event-tiles__description">Uhrzeit</span>
  </li>
  <li class="c-event-tiles__item">
    <svg class="c-event-tiles__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
      <title>Icon user-group-solid-mini</title>
      <use xlink:href="Images/svg/sprite.symbol.svg#user-group-solid-mini"></use>
    </svg><span class="c-event-tiles__title">8A</span><span class="c-event-tiles__description">Beteiligte</span>
  </li>
  <li class="c-event-tiles__item">
    <svg class="c-event-tiles__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
      <title>Icon location-solid-mini</title>
      <use xlink:href="Images/svg/sprite.symbol.svg#location-solid-mini"></use>
    </svg><span class="c-event-tiles__title">Ballhaus und KuKo</span><span class="c-event-tiles__description">Ort</span>
  </li>
</ul>
Source: assets/sass/06-components/events/_components.events.scss, line 25

Text & Media

Text & Media - Above, center

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

Use classes 'ce-center ce-above'

<insert-markup>4.10.1-</insert-markup>

Demo - Textmedia - Above, center

#
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
#
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

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 

<div class="frame frame-type-textmedia" id="c29917">
  <header>
    <h2>Demo - Textmedia - Above, center</h2>
  </header>
  <div class="ce-textpic ce-center ce-above">
    <div class="ce-gallery" data-gallery-columns="2">
      <figure class="image">
        <picture data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
        </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="ce-bodytext">
      <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.textimage.scss, line 11

Text & Media - Below, center

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

Use classes 'ce-center ce-below'

<insert-markup>4.10.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
#
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 

<div class="frame frame-type-textmedia" id="c5385">
  <header>
    <h2>Demo - Textmedia - Below, center</h2>
  </header>
  <div class="ce-textpic ce-center ce-below">
    <div class="ce-bodytext">
      <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="ce-gallery" data-gallery-columns="2">
      <figure class="image">
        <picture data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
        </picture>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.textimage.scss, line 21

Text & Media - Beside Text, Left

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

Use classes 'ce-left ce-intext ce-nowrap'

<insert-markup>4.10.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
#
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 

<div class="frame frame-type-textmedia" id="c10203">
  <div class="ce-textpic ce-left ce-intext ce-nowrap">
    <div class="ce-gallery" data-gallery-columns="2">
      <figure class="image">
        <picture data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
        </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="ce-bodytext">
      <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.textimage.scss, line 31

Text & Media - Beside Text, Right

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

Use classes 'ce-right ce-intext ce-nowrap'

<insert-markup>4.10.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
#
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 

<div class="frame frame-type-textmedia" id="c23774">
  <div class="ce-textpic ce-right ce-intext ce-nowrap">
    <div class="ce-gallery" data-gallery-columns="2">
      <figure class="image">
        <picture data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
        </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="ce-bodytext">
      <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.textimage.scss, line 41

Text & Media - In Text, Left

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

Use classes 'ce-left ce-intext'

<insert-markup>4.10.5-</insert-markup>

Demo - Textmedia - In Text, Left

#
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
#
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

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

<div class="frame frame-type-textmedia" id="c16230">
  <header>
    <h2>Demo - Textmedia - In Text, Left</h2>
  </header>
  <div class="ce-textpic ce-left ce-intext">
    <div class="ce-gallery" data-gallery-columns="2">
      <figure class="image">
        <picture data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
        </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="ce-bodytext">
      <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>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.textimage.scss, line 51

Text & Media - In Text, Right

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

Use classes 'ce-right ce-intext'

<insert-markup>4.10.6-</insert-markup>

Demo - Textmedia - In Text, Right

#
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
#
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

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

<div class="frame frame-type-textmedia" id="c19714">
  <header>
    <h2>Demo - Textmedia - In Text, Right</h2>
  </header>
  <div class="ce-textpic ce-right ce-intext">
    <div class="ce-gallery" data-gallery-columns="2">
      <figure class="image">
        <picture data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
        </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 data-container-images="">
          <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
        </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="ce-bodytext">
      <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>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.textimage.scss, line 61

Lightbox

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

<insert-markup>4.11-</insert-markup>

Er hört leise Schritte hinter sich:

#
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
#
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

Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen?

Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.

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

<div class="frame frame-type-textmedia" id="c29917">
  <header>
    <h2>Er hört leise Schritte hinter sich:</h2>
  </header>
  <div class="ce-textpic ce-center ce-above">
    <div class="ce-gallery" data-gallery-columns="3">
      <figure class="image"><a class="c-lightbox" href="https://picsum.photos/id/11//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></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="c-lightbox" href="https://picsum.photos/id/13//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></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="c-lightbox" href="https://picsum.photos/id/15//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></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="c-lightbox" href="https://picsum.photos/id/16//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
    </div>
    <div class="ce-bodytext">
      <p>Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen?</p>
      <p>Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.</p>
    </div>
  </div>
</div>
Source: assets/sass/06-components/_components.lightbox.scss, line 1

Tabs

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

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

<nav class="c-tabs">
  <ul class="c-tabs__list o-list-bare">
    <li class="c-tabs__item"><a class="c-tabs__link c-tabs__link--active" href="#">Tab Item 1</a></li>
    <li class="c-tabs__item"><a class="c-tabs__link" href="#">Tab Item 2</a></li>
    <li class="c-tabs__item"><a class="c-tabs__link" href="#">Tab Item 3</a></li>
  </ul>
</nav>
Source: assets/sass/06-components/_components.tabs.scss, line 5

Download-List

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

<insert-markup>4.13-</insert-markup>
  • Download
  • Download
  • Download
  • Download
Markup: templates/output/06-components/download-list.html 

<ul class="c-download-list o-list-bare">
  <li class="c-download-list__item">
    <div class="c-download-list__content">
      <svg class="c-download-list__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
        <title>Paper clip mini</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#paper-clip-mini"></use>
      </svg><span class="c-download-list__text" aria-hidden="true">resume_back_end_developer.pdf</span>
    </div><a class="c-download-list__link" href="#" target="_blank" title="Download resume_back_end_developer.pdf">Download</a>
  </li>
  <li class="c-download-list__item">
    <div class="c-download-list__content">
      <svg class="c-download-list__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
        <title>Paper clip mini</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#paper-clip-mini"></use>
      </svg><span class="c-download-list__text" aria-hidden="true">coverletter_back_end_developer.pdf</span>
    </div><a class="c-download-list__link" href="#" target="_blank" title="Download coverletter_back_end_developer.pdf">Download</a>
  </li>
  <li class="c-download-list__item">
    <div class="c-download-list__content">
      <svg class="c-download-list__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
        <title>Paper clip mini</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#paper-clip-mini"></use>
      </svg><span class="c-download-list__text" aria-hidden="true">resume_front_end_developer.pdf</span>
    </div><a class="c-download-list__link" href="#" target="_blank" title="Download resume_front_end_developer.pdf">Download</a>
  </li>
  <li class="c-download-list__item">
    <div class="c-download-list__content">
      <svg class="c-download-list__icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
        <title>Paper clip mini</title>
        <use xlink:href="Images/svg/sprite.symbol.svg#paper-clip-mini"></use>
      </svg><span class="c-download-list__text" aria-hidden="true">coverletter_front_end_developer.pdf</span>
    </div><a class="c-download-list__link" href="#" target="_blank" title="Download coverletter_front_end_developer.pdf">Download</a>
  </li>
</ul>
Source: assets/sass/06-components/_components.download-list.scss, line 1

Image-Banner

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

<insert-markup>4.14-</insert-markup>
Banner image

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.

Markup: templates/output/06-components/image-banner.html 

<div class="c-image-banner">
  <picture class="c-image-banner__image-container" data-container-images="">
    <source data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x" data-source-500="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-600="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-800="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-900="https://picsum.photos/id/11/900/450, https://picsum.photos/id/11/1800/900 2x" data-source-1000="https://picsum.photos/id/11/1000/500, https://picsum.photos/id/11/2000/1000 2x" data-source-1100="https://picsum.photos/id/11/1100/550, https://picsum.photos/id/11/2200/1100 2x" data-source-1200="https://picsum.photos/id/11/1200/600, https://picsum.photos/id/11/2400/1200 2x" srcset="#" media="(min-width: 0)"/><img class="c-image-banner__image" src="https://picsum.photos/id/11/1200/900" alt="Banner image" width="1200" height="600"/>
  </picture>
  <div class="c-image-banner__content o-container">
    <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.</p>
  </div>
</div>
Source: assets/sass/06-components/_components.image-banner.scss, line 5

Stats-List

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

<insert-markup>4.15-</insert-markup>
  • 600Schüler
  • 23Lehrkräfte
  • 20Jahre Erfahrung
Markup: templates/output/06-components/stats-list.html 

<ul class="c-stats-list o-list-bare o-grid o-grid-1-1@tablet o-grid-1-1-1@desktop">
  <li class="c-stats-list__item">
    <svg class="c-stats-list__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#user-group-solid"></use>
    </svg><span class="c-stats-list__item-value">600</span><span class="c-stats-list__item-label">Schüler</span>
  </li>
  <li class="c-stats-list__item">
    <svg class="c-stats-list__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#user-group-solid"></use>
    </svg><span class="c-stats-list__item-value">23</span><span class="c-stats-list__item-label">Lehrkräfte</span>
  </li>
  <li class="c-stats-list__item">
    <svg class="c-stats-list__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#user-group-solid"></use>
    </svg><span class="c-stats-list__item-value">20</span><span class="c-stats-list__item-label">Jahre Erfahrung</span>
  </li>
</ul>
Source: assets/sass/06-components/_components.stats-list.scss, line 5

Flash-Message

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

<insert-markup>4.16-</insert-markup>

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.

c-flash--success
Flash-message with success color
<insert-markup>4.16-0</insert-markup>

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.

c-flash--warning
Flash-message with warning color
<insert-markup>4.16-1</insert-markup>

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.

c-flash--danger
Flash-message with error color
<insert-markup>4.16-2</insert-markup>

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.

c-flash--info
Flash-message with info color
<insert-markup>4.16-3</insert-markup>

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.

Markup: templates/output/06-components/flash-message.html 

<p class="c-flash [modifier class]">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.</p>
Source: assets/sass/06-components/_components.flash-message.scss, line 5