Accordion with three items with each item being a layout container.

Item 1

Item 3

Item 2

Standard

Accordion with three items with each item being a layout container and containing sample content.

aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0 aem-GridColumn--default--none

Sample Content

Accordion with three items with the item expanded by default being the first item.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

Expanded Item

Accordion with three items and all items expanded by default.

Expanded Items

Accordion with single expansion enabled, which forces a single item to be expanded at a time. Expanding one item will collapse all others.

Single Expansion

Nested accordions, with each item containing an accordion component in its layout container.

Nested

Accordion allows users to toggle panels of related content. Panels of varying component type can be created.

Accordian

Navigation allows an author to build a site navigation. Navigation structures can be built from live copies of a blueprint, language copies of a language master or from a simple page tree.

Navigation

Language Navigation provides a language/country navigation for a site, so that visitors can navigate to the same page in a different locale.

Language Navigation

Breadcrumb allows navigation of the page hierarchy relative to the current page. It is commonly added to a page template, in the header or footer.

Breadcrumb

Templating

Title can be used to create headings for a page or page sections.

Title

Text allows the display of a rich text paragraph on the page. Various formatting options are available.

Text

Image allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size and lazy loading is available.

Image

Button allows the display of a button or anchor button.

Button

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.

Teaser

Download allows linking to an asset for download. Optionally displays a title, description, metadata and a download action.

Download

List can be used to display a list of pages. They can be defined either dynamically &#8211; by search query, tags or from a parent page &#8211; or as a static list of items.

List

Experience Fragment allows an experience fragment variation to be presented on a page.

Experience Fragment

Content Fragment allows a content fragment asset, its elements and variations to be presented on a page.

Content Fragment

Content Fragment List allows the display of a list of content fragments on a page. Useful for authoring headless content that can be easily consumed by applications.

Content Fragment List

Page Authoring

Form allows a user to create a form out of different form compontents to collect information and send it to a chosen adress.

Container

Carousel allows a user to cycle through content panels. Slides of varying component type can be created.

Carousel

Tabs allow a user to switch between panels of related content. Panels of varying component type can be created.

Tabs

Form

The Product Teaser component is a server side component written in HTL, allowing to display product teasers on any AEM page linking to the product details page. The product data is retrieved from Magento via GraphQL. The component is configured by an author via component dialog or drag &#038; drop.
Note: due to the limited amount of sample data available, the link to the product page will always display the same demo product.

Product teaser

The product component is a server side component written in HTL, allowing to display product details. The product details are retrieved from Magento via GraphQL using the product identifier provided in the URL selector.
On an author instance, when the page URL does not contain any selector, like for example when the page is edited in the AEM Sites editor, the component displays some placeholder data. On a publish instance, not setting any selector displays a &#8220;Product not found&#8221; message.
Note that when a selector is set, this example page always displays the same product data based on some sample data. Try different options:
<ul>
<li><a href="/content/core-components-examples/library/commerce/product.chaz-kangeroo-hoodie.html">Showing sample data (selector is set in URL)</a></li>
<li><a href="/content/core-components-examples/library/commerce/product.set-of-sprite-yoga-straps.html">Showing sample data for a grouped product (only for this particular selector in the URL)</a></li>
<li><a href="/content/core-components-examples/library/commerce/product.sprite-yoga-companion-kit.html">Showing sample data for a bundle product (only for this particular selector in the URL)</a></li>
<li><a href="/content/core-components-examples/library/commerce/product.html">Showing placeholder data on author instance (no selector in URL)</a></li>
</ul>
For the three examples with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the product prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.
In addition, the example showing a bundle product includes a small React application that is activated when clicking on the &#8220;Customize&#8221; button. It is used to fetch the bundle options with a client-side GraphQL request and to calculcate and prepare the product data for the cart when selecting the options of the bundle product.