Basic Image

Short Description:

The Basic Image is a simple image component with no text or other visual elements. It can be used responsively on our website.

Marketing purpose:

Inserting images for visual effects.

Image Aspect Ratio

The image component has the aspect-ratio functionality with which you can choose the different ratios according to the design specifications.

Grid

The image is a very straightforward component. If you want to achive a group of two or more images, you can use the container component and choose the margin between the images by selecting the auto gap style.

Page Design Example

Schiffe

opens in a new tab

Component Design

AOS (live)

Example

Properties
Markup
JSON


    

    
        layout:
        responsiveGrid
    

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

    
        cq:styleIds:
        ,,1640174374131,1643023979594,,

    <div class="container responsivegrid cmp-container--autogap-vertical cmp-container--autogap-horizontal">
  <div id="container-af617ed288" class="cmp-container">
    <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
      <div class="image cmp-image--one-one aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <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-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85{.width}.jpeg/1682696661127/playing.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/playing.jpeg" id="image-1c3092b6ed" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
          <img src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.jpeg/1682696661127/playing.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.320.jpeg/1682696661127/playing.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.480.jpeg/1682696661127/playing.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.600.jpeg/1682696661127/playing.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.800.jpeg/1682696661127/playing.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1024.jpeg/1682696661127/playing.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1200.jpeg/1682696661127/playing.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1600.jpeg/1682696661127/playing.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1707" alt="">
        </div>
      </div>
      <div class="image cmp-image--one-one aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <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-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85{.width}.jpeg/1682696635985/restaurant.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/restaurant.jpeg" id="image-c48062e232" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
          <img src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.jpeg/1682696635985/restaurant.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.320.jpeg/1682696635985/restaurant.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.480.jpeg/1682696635985/restaurant.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.600.jpeg/1682696635985/restaurant.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.800.jpeg/1682696635985/restaurant.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1024.jpeg/1682696635985/restaurant.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1200.jpeg/1682696635985/restaurant.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1600.jpeg/1682696635985/restaurant.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1871" height="1243" alt="">
        </div>
      </div>
      <div class="image cmp-image--one-one aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <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-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85{.width}.jpeg/1682696659124/room.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/room.jpeg" id="image-3bdff07a0f" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
          <img src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.jpeg/1682696659124/room.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.320.jpeg/1682696659124/room.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.480.jpeg/1682696659124/room.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.600.jpeg/1682696659124/room.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.800.jpeg/1682696659124/room.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1024.jpeg/1682696659124/room.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1200.jpeg/1682696659124/room.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1600.jpeg/1682696659124/room.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2043" height="1359" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

myAIDA

Careers

Page Authoring

Navigation

Containers