Teaser

Teaser allows the grouping of an image, title and description for promoting and linking to site content sections. One or more actions can also be defined.

Github URL
Adobe URL
Source URL
Title
Pretitle, Title and Description
Content

Teaser with a pretitle, title and description.

Result
Pretitle

Teaser Title

Teaser Description

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Teaser Title
actionsEnabled: false
pretitle: Pretitle
jcr:lastModifiedBy: admin
jcr:created:
titleFromPage: false
jcr:description: <p>Teaser Description</p>
jcr:lastModified:
descriptionFromPage: false
sling:resourceType: core-components-examples/components/teaser
textIsRich: true
Markup:
<div class="teaser">
  <div id="teaser-61035a52f1" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-61035a52f1&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2019-12-08T10:05:56Z&quot;,&quot;dc:title&quot;:&quot;Teaser Title&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;}}">
    <div class="cmp-teaser__content">
      <div class="cmp-teaser__pretitle">Pretitle</div>
      <h2 class="cmp-teaser__title"> Teaser Title </h2>
      <div class="cmp-teaser__description">
        <p>Teaser Description</p>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"teaser-61035a52f1","pretitle":"Pretitle","title":"Teaser Title","description":"<p>Teaser Description<\/p>\r\n","actionsEnabled":false,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[],":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-61035a52f1":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2019-12-08T10:05:56Z","dc:title":"Teaser Title","dc:description":"<p>Teaser Description<\/p>\r\n"}}}
PostCSS: CSS: Title
Image, Pretitle, Title and Description
Content

Teaser with an image, pretitle, title and description.

Result
Lava flowing into the ocean
Pretitle

Teaser Title

Teaser Description

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Teaser Title
fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
actionsEnabled: false
pretitle: Pretitle
jcr:lastModifiedBy: admin
jcr:created:
titleFromPage: false
jcr:description: <p>Teaser Description</p>
jcr:lastModified:
descriptionFromPage: false
sling:resourceType: core-components-examples/components/teaser
textIsRich: true
Markup:
<div class="teaser">
  <div id="teaser-5c7e0ef90d" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-5c7e0ef90d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2019-12-08T10:08:38Z&quot;,&quot;dc:title&quot;:&quot;Teaser Title&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;}}">
    <div class="cmp-teaser__image">
      <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1160408466/component/teaser.coreimg{.width}.jpeg/1575799718580/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-5c7e0ef90d" data-cmp-data-layer="{&quot;image-5c7e0ef90d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-12-08T10:08:38Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1160408466/component/teaser.coreimg.jpeg/1575799718580/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
        <meta itemprop="caption" content="Lava flowing into the ocean">
      </div>
    </div>
    <div class="cmp-teaser__content">
      <div class="cmp-teaser__pretitle">Pretitle</div>
      <h2 class="cmp-teaser__title"> Teaser Title </h2>
      <div class="cmp-teaser__description">
        <p>Teaser Description</p>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"teaser-5c7e0ef90d","pretitle":"Pretitle","title":"Teaser Title","description":"<p>Teaser Description<\/p>\r\n","actionsEnabled":false,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[],"imagePath":"\/content\/core-components-examples\/library\/page-authoring\/teaser\/_jcr_content\/root\/responsivegrid\/demo_1160408466\/component\/teaser.coreimg.jpeg\/1575799718580\/lava-into-ocean.jpeg",":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-5c7e0ef90d":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2019-12-08T10:08:38Z","dc:title":"Teaser Title","dc:description":"<p>Teaser Description<\/p>\r\n"}}}
PostCSS: CSS: Title
Linked
Content

Teasers can be linked to internal relative AEM resources or external absolute URLs.

Result

Linked Teaser

Teaser Description

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Linked Teaser
fileReference: /content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg
actionsEnabled: false
jcr:lastModifiedBy: admin
jcr:created:
titleFromPage: false
linkURL: /content/core-components-examples/library/page-authoring/teaser
jcr:description: <p>Teaser Description</p>
jcr:lastModified:
descriptionFromPage: false
sling:resourceType: core-components-examples/components/teaser
textIsRich: true
Markup:
<div class="teaser">
  <div id="teaser-c0294248db" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-c0294248db&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:39:46Z&quot;,&quot;dc:title&quot;:&quot;Linked Teaser&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
    <div class="cmp-teaser__image">
      <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1789748122/component/teaser.coreimg{.width}.jpeg/1550672498426/lava-rock-formation.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-title="Gray lava rock formation" id="image-c0294248db" data-cmp-data-layer="{&quot;image-c0294248db&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:39:46Z&quot;,&quot;dc:title&quot;:&quot;Gray lava rock formation&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c58c09f6-e382-4698-bfbd-e8c8d37712c8&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:38Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
        <a class="cmp-image__link" href="/content/core-components-examples/library/page-authoring/teaser.html" data-cmp-clickable="" data-cmp-hook-image="link">
          <img src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1789748122/component/teaser.coreimg.jpeg/1550672498426/lava-rock-formation.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="Gray lava rock formation">
        </a>
        <meta itemprop="caption" content="Gray lava rock formation">
      </div>
    </div>
    <div class="cmp-teaser__content">
      <h2 class="cmp-teaser__title">
        <a class="cmp-teaser__title-link" href="/content/core-components-examples/library/page-authoring/teaser.html" data-cmp-clickable="">Linked Teaser</a>
      </h2>
      <div class="cmp-teaser__description">
        <p>Teaser Description</p>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"teaser-c0294248db","title":"Linked Teaser","description":"<p>Teaser Description<\/p>\r\n","linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","actionsEnabled":false,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[],"imagePath":"\/content\/core-components-examples\/library\/page-authoring\/teaser\/_jcr_content\/root\/responsivegrid\/demo_1789748122\/component\/teaser.coreimg.jpeg\/1550672498426\/lava-rock-formation.jpeg",":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-c0294248db":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2018-12-07T12:39:46Z","dc:title":"Linked Teaser","dc:description":"<p>Teaser Description<\/p>\r\n","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}}}
