### Page Title Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/commerce/productlist/sample-productlist.html/men/tops-men/jackets-men

An example of a page title used in the context of the product listing.

```text
# Outdoor Collection
```

--------------------------------

### AEM Product Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Product component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/product.html
```

--------------------------------

### AEM Download Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Download component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/download.html
```

--------------------------------

### AEM Teaser Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Teaser component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/teaser.html
```

--------------------------------

### AEM Title Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Title component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/title.html
```

--------------------------------

### AEM Product Teaser Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Product Teaser component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/productteaser.html
```

--------------------------------

### AEM Product List Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Product List component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/productlist.html
```

--------------------------------

### AEM Commerce Teaser Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Commerce Teaser component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/teaser.html
```

--------------------------------

### AEM List Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM List component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/list.html
```

--------------------------------

### AEM Navigation Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Navigation component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-structure/navigation.html
```

--------------------------------

### AEM Search Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Search component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/search.html
```

--------------------------------

### AEM Page Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Page component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-structure/page.html
```

--------------------------------

### AEM Experience Fragment Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Experience Fragment component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/experience-fragment.html
```

--------------------------------

### AEM Image Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Image component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/image.html
```

--------------------------------

### AEM Container Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Container component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/container.html
```

--------------------------------

### AEM Text Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Text component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/text.html
```

--------------------------------

### AEM Commerce Navigation Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Commerce Navigation component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/navigation.html
```

--------------------------------

### AEM Progress Bar Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Progress Bar component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/progress-bar.html
```

--------------------------------

### AEM Commerce Search Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Commerce Search component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/search.html
```

--------------------------------

### AEM Tabs Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Tabs component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/tabs.html
```

--------------------------------

### AEM Search And Lister Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Search And Lister component for the Forms and Communications Portal. It provides a visual representation and potential configuration options.

```html
/content/core-components-examples/library/forms-and-communications-portal/searchlister.html
```

--------------------------------

### AEM Related Products Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Related Products component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/relatedproducts.html
```

--------------------------------

### AEM Language Navigation Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Language Navigation component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-structure/language-navigation/language-structure/us/en/language-navigation.html
```

--------------------------------

### AEM Product Carousel Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Product Carousel component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/productcarousel.html
```

--------------------------------

### AEM PDF Viewer Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM PDF Viewer component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/pdf-viewer.html
```

--------------------------------

### AEM Form Options Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Form Options component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-form/form-options.html
```

--------------------------------

### AEM Commerce Experience Fragment Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Commerce Experience Fragment component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/experiencefragment.html
```

--------------------------------

### AEM Content Fragment Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Content Fragment component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/content-fragment.html
```

--------------------------------

### AEM Featured Category List Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Featured Category List component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/featuredcategorylist.html
```

--------------------------------

### AEM Commerce Content Fragment Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Commerce Content Fragment component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/contentfragment.html
```

--------------------------------

### Start Level Configuration

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-structure/table-of-contents

Configures the start level for a component, typically used in navigation or list components. This example shows setting the start level to 'h2' and the resource type.

```Configuration
startLevel:
           h2
 sling:resourceType:
           core-components-examples/components/tableofcontents
 listType:
           numbered
```

--------------------------------

### AEM Link Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Link component for the Forms and Communications Portal. It provides a visual representation and potential configuration options.

```html
/content/core-components-examples/library/forms-and-communications-portal/link.html
```

--------------------------------

### Page Title Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/commerce/productlist/sample-productlist.html/training/training-video

A simple heading indicating the content of the page or section.

```text
# Outdoor Collection
```

--------------------------------

### Search and Lister Component Structure Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/forms-and-communications-portal/searchlister

Provides a basic structural example of the Search and Lister component's markup, likely written in HTL, showing elements for sorting and loading more assets.

```HTL
# Forms Portal

Sort By
Ascending
Descending

Load more
```

--------------------------------

### Table Formatting Examples

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

Shows how to create tables with multiple rows and columns using Markdown and HTML syntax, suitable for organizing content.

```markdown
| Column 1 | Column 2 | Column 3 | Column 4 |
| --- | --- | --- | --- |
| 1.1 | 1.2 | 1.3 | 1.4 |
| 2.1 | 2.2 | 2.3 | 2.4 |
| 3.1 | 3.2 | 3.3 | 3.4 |
| 4.1 | 4.2 | 4.3 | 4.4 |
| 5.1 | 5.2 | 5.2 | 5.4 |
```

