Headline Feature

The Headline Feature component is an extended OOTB full-width component that holds text and visually sections off the page with a solid background or an image background.

On This Page:

When to Use

The Headline Feature component allows content authors to feature text and an image on America Counts story pages. The text portion functions as a page title, so the title component can be used as the article title. The image portion of the component should be relevant to the article.

Usage

The Headline Feature should be used on America Counts story pages. This component is already baked into the Census Article 2 Column Right and can be added to other pages as needed, however the formatting and style of the component will differ.

Configure Dialog

The configurations available in the Headline Feature component's dialog are determined by template and component policy.

Below is an example of a Headline Feature component on a Census Detail 2 Column Right template, with the Headline Feature Component Policy applied.

author

The initial content structure defined in the Census Detail 2 Column Right template includes a Headline Feature component, which cannot be deleted or moved, and will only appear on the published page if authored.

author

The Headline Feature Component Policy has been pre-configured with four tabs.

Under the Links & Actions tab, authors can insert a link to the featured page by inputing the page URL directly or by selecting the checkmark to browse the DAM for the page.

author

Under the Text tab, authors have the option to enter a title manually or select the checkbox to get the title from the page linked in the previous tab. The title will display as the headline of the component.

author

Under the Image tab, authors can insert an image, either by dragging and dropping the asset from the Side Panel, or by browsing the DAM.

author

Under the Styles tab, authors have the option to change the Headline Feature's style or keep the default style, which is "None".

author

Headline Features that are added to a page manually and not baked into the structure of the template have a separate policy and the style and configuration options will vary.

Below is an example of a Headline Feature in the body container, with the Headline Feature Single Page Policy applied.

author

The Headline Feature Single Page Policy has been pre-configured with three, instead of four, tabs.

Under the Links & Actions tab, authors can insert a link to the featured page by inputing the page URL directly or by selecting the checkmark to browse the DAM for the page.

author

Under the Text tab, authors have the option to enter a title and description manually or select the checkbox to get the title and the description from the page linked in the previous tab. The title will display as the headline of the component, and the description below it.

author

Under the Image tab, authors can insert an image, either by dragging and dropping the asset from the Side Panel, or by browsing the DAM.

author

Developer Resources

Expand the section below to see the Headline Feature component's HTML output.

<div class="uscb-headline-feature cmp-feature">

    <div class="cmp-feature__content">

    <!-- Default view -->

<div class="uscb-headline-feature-default uscb-text-decoration-none uscb-grid-width-full" style="background-color: #bdf;">

<div class="uscb-featured-list-link uscb-layout-row uscb-grid-12 uscb-grid-tbl-12 uscb-grid-mbl-4 uscb-margin-LR-auto" onclick="linkClick(this, 'Teaser Extended Core Component');">

<div class="uscb-feature-banner-text uscb-headline-feature-title-wrapper uscb-grid-5 uscb-grid-tbl-12 uscb-grid-mbl-4">

<div class="uscb-headline-feature-title-padding uscb-grid-4 uscb-grid-tbl-12 uscb-grid-mbl-4">

<h1 class="uscb-h2 uscb-feature-banner-title uscb-bold-text">Tracking Supply Disruptions, Impact of Inflation on Small Business</h1>

<div class="uscb-sub-heading-1 uscb-feature-banner-description"></div>

</div>

</div>

 

                  <!-- Desktop image - allows expansion into right margin as needed -->

<div class="uscb-featured-list-image-container uscb-grid-7 uscb-grid-tbl-12 uscb-hide-lg">

                    <img class="uscb-featured-list-image" src="/content/dam/Census/library/stories/2023/10/inflation-impact-small-business/inflation-impact-small-business.jpg" style="height: 434px; max-width: calc(100% + (100vw - 1176px) / 2);">

                </div>

 

                  <!-- Tablet/mobile image - fully constrained -->

                <div class="uscb-featured-list-background uscb-grid-tbl-12 uscb-grid-mbl-4 uscb-grid-width-full-tbl uscb-grid-width-full-mbl uscb-hide-gt-lg" style="background-image: url(/content/dam/Census/library/stories/2023/10/inflation-impact-small-business/inflation-impact-small-business.jpg)"></div>

</div>

        </div>

        <!-- Single Display view -->

<div class="uscb-headline-feature-single-display uscb-text-decoration-none">

<div class="uscb-featured-list-link uscb-layout-row" onclick="linkClick(this, 'Teaser Extended Core Component');">

<div class="uscb-featured-list-background" style="background-image: url('/content/dam/Census/library/stories/2023/10/inflation-impact-small-business/inflation-impact-small-business.jpg');"></div>

<div class="uscb-feature-banner-text uscb-headline-feature-title-wrapper">

<div class="uscb-headline-feature-title-padding">

<h2 class="uscb-h2 uscb-feature-banner-title uscb-bold-text">Tracking Supply Disruptions, Impact of Inflation on Small Business</h2>

<div class="uscb-sub-heading-1 uscb-feature-banner-description"></div>

</div>

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