PostCSS: CSS: Title
Call To Action Button
Content

Teaser with an image, title, description and call-to-action button.

Result
Aerial photo of mountain range

Teaser Title

Teaser Description

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Teaser Title
fileReference: /content/dam/core-components-examples/library/sample-assets/mountain-range.jpg
actionsEnabled: true
jcr:lastModifiedBy: admin
jcr:created:
titleFromPage: false
jcr:description: <p>Teaser Description</p>
jcr:lastModified:
descriptionFromPage: false
sling:resourceType: core-components-examples/components/teaser
textIsRich: true
Markup:
<div class="teaser">
  <div id="teaser-83a73ada4e" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-83a73ada4e&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:42:40Z&quot;,&quot;dc:title&quot;:&quot;Teaser Title&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
    <div class="cmp-teaser__image">
      <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1878698139/component/teaser.coreimg{.width}.jpeg/1550673081151/mountain-range.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg" data-asset-id="c0a39183-23f4-48f0-8db7-bb41ba2b0122" data-title="Aerial photo of mountain range" id="image-83a73ada4e" data-cmp-data-layer="{&quot;image-83a73ada4e&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:42:40Z&quot;,&quot;dc:title&quot;:&quot;Aerial photo of mountain range&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c0a39183-23f4-48f0-8db7-bb41ba2b0122&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:31:21Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1878698139/component/teaser.coreimg.jpeg/1550673081151/mountain-range.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Aerial photo of mountain range" title="Aerial photo of mountain range">
        <meta itemprop="caption" content="Aerial photo of mountain range">
      </div>
    </div>
    <div class="cmp-teaser__content">
      <h2 class="cmp-teaser__title">
        <a class="cmp-teaser__title-link" href="/content/core-components-examples/library/page-authoring/teaser.html" data-cmp-clickable="">Teaser Title</a>
      </h2>
      <div class="cmp-teaser__description">
        <p>Teaser Description</p>
      </div>
      <div class="cmp-teaser__action-container">
        <a class="cmp-teaser__action-link" href="/content/core-components-examples/library/page-authoring/teaser.html" id="teaser-83a73ada4e-cta-ed267738cb" data-cmp-data-layer="{&quot;teaser-83a73ada4e-cta-ed267738cb&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser/cta&quot;,&quot;dc:title&quot;:&quot;Call To Action&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}" data-cmp-clickable="">Call To Action</a>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"teaser-83a73ada4e","title":"Teaser Title","description":"<p>Teaser Description<\/p>\r\n","linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","actionsEnabled":true,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[{"id":"teaser-83a73ada4e-cta-ed267738cb","url":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","title":"Call To Action","dataLayer":{"teaser-83a73ada4e-cta-ed267738cb":{"@type":"core-components-examples\/components\/teaser\/cta","dc:title":"Call To Action","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}},":type":"nt:unstructured"}],"imagePath":"\/content\/core-components-examples\/library\/page-authoring\/teaser\/_jcr_content\/root\/responsivegrid\/demo_1878698139\/component\/teaser.coreimg.jpeg\/1550673081151\/mountain-range.jpeg",":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-83a73ada4e":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2018-12-07T12:42:40Z","dc:title":"Teaser Title","dc:description":"<p>Teaser Description<\/p>\r\n","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}}}