```html
<table cellpadding="5" cellspacing="0" border="1">
   <tbody><tr><th>Column 1</th>
   <th>Column 2</th>
   <th>Column 3</th>
   <th>Column 4</th>
   </tr><tr><td>1.1</td>
   <td>1.2</td>
   <td>1.3</td>
   <td>1.4</td>
   </tr><tr><td>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
   <td>2.4</td>
   </tr><tr><td>3.1</td>
   <td>3.2</td>
   <td>3.3</td>
   <td>3.4</td>
   </tr><tr><td>4.1</td>
   <td>4.2</td>
   <td>4.3</td>
   <td>4.4</td>
   </tr><tr><td>5.1</td>
   <td>5.2</td>
   <td>5.2</td>
   <td>5.4</td>
   </tr></tbody></table>
```

```plain-text
| Column 1 | Column 2 | Column 3 | Column 4 |
| --- | --- | --- | --- |
| 1.1 | 1.2 | 1.3 | 1.4 |
| 2.1 | 2.2 | 2.3 | 2.4 |
| 3.1 | 3.2 | 3.3 | 3.4 |
| 4.1 | 4.2 | 4.3 | 4.4 |
| 5.1 | 5.2 | 5.2 | 5.4 |
```

--------------------------------

### AEM Separator Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Separator component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/separator.html
```

--------------------------------

### Product List Filtering and Sorting Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/commerce/productlist/sample-productlist.html/training/training-video

Demonstrates how product lists can be filtered by price ranges and sorted by various attributes. The filtering is typically achieved through URL query parameters, allowing dynamic content display.

```html
<a href="/content/core-components-examples/library/commerce/productlist/sample-productlist.html/training/training-video.html?price=40_50" title="Filter by Price 40-50">40-50 *(1)*</a>
<a href="/content/core-components-examples/library/commerce/productlist/sample-productlist.html/training/training-video.html?price=50_60" title="Filter by Price 50-60">50-60 *(3)*</a>
<a href="/content/core-components-examples/library/commerce/productlist/sample-productlist.html/training/training-video.html?price=60_70" title="Filter by Price 60-70">60-70 *(1)*</a>
<a href="/content/core-components-examples/library/commerce/productlist/sample-productlist.html/training/training-video.html?price=80_*" title="Filter by Price 80-*">80-* *(1)*</a>

Sort by
Price
Product Name

<a href="/content/core-components-examples/library/commerce/product/sample-product.html/fusion-backpack.html" title="Fusion Backpack"><img src="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/fusion-backpack/mb02-gray-0.jpg" alt="Fusion Backpack">
Fusion Backpack
$59.00</a>

<a href="/content/core-components-examples/library/commerce/product/sample-product.html/summit-watch.html" title="Summit Watch"><img src="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/summit-watch/mg03-br-0.jpg" alt="Summit Watch">
Summit Watch
$54.00</a>

<a href="/content/core-components-examples/library/commerce/product/sample-product.html/bolo-sport-watch.html" title="Bolo Sport Watch"><img src="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/bolo-sport-watch/wg01-bk-0.jpg" alt="Bolo Sport Watch">
Bolo Sport Watch
$49.00</a>

<a href="/content/core-components-examples/library/commerce/product/sample-product.html/chaz-kangeroo-hoodie.html" title="Chaz Kangeroo Hoodie"><img src="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" alt="Chaz Kangeroo Hoodie">
Chaz Kangeroo Hoodie
$52.00</a>

<a href="/content/core-components-examples/library/commerce/product/sample-product.html/bruno-compete-hoodie.html" title="Bruno Compete Hoodie"><img src="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/bruno-compete-hoodie/mh03-black_main_2.jpg" alt="Bruno Compete Hoodie">
Bruno Compete Hoodie
$63.00</a>

<a href="/content/core-components-examples/library/commerce/product/sample-product.html/ingrid-running-jacket.html" title="Ingrid Running Jacket"><img src="/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/ingrid-running-jacket/wj04-white_main_2.jpg" alt="Ingrid Running Jacket">
Ingrid Running Jacket
$84.00</a>

