Content Fragment

Content Fragment Component is used to allow a content author to add Content Fragments to a page. A Content Fragment helps content authors create, manage, and reuse structured content across different pages. This content is different then experience fragment is that it is pure content, with structure, but without additional visual design. 

On This Page:

Example

View on public site:

When to Use

The Content Fragment Component should be used when an author wants to add a defined structured content. Additionally it should be used when a content author wants to reuse content, create different variations, as well as contain tags. 

Usage

The Content Fragment Component displays different content structure across pages. A content author can add one fragment at a time to the component, and can customize parameters such as element and variation within the dialog box. Additionally, a content author can integrate Content Fragments with other AEM components.

Configure Dialog

author

The configure dialog allows the content author to adjust different fields and customize a Content Fragment. The fields include:

  • Content Fragment: This is where a content author can add the desired Content Fragment 
  • Element: Elemenent variation of the fragment
  • Variation: Add different variations of the Content Fragment
  • Paragraphs: Include all paragraphs from the Content Fragment or have a range to be include. The range is to be specified in the text box
  • Headings Checkbox: This option lets the content author to add Headings as their own paragraphs

Developer Resources

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

<div class="censuscontentfragmentlist contentfragmentlist aem-GridColumn aem-GridColumn--default--12"><!-- SDI include (path: /uat/templates/component-gallery/additionals/_jcr_content/root/responsivegrid/responsivegrid/censuscontentfragmen.nocache.html/census/components/common/body/censuscontentfragmentlist.vsdi, resourceType: census/components/common/body/censuscontentfragmentlist) -->

 

  

    

    <span id="data-uscb-expandable-list-top-A098O88MPUWKVTSFC2"></span>       

    

    

  

       

      

<div class="data-uscb-accordion-wrapper" id="A098O88MPUWKVTSFC2">

<div class="uscb-layout-row uscb-cf-accordion__expand-collapse">

        <div class="data-uscb-accordion-expand-all uscb-padding-L-0 uscb-padding-R-10 uscb-accordion-expand-collapse" tabindex="0">

        Expand All

        </div>

        <hr class="uscb-vertical-hr uscb-accordion-hr">

        <div class="data-uscb-accordion-collapse-all uscb-padding-LR-10 uscb-accordion-expand-collapse-disabled" tabindex="-1">

        Collapse All

        </div>

    </div>

<section class="cmp-contentfragmentlist">

<div class="uscb-accordion cmp-accordion__item">

<div id="data-uscb-accordion-header-1" class="uscb-layout-row uscb-layout-align-start-center uscb-accordion-header cmp-accordion__header uscb-accordion_panel_head" aria-expanded="false" tabindex="0">

        <div class="cmp-accordion__button">

        <span class="o-add-circle-1 uscb-accordioncore-icon-collapsed uscb-cf-list-icon" alt=""></span>

        <!--span class="o-minus-circle-1 uscb-accordioncore-icon-expanded" alt=""></span-->

  <span class="data-uscb-panel-header-span">

  <h2 class="cmp-contentfragment__title cmp-accordion__title">How will my job interview be conducted?</h2>

      

  </span>

  </div>

        </div>

 

        <div class="uscb-accordion_panel uscb-accordion-show-panel cmp-accordion__panel">

        <div>

        

 

        

            

    <dl class="cmp-contentfragment__elements">

        

   <div class="cmp-contentfragment__element cmp-contentfragment__element--faqAnswer" data-cmp-contentfragment-element-type="string">

       <div class="cmp-contentfragment__element-value">

           

           

           <p>Your interview will be conducted by phone.</p>

 

       </div>

   </div>

 

    </dl>

 

        

 

        </div>

 

            <div class="uscb-margin-T-10">

<a class="uscb-text-link" href="#data-uscb-expandable-list-top-A098O88MPUWKVTSFC2" onclick="linkClick(this, 'Census Content Fragment List Component');">

    Top of Section

