Skip Navigation
Within Components

Multi-Featured Pages

The Multi-Featured Component allows for multiple components and elements to be added to one page. These components can include text and images as well as other pages. The Multi-Featured Pages component is highly customizable, allowing to arrange different pages.

On This Page:

Related Information

Example

View on public site:

web Data: Census Data

When to Use

The Multi-Feature Pages Component should be added to a page when a content author wants to display additional pages and features. 

Usage

The Multi-Feature Pages Component is used to visually display multiple features, such as pages and buttons. The purpose is to give a visitor more options then already presented on the current page. A content author can add and customize any AEM page.

Configure Dialog

Tab 1: Multi Feature

author

The configure dialog allows the content author to enter different fields regarding the features they would like to add. These fields include:

  • Title: The title of the feature
  • Title Size: The size of the title text. Options are large, extra large, medium, medium small, and small
  • Title Alignment: The alignment of the title text. Options are left, right, center
  • Number of features: Number of features to be included. A content author can add 2 or 3
  • Description: Description of the feature
  • Build Multi Feature Using: Option to include what feature to use. There are only 2 options, AEM pages and non-AEM pages
  • Explore More URL Text: Placeholder text for the Explore More URL presented with the component. The default is "Explore More"
  • Explore More Link: Page link to the explore more text

Tab 2: AEM Pages

author

The second tab allows a content author to populate the AEM or non-AEM page they would like to include. They can do this by clicking the "Add field" button. The parameters for each field include: 

Hyperlink: The link to the page required

Image: An image to add as a visualization of the page

Alt Text: For accessibility purposes, used to add an alternative text to the feature

Image is decorative: If checked, image will not be printed or screenreader tool will bypass the reading

View More Text: Caption value for the view more

Developer Resources

Expand the section below to see the Multi-Feature Component's HTML output.

<style>

.multifeature-one-item {

text-align: center !important;

justify-content: center !important;

}

</style>

 

<section>

<div class="uscb-three-feature-heading">

 

</div>

 

<div class="uscb-grid-wrap-container uscb-layout-row uscb-layout-column-md uscb-layout-align-center-start uscb-three-feature-item-wrapper ">

<a href="https://data.census.gov/cedsci/profile?q=United%20States&amp;g=0100000US" class="uscb-three-feature-item uscb-grid-mbl-4 uscb-grid-gutter-L   uscb-width-100">

<div class="uscb-margin-B-16 uscb-three-feature-item-title" style="height: 40px;">

<div class="uscb-list-item uscb-nav-button-container uscb-text-decoration-none" tabindex="0">

Data Profiles

</div>

</div>

 

<div onclick="linkClick(this, 'Multifeature Component');" class="uscb-list-item uscb-margin-B-16 uscb-text-decoration-none" tabindex="0">

<p class="uscb-three-feature-item-description" style="height: 96px;">

View statistics across a variety of topics for your state, county or town.

</p>

</div>

 

<div class="uscb-margin-B-40 uscb-three-feature-item-cta">

</div>

<div onclick="linkClick(this, 'Multifeature Component');" title="Data Profiles" class="uscb-list-item uscb-nav-button-container" tabindex="0">

<div class="uscb-three-feature-img">

<div alt="" class=" uscb-three-feature-image" style="background-image: url(/content/census/en/data/jcr:content/root/responsivegrid/threefeatures_copy_1.threefeaturesitemimg.1.jpg/1668632141360/data-profiles.jpg);"></div>

</div>

</div>

</a>

<a href="https://data.census.gov/cedsci/table?q=United%20States&amp;table=DP05&amp;tid=ACSDP1Y2017.DP05&amp;g=0100000US&amp;lastDisplayedRow=29&amp;vintage=2017&amp;layer=state&amp;cid=DP05_0001E" class="uscb-three-feature-item uscb-grid-mbl-4 uscb-grid-gutter-L uscb-margin-T-md-30  uscb-width-100">

<div class="uscb-margin-B-16 uscb-three-feature-item-title" style="height: 40px;">

<div class="uscb-list-item uscb-nav-button-container uscb-text-decoration-none" tabindex="0">

Tables and Maps

</div>

</div>

 

<div onclick="linkClick(this, 'Multifeature Component');" class="uscb-list-item uscb-margin-B-16 uscb-text-decoration-none" tabindex="0">

<p class="uscb-three-feature-item-description" style="height: 96px;">

Dynamically add geographies, topics, or filters to get the data tables and maps you need.

</p>

</div>

 

<div class="uscb-margin-B-40 uscb-three-feature-item-cta">

</div>

<div onclick="linkClick(this, 'Multifeature Component');" title="Tables and Maps" class="uscb-list-item uscb-nav-button-container" tabindex="0">

<div class="uscb-three-feature-img">

<div alt="" class=" uscb-three-feature-image" style="background-image: url(/content/census/en/data/jcr:content/root/responsivegrid/threefeatures_copy_1.threefeaturesitemimg.2.jpg/1668632193405/tables-maps.jpg);"></div>

</div>

</div>

</a>

<a href="https://public.govdelivery.com/accounts/USCENSUS/signup/22746" class="uscb-three-feature-item uscb-grid-mbl-4 uscb-grid-gutter-L uscb-margin-T-md-30 uscb-grid-gutter-R uscb-width-100">

<div class="uscb-margin-B-16 uscb-three-feature-item-title" style="height: 40px;">

<div class="uscb-list-item uscb-nav-button-container uscb-text-decoration-none" tabindex="0">

2020 Census Data

</div>

</div>

 

<div onclick="linkClick(this, 'Multifeature Component');" class="uscb-list-item uscb-margin-B-16 uscb-text-decoration-none" tabindex="0">

<p class="uscb-three-feature-item-description" style="height: 96px;">

Sign up to receive updates as more 2020 Census results become available.

</p>

</div>

 

<div class="uscb-margin-B-40 uscb-three-feature-item-cta">

</div>

<div onclick="linkClick(this, 'Multifeature Component');" title="2020 Census Data" class="uscb-list-item uscb-nav-button-container" tabindex="0">

<div class="uscb-three-feature-img">

<div alt="2020 Census Results Coming Soon" class=" uscb-three-feature-image" style="background-image: url(/content/census/en/data/jcr:content/root/responsivegrid/threefeatures_copy_1.threefeaturesitemimg.3.png/1668631861210/2020-results-coming-soon.png);"></div>

</div>

</div>

</a>

</div>

</section>

 

 

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