Skip to main content

Experience Fragment

The Experience Fragment component is a component that contains pre-existing content, such as text and images, and even other components. The Experience Fragment component can then be added to multiple pages, while staying automatically updated as content is changed and controlled from the parent Experience Fragment.

Authoring

An Experience Fragment component can be added the same way a normal component would be added during page authoring.

1. Select an empty container.  Click on the "+" sign to open a component dialogue box.

2. Choose Experience Fragment from the component dropdown list

3. The Experience Fragment component will now appear.  Click the tool icon to begin the process of choosing the Experience Fragment.

4. A dialogue box will open, select the check box to open the Selection Dialog window in order to locate the needed experience fragment.

5. Navigate to the desired experience fragment. Check the box next to the experience fragment name, then press Select in the top right corner.  (Pro tip:  if you know the name of the experience fragment, type it in the "Type to search ..." box to find it more quickly).

6. The previous dialog window will appear with the experience fragment path added. Click on the check mark on the top right corner.

7. The experience fragment will now appear.  Any changes made to the experience fragment will automatically be reflected on this page, without need to reauthor the page.

Examples

In the examples below:

Link list experience fragment:  Any updates to the link lists will be automaticaly updated on all pages containing this experience fragment.

For example, if the URL for "Online Application for MCPP" is changed, instead of having to edit each individual page that contains this link, one change in the experience fragment will update across the site globally.

This is especially helpful when 3rd party URLs (outside the Illinois site experience) are changed.

Teaser experience fragment:   Any update to the image, headline, copy or button will be automatically updated globally, across all pages containing that experience fragment.

Example 1:

Link List - bulleted

Example 2:

Link List - indented, no bullets

Example 3:

Teaser component pre-filled

Diseases & Conditions

IDPH provides information and resources for bath chronic and infectious diseases and conditions.