</a>

</div>

        </div>

</div>

<div class="uscb-accordion cmp-accordion__item">

<div id="data-uscb-accordion-header-2" class="uscb-layout-row uscb-layout-align-start-center uscb-accordion-header cmp-accordion__header uscb-accordion_panel_head" aria-expanded="false" tabindex="0">

        <div class="cmp-accordion__button">

        <span class="o-add-circle-1 uscb-accordioncore-icon-collapsed uscb-cf-list-icon" alt=""></span>

        <!--span class="o-minus-circle-1 uscb-accordioncore-icon-expanded" alt=""></span-->

  <span class="data-uscb-panel-header-span">

  <h2 class="cmp-contentfragment__title cmp-accordion__title">What time will my interviewer call me?</h2>

      

  </span>

  </div>

        </div>

 

        <div class="uscb-accordion_panel uscb-accordion-show-panel cmp-accordion__panel">

        <div>

        

 

        

            

    <dl class="cmp-contentfragment__elements">

        

   <div class="cmp-contentfragment__element cmp-contentfragment__element--faqAnswer" data-cmp-contentfragment-element-type="string">

       <div class="cmp-contentfragment__element-value">

           

           

           <p>Your interviewer may call at different times of the day, including evening hours.</p>

 

       </div>

   </div>

 

    </dl>

 

        

 

        </div>

 

            <div class="uscb-margin-T-10">

<a class="uscb-text-link" href="#data-uscb-expandable-list-top-A098O88MPUWKVTSFC2" onclick="linkClick(this, 'Census Content Fragment List Component');">

    Top of Section

</a>

</div>

        </div>

</div>

<div class="uscb-accordion cmp-accordion__item">

<div id="data-uscb-accordion-header-3" class="uscb-layout-row uscb-layout-align-start-center uscb-accordion-header cmp-accordion__header uscb-accordion_panel_head" aria-expanded="false" tabindex="0">

        <div class="cmp-accordion__button">

        <span class="o-add-circle-1 uscb-accordioncore-icon-collapsed uscb-cf-list-icon" alt=""></span>

        <!--span class="o-minus-circle-1 uscb-accordioncore-icon-expanded" alt=""></span-->

  <span class="data-uscb-panel-header-span">

  <h2 class="cmp-contentfragment__title cmp-accordion__title">What happens if I miss the interview call?</h2>

      

  </span>

  </div>

        </div>

 

        <div class="uscb-accordion_panel uscb-accordion-show-panel cmp-accordion__panel">

        <div>

        

 

        

            

    <dl class="cmp-contentfragment__elements">

        

   <div class="cmp-contentfragment__element cmp-contentfragment__element--faqAnswer" data-cmp-contentfragment-element-type="string">

       <div class="cmp-contentfragment__element-value">

           

           

           <p>The interviewer is instructed to leave a voice message that includes a callback number; however, an interviewer will attempt to reach you later. You can contact your area census office to follow up. Call 1-855-JOB-2020 (1-855-562-2020) and select option 3; when prompted, enter your ZIP code to be routed to your area census office. You may also use the Federal Relay Service at 1-800-877-8339 for TTY/ASCII.</p>

 

       </div>

   </div>

 

    </dl>

 

        

 

        </div>

 

            <div class="uscb-margin-T-10">

<a class="uscb-text-link" href="#data-uscb-expandable-list-top-A098O88MPUWKVTSFC2" onclick="linkClick(this, 'Census Content Fragment List Component');">

    Top of Section

</a>

</div>

        </div>

</div>

</section>

</div>

 

             

    <script type="text/javascript">

        $(document).ready(function(){

          if (typeof(ContentFragmentListAccordion) != 'undefined') {

              ContentFragmentListAccordion.initAccordion("A098O88MPUWKVTSFC2");

          }

      });

    </script>

  

 

  

 

 

 

    

 

</div>

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