1
<a href="/content/core-components-examples/library/commerce/productlist/sample-productlist.html/training/training-video.html?category_uid=uid-1&page=2" title="Go to page 2">2</a>
```

--------------------------------

### AEM Button Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Button component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/button.html
```

--------------------------------

### Progress Bar v1: Default Configuration Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/progress-bar

Demonstrates the default configuration of the Progress Bar component. It includes the Sling resource type, markup structure, and JSON output for a basic progress display.

```xml
1. sling:resourceType:
           core-components-examples/components/progressbar
```

```html
0
100

0
```

```json
    JSON
```

--------------------------------

### Content Fragment Component Configuration

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/content-fragment

Example configuration properties for a Content Fragment component, detailing its display mode, fragment path, and content elements.

```json
{
  "paragraphScope": "all",
  "text": "Main Lorem Ipsum 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.",
  "variationName": "master",
  "sling:resourceType": "core-components-examples/components/contentfragment",
  "displayMode": "multi",
  "fragmentPath": "/content/dam/core-components-examples/library/sample-assets/simple-fragment"
}
```

--------------------------------

### HTML Structure for Product Listing

Source: https://www.aemcomponents.dev/content/core-components-examples/library/commerce/productlist/sample-productlist.html/gear/bags

Illustrates the basic HTML structure for displaying product information, including images, names, and prices, within a product list context.

```html
# Outdoor Collection
```

--------------------------------

### AEM Embed Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Embed component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/embed.html
```

--------------------------------

### Product Listing Page Title

Source: https://www.aemcomponents.dev/content/core-components-examples/library/commerce/productlist/sample-productlist.html/what-is-new

Displays the main heading for the product listing page.

```html
# Outdoor Collection
```

--------------------------------

### AEM Carousel Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Carousel component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/carousel.html
```

--------------------------------

### AEM Accordion Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Accordion component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-content/accordion.html
```

--------------------------------

### AEM Breadcrumb Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Breadcrumb component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-structure/breadcrumb/hidden/level-1/level-2/breadcrumb.html
```

--------------------------------

### Download Component JSON Example (Inline Display)

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/download

A JSON representation of the properties for the AEM Core Components download functionality configured for inline display, highlighting the 'inline' and 'titleFromAsset' properties.

```json
{
  "fileReference": "/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg",
  "inline": true,
  "sling:resourceType": "core-components-examples/components/download",
  "titleFromAsset": true,
  "textIsRich": true,
  "actionText": "View",
  "descriptionFromAsset": true
}
```

--------------------------------

### AEM Drafts and Submissions Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Drafts and Submissions component for the Forms and Communications Portal. It provides a visual representation and potential configuration options.

```html
/content/core-components-examples/library/forms-and-communications-portal/draftsandsubmissions.html
```

--------------------------------

### AEM Category Carousel Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Category Carousel component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/commerce/categorycarousel.html
```

--------------------------------

### Download Component JSON Example (Default)

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/download

A JSON representation of the properties for the AEM Core Components download functionality in its default configuration, illustrating how component data might be structured.

```json
{
  "jcr:title": "Custom Title",
  "fileReference": "/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg",
  "inline": false,
  "jcr:description": "<p>Custom description</p>",
  "sling:resourceType": "core-components-examples/components/download",
  "titleFromAsset": false,
  "textIsRich": true,
  "actionText": "Download",
  "descriptionFromAsset": false
}
```

--------------------------------

### AEM Form Text Component Example

Source: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/text

This example demonstrates the usage and configuration of the AEM Form Text component. It provides a visual representation and potential configuration options for integrating this component into AEM pages.

```html
/content/core-components-examples/library/core-form/form-text.html
```

--------------------------------

### Product Component Configuration

Source: https://www.aemcomponents.dev/content/core-components-examples/library/commerce/product/sample-product.html/summit-watch

Configuration properties for the AEM Product component. Includes settings for loading client-side prices and the component's resource type.

```yaml
1. loadClientPrice:
           true
2. sling:resourceType:
           cif-components-examples/components/product
```