Skip Navigation
Within Components

Experience Fragment

The Experience Fragment Component allows authors to create and manage reusable content blocks or fragments. The type of fragments can range from text, images, and video, or any other type that an author would want to use across multiple pages.

On This Page:

Related Information

Example

View on public site:

web Census Homepage

When to Use

This component should be used when the content author wants content that is consistent, reusable, and efficient. One advantage of using experience fragment is instead of duplicating a content, an author can create an experience fragment to manage the content in one place, and the changes will update to whichever page the component is located. Another advantage is that the component allows for variations, which makes content easy to tailor for different webpages.

Usage

The Experience Fragment is used to display a content on an AEM page. It's reproducibility makes it a popular choice for content authors.

Configure Dialog

author

The configure dialog allows the content author to enter the variation path of the content they wish to add to the experience fragment. Once authored, the component will display the content on the AEM page. The configuration include:

 

  • Variation: This is where an author can link the required content 

Developer Resources

Expand the section below to see the Experience Fragment component's HTML output.

<div class="xf-content-height">

    

 

 

<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">

    

    <div class="list parbase aem-GridColumn aem-GridColumn--default--12"><!-- SDI include (path: /content/experience-fragments/census/features/homepage-feature/master/_jcr_content/root/list.nocache.html/census/components/common/body/list.vsdi, resourceType: census/components/common/body/list) -->

<div class="uscb-census-list listContent " id="List_1733391700" name="list">

 

<a name="par_list" style="visibility:hidden"></a>

 

 

 

    

    

 

            

<div id="listArticlesContainer_List_1733391700" class="uscb-list-article-container data-uscb-list-articles-container uscb-list-display-featured">

                <div id="uscbTempDiv_List_1733391700"></div>

                

    <div class="uscb-feature-list">

        <div class="uscb-wrap uscb-grid-wrap-container uscb-layout-row uscb-feature-list">

            <div class="uscb-grid-6 uscb-grid-tbl-12 uscb-grid-mbl-4">

                <div class="uscb-feature-list--feature uscb-avoid-page-break uscb-layout-row-gt-md uscb-padding-L-0">

                    <a href="/newsroom/census-live.html" onclick="linkClick(this, 'Census List Component');" class="uscb-layout-column uscb-text-decoration-none uscb-hw-100 uscb-height-sm-180 uscb-feature-list-link">

                        <div class="uscb-flex-col-80 uscb-flex-col-md-100 uscb-nav-button-container uscb-position-relative uscb-featured-list-background uscb-decorative-img" style="background-image: url('/content/dam/Census/newsroom/featured/feature-tech.jpg');">

                        </div>

                    </a>     

                </div>

            </div>

 

            <div class="uscb-grid-6 uscb-grid-tbl-12 uscb-grid-mbl-4 uscb-default-x-column-list">

                <a href="/newsroom/census-live.html" onclick="linkClick(this, 'Census List Component');" class="uscb-list-featured-item uscb-list-default-item uscb-list-item uscb-grid-6 uscb-grid-tbl-12 uscb-grid-mbl-4" title="About" tabindex="0">

                    <div class="uscb-default-x-column-container uscb-layout-column">

                        <hr class="uscb-list-hr uscb-list-hr-top">

                        

                            

<span class="uscb-tag-label uscb-tag-label" style="background-color: ; border: 1px solid ;"></span>

 

                        

 

                        <div class="uscb-default-x-column-title uscb-heading-2">Census Live</div>

 

                        <div class="uscb-default-x-column-date uscb-body-small-02">October 20, 2023</div>

 

                        <div class="uscb-default-x-column-content uscb-body-small-01">Watch Live Today, 12-3 p.m. EDT:  The U.S. FDA and the U.S. Census Bureau will&nbsp;highlight technology at the&nbsp;2023 TOP FDA Diagnostic Data Solutions Showcase.</div>

            

                        <div class="uscb-default-x-column-link-icon uscb-link-left">

                            <i class="o-angle-right-circle-1"></i>

                        </div>

                    </div>

                    <hr>

                </a>

            </div>

        </div>

    </div>

        

    

 

 

 

                    

 

</div>

<div class="uscb-loading-circular-indeterminate" aria-label="Loading"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 108 108" xml:space="preserve"> <path fill="none" stroke-width="8" stroke-miterlimit="10" endcap="butt" d="M 54,54 m -50,0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0"></path></svg></div>

<!-- /* View All Link section */ -->

</div>

</div>

 

    

</div>

 

</div>

 

 

 

 

 

 

</body>

Top of Section
✕
Is this page helpful?
Thumbs Up Image Yes Thumbs Down Image No
✕
NO THANKS
255 characters maximum 255 characters maximum reached
✕
Thank you for your feedback.
Comments or suggestions?

Top

Back to Header