Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!

How to render/style a content fragment (i.e. not using the plain text Content Fragment Component)


Level 9

If you create a page, and drop in content fragment where you would drop in a component, it just creates a text version of the content fragment model.

If the model contains say title, image, description, reference, category, all these get dumped as plain text on the page.

Presumably, there is a way we can create a template/component which can take some of these fields, and lay them out and style them?

I have not been able to find any information on this (i.e. rendering a content fragment with a layout).

When we create the layout, we want to create it in code (not via CMS UI), so that it can be distributed to other envs (not just on the local env)


Presumably we can create a component to render the content fragment, but how do we associated them together, and how does one reference the other?

3 Replies


Level 9



The purpose of content fragment is to render agnostic. now to apply layout or rendering ui, its part of dev job and can be achieved multiple way similar as regular component development 

generate UI using native and third party api like react or similar (based on below models)


- export as JSON then process it as model while 


- or use GraphQL to get the JSON response


- or use DAM assets api (as last options)


Level 9
We dont want to use content fragments - they are very limiting, but we understand that they must be used if we want to query the fields using graphql to display in a react app. however, we also need to show them on our website. We can easily create components, but not sure how to map a component to a content item in order to render it on a page from AEM.