Content Fragments

🔍 What Is It?

A Content Fragment is:

• →Structured content stored in AEM's DAM (Digital Asset Manager) under /content/dam
• →Defined by a Content Fragment Model (like a database schema)
• →Presentation-independent — the content exists separately from how it looks
• →Deliverable via GraphQL (headless) or page components (traditional)
• →Supports variations — one fragment can have a "Web" variation and a "Mobile" variation with different text

Content Fragments are different from regular page content because they're created by content editors in a dedicated editor (not the page editor), and they can be reused across multiple pages and channels.

🎯 Why Do We Need It?

The Problem: Modern businesses publish content on websites, mobile apps, smartwatches, digital signage, and voice assistants. Writing the same content separately for each channel is expensive and leads to inconsistency.

The Solution: Content Fragments let you write content once and deliver it everywhere:

• →The marketing team writes an article once in AEM
• →The web team displays it on the website using a component
• →The mobile team fetches it via GraphQL API
• →The digital signage team pulls the title and image for their display

This is the core of headless and hybrid AEM architectures.

🏗️ What Happens in Real Projects?

Real Project Scenarios:

Scenario 1: Product Catalog

A retailer creates a "Product" Content Fragment Model with fields: name, SKU, description, price, images, specifications. The product team fills in fragments for 10,000 products. The website, mobile app, and in-store kiosks all consume the same data.

Scenario 2: News Articles

A media company creates an "Article" model with: headline, body, author, publishDate, category, featuredImage. Journalists write articles as fragments. The website renders them as pages; the mobile app fetches them via GraphQL.

Scenario 3: Shared Component Content

A global company has a "Disclaimer" fragment used on 500 pages. When the legal team updates the disclaimer fragment, all 500 pages reflect the change automatically.

⚙️ How It Works

Step 1: Create a Content Fragment Model

In AEM's Tools → Assets → Content Fragment Models, you define the schema:

• →What fields does this type of content have?
• →What type is each field? (text, number, date, content reference, etc.)
• →Which fields are required?

Step 2: Create Content Fragments

Authors go to Assets → Files → (your DAM folder) and create fragments based on the model. They fill in the fields in a clean, focused editor.

Step 3: Use the Fragment

*Option A: In a page component*

Use the Content Fragment Core Component to drop a fragment onto a page. The component renders the fragment's fields using HTL.

*Option B: Via GraphQL (headless)*

Query the fragment using AEM's GraphQL API:

{
  articleByPath(_path: "/content/dam/articles/my-article") {
    item {
      title
      body { html }
      author { name }
    }
  }
}

Variations:

A fragment can have multiple variations. The "Master" variation is the default. You can create "Social Media" or "Short Summary" variations with different text lengths.

💻 Example

Content Fragment Model and GraphQL Query — Creating a "News Article" Content Fragment Model and querying it via GraphQL.

// News Article Content Fragment Model
// Defined in AEM Tools → Assets → Content Fragment Models

{
  "modelTitle": "News Article",
  "fields": [
    {
      "fieldLabel": "Headline",
      "name": "headline",
      "type": "text-single",
      "required": true,
      "maxLength": 100
    },
    {
      "fieldLabel": "Body",
      "name": "body",
      "type": "text-multi",
      "renderAs": "richtext"
    },
    {
      "fieldLabel": "Author",
      "name": "author",
      "type": "fragment-reference",
      "modelPath": "/conf/mysite/settings/dam/cfm/models/author"
    },
    {
      "fieldLabel": "Publish Date",
      "name": "publishDate",
      "type": "date-time"
    },
    {
      "fieldLabel": "Featured Image",
      "name": "featuredImage",
      "type": "content-reference",
      "mimeTypes": ["image/*"]
    },
    {
      "fieldLabel": "Category",
      "name": "category",
      "type": "enumeration",
      "options": ["Technology", "Business", "Sports", "Health"]
    }
  ]
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits