Timeline

Short Description:

The timeline component is supposed to present certain "historical" moments as highlights. To do this, it uses the news content fragments that the editor can select. On the ship page, the component can be used to show the history of a ship (christening, shipyard, etc.).

Marketing Purpose:

This component is used to record moments in time and to prepare them appealingly for the user. In this way, he can learn more background knowledge at different points.

Figma - Schiffe

Figma - AOS (live)

Example

AIDAnova

es gibt viel zu erzählen

2022

12. August 2022

Blauer Engel für AIDAnova

AIDAnova erhält als erstes Kreuzfahrtschiff den Blauen Engel für umweltfreundliches Schiffsdesign

Mehr erfahren

2022

12. August 2022

2022

11. August 2022

Blauer Engel für AIDAnova

AIDAnova erhält als erstes Kreuzfahrtschiff den Blauen Engel für umweltfreundliches Schiffsdesign

button label

2022

11. August 2022

Properties
Markup
JSON


    

    
        news:
        /content/dam/aida-component-library/demo/fragments/aida_structure/news/news1,/content/dam/aida-component-library/demo/fragments/aida_structure/news/news2
    

    
        sling:resourceType:
        aida-component-library/core/components/content/timeline

    <div class="timeline">
  <div id="timeline-65372015d8" class="cmp-timeline" data-initialized="">
    <div class="cmp-timeline__title-container">
      <div id="title-1fd2437003" class="cmp-title">
        <h1 class="cmp-title__text ">
          <span>AIDAnova</span>
        </h1>
      </div>
      <div id="title-24d13e0d39" class="cmp-title">
        <h2 class="cmp-title__text ">
          <span>es gibt viel zu erzählen</span>
        </h2>
      </div>
    </div>
    <div class="cmp-timeline__cards">
      <div class="cmp-timeline__carousel flickity-enabled is-draggable is-fade" data-flickity="" tabindex="0">
        <div class="flickity-viewport" style="height: 2368.34px;">
          <div class="flickity-slider" style="transform: translateX(50%);">
            <div class="cmp-timeline__card flickity-cell is-selected" style="transform: translateX(-50%); opacity: 1;">
              <span class="cmp-timeline__date-oldest"> 2022 </span>
              <div class="cmp-timeline__card-content">
                <div class="cmp-timeline__image">
                  <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-353-CP-Timeline/_jcr_content/root/responsivegrid/demo/component/timeline_copy_copy.coreimg.85{.width}.jpeg/1682696648780/news-2.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/news-2.jpg" id="image-0" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                    <img src="/content/dam/aida-component-library/demo/images/schiffe/news-2.jpg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="768" height="576" alt="Blauer Engel für AIDAnova">
                  </div>
                </div>
                <div class="cmp-timeline__content">
                  <p class="cmp-timeline__date"> 12. August 2022 </p>
                  <div class="cmp-timeline__headline">
                    <div id="title-0" class="cmp-title">
                      <h2 class="cmp-title__text ">
                        <span>Blauer Engel für AIDAnova</span>
                      </h2>
                    </div>
                  </div>
                  <div class="cmp-timeline__description">
                    <div id="text-0" class="cmp-text">
                      <p>AIDAnova erhält als erstes Kreuzfahrtschiff den Blauen Engel für umweltfreundliches Schiffsdesign<br>
                      </p>
                    </div>
                  </div>
                  <div class="cmp-timeline__link">
                    <a id="button-0" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
                      <span class="cmp-button__text">Mehr erfahren</span>
                    </a>
                  </div>
                </div>
              </div>
              <span class="cmp-timeline__date-newest"> 2022 </span>
              <div class="cmp-timeline__date--current"> 12. August 2022 </div>
            </div>
            <div class="cmp-timeline__card flickity-cell" aria-hidden="true" style="transform: translateX(-50%); opacity: 0;">
              <span class="cmp-timeline__date-oldest"> 2022 </span>
              <div class="cmp-timeline__card-content">
                <div class="cmp-timeline__image">
                  <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-353-CP-Timeline/_jcr_content/root/responsivegrid/demo/component/timeline_copy_copy.coreimg.85{.width}.jpeg/1682696645528/news-1.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/news-1.jpg" id="image-1" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                    <img src="/content/dam/aida-component-library/demo/images/schiffe/news-1.jpg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="768" height="576" alt="Blauer Engel für AIDAnova">
                  </div>
                </div>
                <div class="cmp-timeline__content">
                  <p class="cmp-timeline__date"> 11. August 2022 </p>
                  <div class="cmp-timeline__headline">
                    <div id="title-1" class="cmp-title">
                      <h2 class="cmp-title__text ">
                        <span>Blauer Engel für AIDAnova</span>
                      </h2>
                    </div>
                  </div>
                  <div class="cmp-timeline__description">
                    <div id="text-1" class="cmp-text">
                      <p>AIDAnova erhält als erstes Kreuzfahrtschiff den Blauen Engel für umweltfreundliches Schiffsdesign<br>
                      </p>
                    </div>
                  </div>
                  <div class="cmp-timeline__link">
                    <a id="button-1" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
                      <span class="cmp-button__text">button label</span>
                    </a>
                  </div>
                </div>
              </div>
              <span class="cmp-timeline__date-newest"> 2022 </span>
              <div class="cmp-timeline__date--current"> 11. August 2022 </div>
            </div>
          </div>
        </div><button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous" disabled="true" style="left: -668px;"><svg class="flickity-button-icon" viewBox="0 0 100 100">
            <title>Previous</title>
            <path d="M 10, 50
    L 60, 100
    L 70, 90
    L 30, 50
    L 70, 10
    L 60, 0
    Z" class="arrow"></path>
          </svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next" style="right: -668px;"><svg class="flickity-button-icon" viewBox="0 0 100 100">
            <title>Next</title>
            <path d="M 10, 50
    L 60, 100
    L 70, 90
    L 30, 50
    L 70, 10
    L 60, 0
    Z" class="arrow" transform="translate(100, 100) rotate(180)"></path>
          </svg></button>
        <div class="flickity-page-dots"><button type="button" class="flickity-page-dot is-selected" aria-current="step">View slide 1</button><button type="button" class="flickity-page-dot">View slide 2</button></div>
      </div>
    </div>
  </div>
</div>

myAIDA

Careers

Page Authoring

Navigation

Containers

Utilities

Timeline

Short Description:

Marketing Purpose:

Example

AIDAnova

es gibt viel zu erzählen

Blauer Engel für AIDAnova