Inherited Reference

The Inherited Reference component is a container that can be used to share content between parent and child pages. Page to inherit content from must be defined in General Settings by a Super Author. This component allows authors to select which component they want to inherit from the parent page. 

On This Page:

Example

View on public site:

When to Use

Inherited Reference components are displayed on child pages automatically. Inheritance saves editors time and effort and it helps display content consistently across the site. For example, use the inheritance reference component for promotional content that changes often. When you update the content on the landing page, it updates everywhere in the page hierarchy.

Usage

To use the Inherited Reference component, authors must first configure the root path at a parent page or a specific page within the Microsite Landing Pages section in General Settings (Super Author permissions required ot update General Settings). Once configured, authors will be able to select which component(s) they want to inherit from the parent or specific page.

Currently, the Inheritance Reference component can only be used in the Left Rail on editable templates such as Census 2 Column Left, Census 3 Column, and Census Landing. Authors have the option to inherit Title Core, Teaser Core, Layout Container, or Left Nav components from the parent or specific page.

Inheritance Reference components behaves like this by default:

  • Editable in parent only: Inherited components can be edited only on the parent page. They don't have toolbars on child pages.
  • Order is inherited: Inherited components are displayed in the same order on parent and child pages.
  • Inherited first: Inherited components are displayed before non-inherited components in the same area. 

Configure Dialog

The Inherited Reference component does not have a configuration dialog and instead inherits its content from its respective landing parent page configured in the General Settings page. All instances of this component use the same content so when it is updated all instances of this component will be affected.

Developer Resources

Expand the section below to see the Inherited Reference Component's HTML output.

<div class="inheritedreference uscb-grid-3 uscb-grid-tbl-6 uscb-grid-mbl-4 uscb-grid-offset-L-0 aem-GridColumn--tablet--12 aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--default--2" id="content">

<div class="uscb-inherited-ref-hr uscb-margin-T-10 uscb-margin-B-10"></div>

 

 

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

    

    <div class="teasercore teaser uscb-line-height-25 aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--12 aem-GridColumn--offset--default--0"><div id="teasercore-ddbcac29fd" class="cmp-teaser">

    <a class="cmp-teaser__link" href="/programs-surveys/sis.html">

       

 

</a><div class="cmp-teaser__image"><a class="cmp-teaser__link" href="/programs-surveys/sis.html">

</a><div data-cmp-lazythreshold="0" data-cmp-src="/programs-surveys/sis/_jcr_content/root/responsivegrid/inheritrefwrap/inheritedreference/inheritRefWrap/teasercore.coreimg{.width}.png/1666972084766/sis-logo.png" data-asset="/content/dam/Census/programs-surveys/sis/images/sis-logo.png" data-asset-id="ea18fc8c-3bff-4a63-900e-702ff53d349e" data-title="Statistics in Schools Logo" id="teasercore-ddbcac29fd-image" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject"><a class="cmp-teaser__link" href="/programs-surveys/sis.html">

    </a><a class="cmp-image__link" href="/programs-surveys/sis.html" data-cmp-hook-image="link">

        

            

            <img src="/programs-surveys/sis/_jcr_content/root/responsivegrid/inheritrefwrap/inheritedreference/inheritRefWrap/teasercore.coreimg.png/1666972084766/sis-logo.png" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Statistics in Schools Logo" title="Statistics in Schools Logo">

            

        

    </a>

    

    <meta itemprop="caption" content="Statistics in Schools Logo">

</div>

 

    

 

</div>

 

    <a class="cmp-teaser__image-link" href="/programs-surveys/sis.html" onclick="linkClick(this, 'Teaser Core Component');">

        <div class="cmp-teaser__image">

            <section class="uscb-banner-image-container uscb-layout-align-start-center">

                <div class="uscb-banner-image-background" style="background-image: url(/programs-surveys/sis/_jcr_content/root/responsivegrid/inheritrefwrap/inheritedreference/inheritRefWrap/teasercore.coreimg.png/1666972084766/sis-logo.png);"></div>

            </section>

        </div>

    </a>

 

        <div class="cmp-teaser__content">

            

    

 

            

    

 

            

    

 

            

    

 

        </div>

    

</div>

 

    

</div>

 

    

</div>

 

 

 

    

 

</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