Icon Information Teaser

Short description:

Teaser to further topics/content pages.

Marketing purpose:

Users should receive interesting and further content recommendations at the end of the page.

Container style settings.:

Same Height - ensure the same height of components in the container
Auto Gap Vertical - ensure vertical margins (left and right) between components
Auto Gap Horizontal - ensure horizontal margins (top and bottom) between components

Page Design Example

Reisen mit AIDA

opens in a new tab

Design Component

Reisen mit AIDA

opens in a new tab

Einzucheckendes Gepäck (große Koffer)

Anzahl, Maße und Gewicht Icon InformationHinweise zum Packen

Handgepäck

Anzahl, Maße und Gewicht Hinweise zum Packen

Über-, Sonder- oder Sportgepäck

Nach Rücksprache mit dem AIDA Kundencenter ist es möglich zusätzliches Gepäck mit in den Urlaub zu nehmen.

Mehr erfahren

Das darf nicht mit an Bord

Nach Rücksprache mit dem AIDA Kundencenter ist es möglich zusätzliches Gepäck mit in den Urlaub zu nehmen.

Mehr erfahren

Packtipps für Ihren Familienurlaub

Für die ganz Kleinen Für kleine Abenteurer

Properties
Markup
JSON


    

    
        layout:
        responsiveGrid
    

    
        sling:resourceType:
        aida-component-library/core/components/container/container
    

    
        cq:styleIds:
        1642499251674,1640174374131,1643023979594

    <div class="container responsivegrid cmp-container--autogap-vertical cmp-container--autogap-horizontal">
  <div id="container-29cbd8a97d" class="cmp-container">
    <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 aem-Grid--phone--12 ">
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-b8b231183c" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>Einzucheckendes Gepäck (große Koffer)</span>
            </h3>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-bb2b4e8063-cta-bab9e12e43" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Anzahl, Maße und Gewicht </a>
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-bb2b4e8063-cta-a5e32f41a6" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Icon InformationHinweise zum Packen </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy.coreimg{.width}.svg/1657122479927/abreise.svg" data-cmp-filereference="/content/dam/aida-component-library/icons/abreise.svg" id="teaser-bb2b4e8063-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy.coreimg.svg/1657122479927/abreise.svg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="43" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-b47a4b9fbb" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>Handgepäck</span>
            </h3>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-3db3e3ae68-cta-fd636e2967" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Anzahl, Maße und Gewicht </a>
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-3db3e3ae68-cta-fc5ecf5c0b" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Hinweise zum Packen </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy_copy.coreimg{.width}.svg/1657122475933/briefcase-big.svg" data-cmp-filereference="/content/dam/aida-component-library/icons/briefcase-big.svg" id="teaser-3db3e3ae68-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy_copy.coreimg.svg/1657122475933/briefcase-big.svg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="42" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-c7358f51fe" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>Über-, Sonder- oder Sportgepäck</span>
            </h3>
            <div class="cmp-teaser__description">
              <p>Nach Rücksprache mit dem AIDA Kundencenter ist es möglich zusätzliches Gepäck mit in den Urlaub zu nehmen.</p>
            </div>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-8401078992-cta-33537403d5" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Mehr erfahren </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy_copy_828587711.coreimg{.width}.svg/1657122477268/archiv.svg" data-cmp-filereference="/content/dam/aida-component-library/icons/archiv.svg" id="teaser-8401078992-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy_copy_828587711.coreimg.svg/1657122477268/archiv.svg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="48" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-281b779e02" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>Das darf nicht mit an Bord</span>
            </h3>
            <div class="cmp-teaser__description">
              <p>Nach Rücksprache mit dem AIDA Kundencenter ist es möglich zusätzliches Gepäck mit in den Urlaub zu nehmen.</p>
            </div>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-4ded1b7a0b-cta-a2b471c60c" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Mehr erfahren </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy_copy_828.coreimg{.width}.svg/1657122473210/cancel.svg" data-cmp-filereference="/content/dam/aida-component-library/icons/cancel.svg" id="teaser-4ded1b7a0b-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/teaser_copy_copy_828.coreimg.svg/1657122473210/cancel.svg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="48" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-9680c35def" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>Packtipps für Ihren Familienurlaub</span>
            </h3>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-510c8082a3-cta-2d66391855" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Für die ganz Kleinen </a>
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-510c8082a3-cta-b3774e6a0d" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Für kleine Abenteurer </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/family?ts=1713869383711&amp;dpr=off&amp;fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/family.svg" id="teaser-510c8082a3-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="https://s7e5a.scene7.com/is/content/aida/family?ts=1713869383711&amp;dpr=off&amp;fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="52" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

An- & Abreise

Per Bahn, Flugzeug oder Auto sowie Infos zu Check-in und Check-out

Mehr erfahren

Reisedokumente

Der Inhalt der verlinkten Seite in einem Satz zusammengefasst.

Mehr erfahren

Barrierefreiheit

Der Inhalt der verlinkten Seite in einem Satz zusammengefasst.

Mehr erfahren

Properties
Markup
JSON


    

    
        layout:
        responsiveGrid
    

    
        sling:resourceType:
        aida-component-library/core/components/container/container
    

    
        cq:styleIds:
        1642499251674,1643023979594,1640174374131

    <div class="container responsivegrid cmp-container--autogap-vertical cmp-container--autogap-horizontal">
  <div id="container-fe4ef992a7" class="cmp-container">
    <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 aem-Grid--phone--12 ">
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-07149b1270" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>An- &amp; Abreise</span>
            </h3>
            <div class="cmp-teaser__description">
              <p>Per Bahn, Flugzeug oder Auto sowie Infos zu Check-in und Check-out</p>
            </div>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-baa50b878a-cta-4d434a74ef" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Mehr erfahren </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo_1923292726/component/container_copy_copy_/teaser_copy.coreimg{.width}.svg/1657122479927/abreise.svg" data-cmp-filereference="/content/dam/aida-component-library/icons/abreise.svg" id="teaser-baa50b878a-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo_1923292726/component/container_copy_copy_/teaser_copy.coreimg.svg/1657122479927/abreise.svg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="43" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-b1d6b3793b" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>Reisedokumente</span>
            </h3>
            <div class="cmp-teaser__description">
              <p>Der Inhalt der verlinkten Seite in einem Satz zusammengefasst.</p>
            </div>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-1f5f4358bb-cta-ac16967f7c" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Mehr erfahren </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo_1923292726/component/container_copy_copy_/teaser_copy_copy.coreimg{.width}.svg/1657122478659/dokumente.svg" data-cmp-filereference="/content/dam/aida-component-library/icons/dokumente.svg" id="teaser-1f5f4358bb-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/aida-component-library/library/page-authoring/teaser/AIDA-94-CP-Icon-Information-Teaser/_jcr_content/root/responsivegrid/demo_1923292726/component/container_copy_copy_/teaser_copy_copy.coreimg.svg/1657122478659/dokumente.svg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="50" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="teaser cmp-teaser--type-icon-information aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--0 aem-GridColumn--default--4" data-initialized="">
        <div id="teaser-a06429390a" class="cmp-teaser" data-initialized="">
          <div class="cmp-teaser__content">
            <h3 class="cmp-teaser__title">
              <span>Barrierefreiheit</span>
            </h3>
            <div class="cmp-teaser__description">
              <p>Der Inhalt der verlinkten Seite in einem Satz zusammengefasst.</p>
            </div>
            <div class="cmp-teaser__action-container">
              <a class="cmp-teaser__action-link cmp-teaser__action-link--button" id="teaser-a9c38ba524-cta-a7157f8fb9" href="/content/aida-component-library/demo-pages/test-components/AIDA-94-CP-Icon-Information-Teaser.html"> Mehr erfahren </a>
            </div>
          </div>
          <div class="cmp-teaser__image">
            <div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/handicap-2?ts=1713869466256&amp;dpr=off&amp;fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/handicap.svg" id="teaser-a9c38ba524-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="https://s7e5a.scene7.com/is/content/aida/handicap-2?ts=1713869466256&amp;dpr=off&amp;fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="61" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

myAIDA

Careers

Page Authoring

Navigation

Containers

Utilities

Icon Information Teaser

Short description:

Marketing purpose:

Container style settings.:

Page Design Example

Design Component

Einzucheckendes Gepäck (große Koffer)

Handgepäck

Über-, Sonder- oder Sportgepäck

Das darf nicht mit an Bord

Packtipps für Ihren Familienurlaub

An- & Abreise

Reisedokumente

Barrierefreiheit