PostCSS: CSS: Title
Multiple Call To Action Buttons
Content

Teaser with an image, title, description and multiple call-to-action buttons, each with a different link.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Teaser Title
fileReference: /content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg
actionsEnabled: true
jcr:lastModifiedBy: admin
jcr:created:
titleFromPage: false
jcr:description: <p>Teaser Description</p>
jcr:lastModified:
descriptionFromPage: false
sling:resourceType: core-components-examples/components/teaser
textIsRich: true
Markup:
<div class="teaser">
  <div id="teaser-561632a539" class="cmp-teaser" data-cmp-data-layer="{&quot;teaser-561632a539&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:42:09Z&quot;,&quot;dc:title&quot;:&quot;Teaser Title&quot;,&quot;dc:description&quot;:&quot;<p>Teaser Description</p>\r\n&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
    <div class="cmp-teaser__image">
      <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1581767054/component/teaser_2781767054.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-561632a539" data-cmp-data-layer="{&quot;image-561632a539&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:42:09Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img src="/content/core-components-examples/library/page-authoring/teaser/_jcr_content/root/responsivegrid/demo_1581767054/component/teaser_2781767054.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
        <meta itemprop="caption" content="Snowy mountain glacier">
      </div>
    </div>
    <div class="cmp-teaser__content">
      <h2 class="cmp-teaser__title">
        <a class="cmp-teaser__title-link" href="/content/core-components-examples/library/page-authoring/teaser.html" data-cmp-clickable="">Teaser Title</a>
      </h2>
      <div class="cmp-teaser__description">
        <p>Teaser Description</p>
      </div>
      <div class="cmp-teaser__action-container">
        <a class="cmp-teaser__action-link" href="/content/core-components-examples/library/page-authoring/teaser.html" id="teaser-561632a539-cta-d939c6ba30" data-cmp-data-layer="{&quot;teaser-561632a539-cta-d939c6ba30&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser/cta&quot;,&quot;dc:title&quot;:&quot;Call To Action&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}" data-cmp-clickable="">Call To Action</a>
        <a class="cmp-teaser__action-link" href="/content/core-components-examples/library.html" id="teaser-561632a539-cta-2e27cc6ee5" data-cmp-data-layer="{&quot;teaser-561632a539-cta-2e27cc6ee5&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/teaser/cta&quot;,&quot;dc:title&quot;:&quot;Call To Action&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library.html&quot;}}" data-cmp-clickable="">Call To Action</a>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"teaser-561632a539","title":"Teaser Title","description":"<p>Teaser Description<\/p>\r\n","linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","actionsEnabled":true,"imageLinkHidden":false,"titleLinkHidden":false,"actions":[{"id":"teaser-561632a539-cta-d939c6ba30","url":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","title":"Call To Action","dataLayer":{"teaser-561632a539-cta-d939c6ba30":{"@type":"core-components-examples\/components\/teaser\/cta","dc:title":"Call To Action","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}},":type":"nt:unstructured"},{"id":"teaser-561632a539-cta-2e27cc6ee5","url":"\/content\/core-components-examples\/library.html","title":"Call To Action","dataLayer":{"teaser-561632a539-cta-2e27cc6ee5":{"@type":"core-components-examples\/components\/teaser\/cta","dc:title":"Call To Action","xdm:linkURL":"\/content\/core-components-examples\/library.html"}},":type":"nt:unstructured"}],"imagePath":"\/content\/core-components-examples\/library\/page-authoring\/teaser\/_jcr_content\/root\/responsivegrid\/demo_1581767054\/component\/teaser_2781767054.coreimg.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg",":type":"core-components-examples\/components\/teaser","dataLayer":{"teaser-561632a539":{"@type":"core-components-examples\/components\/teaser","repo:modifyDate":"2018-12-07T12:42:09Z","dc:title":"Teaser Title","dc:description":"<p>Teaser Description<\/p>\r\n","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}}}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *