AEM Components
Full List of AEM Components
-
C01 Header
C02 Footer
C08 Hero Image w/ CTA
C09 Hero Image
C10 Full-Width Photo w/ CTA
C11 Title Text CTA
C12 In-Page Navigation Tiles
C12 In-Page Navigation Buttons
C13 Featured Content - Scroll to see all variations
C14 Search Results
C17 Preserve Locator
C18 Preserve Overview Detail
C19 Tab Container
C20 Rich Text Editor
C21 Resource Listing
C23 Featured Number List
C24 Map
C25 Related Events - Auto
C26 Media Gallery
C27 Related Articles - Manual - Four Up Variation
C27 Related Articles Manual - Five Up Variation
C27 Related Articles - Auto - Three Up Variaion
C27 Related Author
C28 Quote - Scroll to see all variations
C35 Connect Callout
C36 Sign-Up Form
C37 Article Hero - Text Below Image
C37 Article Hero - Text Over Image
C38 Image
C39 YouTube
C41 Find a Local Chapter
C43 Author - Bottom Callout and Byline
C45 Visual Listing - Square Image
C45 Visual Listing - Download List
C45 Visual Listing - Icons
C45 Visual Listing - No Images
C46 Pop-Up
C47 Related People Feed
C48 People Aggregation
C49 Menu Navigation
C50 Events Detail
C51 Biography Overview
C52 Text 4-Up Links
C53 Alert Banner
C54 Accordion
C55 Contact Listing
C56 Acnhor Links
C57 Social Share
C58 Article Aggregation
C59 Find a Local Event
C60 Basic Text Block
C61 Events Aggregation
C62 Contact Detail
C63 Open Container Component
C66 Visual Download - List
C66 Visual Download - Single Large
C67 Timeline
C69 Media Contacts
C70 Callout
C72 Article CTA - Scroll to see variations
C73 Audio
C73 Audio w/ Expanded Transcript
C73 Audio w/ Text Below Image
C73 Audio w/ Text Over Image
C74 Text List Callout (Horizontal)
C74 Text List Callout (Vertical)
C75 Press Release Aggregation
C76 Tools & Resource Listing
C79 Text Asset - C38 Image Example (see C79 Text Asset configurations under AEM for list of available text assets)
C82 Homepage Hero
C83 Homepage Feature
C84 Article Gallery
C85 SCA Feature - Homepage
C85 SCA Feature - Landing Page
C86 Featured Initiative
C87 Lead Generation Form
C88 Partner Brand
C88 Partner Brand - Primary Logo
C89 Text and Image Expansion - Square Image
C89 Text and Image Expansion - Square Image - Text Expaned State
C89 Text and Image Expansion - Landscape Image
C89 Text and Image Expansion - Portrait Image
C96 Image Slider - White
C96 Image Slider - Green
C100 Portal Log In
C101 Forgot Password
C102 Change Password
C103 Portal Header
C104 Featured Collection - Light Gray Background
C104 Featured Collection - Dark Background
C105 Statistics - Long Description
C105 Statistics - Short Description
C106 Pie Chart
C106 Pie Chat - Detailed Breakdown
C107 Column Chart - Stacked - Two Columns
C107 Column Chart - Stacked - Two Columns - 10 Items
C107 Column Chart - One Column
C108 Line Chart - Two Columns
C108 Line Chart - One Column
C109 Document Download - List View
C109 Document Download - Grid View
C110 Events & Trips Aggregation
C111 Image Mosaic - Scroll to see all variations, including the 10-up, 5-up and 4-up
C112 Photo Album Aggregation
C112 Photo Album Aggregation - Photos Display
C113 Photo Album Detail
C114 Vimeo Video Aggregation
C115 Vimeo Video
C116 Globe
C116 Impact Map
C116 Globe - Modal Open
C116 Globe - List View
C117 Scrolling Slidehow - Dark Background
C117 Scrolling Slideshow - Light Background
C120 Interactive Points Over Image - Scroll to see all variations (tool tips and points)
C121 Image Collage - Scroll to see all variations
C122 Progress Tracker
C123 Table
C124 Volunteer Detail (COMING SOON)
C125 Volunteer Aggregration (COMING SOON)
C126 Overview and Bar Chart
C127 Split Hero - Light text panel
C127 Split Hero - Dark text panel
C128 Immersive Hero
C129 Visual Listing - Scroll to see all variations, including the 2-up, 3-up and 4-up
C130 Storytelling
C131 Vertical Timeline
C132 Live Video Embed
C133 Interactive Tiles
-
There are a number of components that have been designed for use ONLY on the nature.org homepage and the homepage of other TNC properties (such as international sites, i.e. NatureUnited.org). Many of these components are also available on the TNC Audience/Donor Portal homepage.
Homepage Only components include:
Featured Content (C13)
Homepage Hero (C82)
Homepage Feature (C83)
Article Gallery (C84)
Featured Content Initiatives (C86)
In addition, there are a few components that should be used only with prior consultation with the Global Digital team or your publisher. If you would like to use one of the following components, submit a Digital Request with details on how and why you plan to use the component so that we can provide guidance.
Consult-Required Components:
C08 Hero Carousel - consult publisher
C24 Map - Advanced Variation (Fine to use generic variation w/o consult)
C53 Alert Banner - DO NOT USE (Super-Admin Use Only)
C63 Open Container Component
C87 Lead Generation Form
C120 Interactive Points Over Image
Finally, we are working on a pilot project to create individual portals for major donors to access resources, such as reports, financials, articles of interest, photos from events, and so on. A number of components were developed for the portal. Some of these have been permitted on pages on nature.org, while others are restricted to the portal. Those components are labeled DONOR PORTAL PILOT ONLY:
- Photo Album Aggregation (C112)
- Events & Trips Aggregation (C110)
- Document Download (C109)
- Vimeo Video Aggregation (C114)
- Portal Log In (C100)
- Portal Header (C103)
- Vimeo Video (C105)
- Portal Change Password (C102)
- Portal Forgot Password (C101)
(C01-C10)
-
The Header is only authored by a small group of admins that run the main nature.org homepage and other TNC properties on AEM (such as the Canada site, the Australia site, and so on). The header is authored once and inherited on all other pages throughout the site.
-
The Footer is authored by a small group of site admins. It is authored once on a site homepage and inherited on all other pages across the site.
-
*Carousel disabled, now functions as a hero with CTA
Allowed only on Landing & Campaigns pages (T02). This component allows the author to create a hero with a CTA button.
There is a now a new 'Split' variation that is intended for pages with clear call to action goals. Consider using this variation for campaign landing pages.
-
The Hero Image is the most common hero component (aka, article splash). It is allowed on:
- T02 Landings & Campaigns
- T03 Chapter/Program & Region Landing
- T04 Aggregation (Automated)
- T06 Event Detail
- T09 Places We Protect Landing
- T10 Places We Protect Detail
- T11 Contact Listing & FAQs
- T12 Contact Detail
- T13 Aggregation (Manual)
- T17 Forms
- Portal Content Page
- Portal Homepage
Variations includes small and large, white text or black text (author choice).
-
Full Width Divider Photo CTA (C10)
The Full-Width Photo CTA is available on the T01 Home Page, T02 Landing & Campaigns, T03 Chapter/Program and Region Landing, Portal Content Page and the Portal Homepage templates.
This component is used as an immersive call-to-action. It's intended to also function as a section divider on pages that display multi-section sets of content as seen on this Age of Nature page.
C11-C20
-
The C11 Title Text CTA is available on most templates:
- T01 Home
- T02 Landing & Campaigns
- T03 Chapter/Program & Region Landing
- T04 Aggregation (Automated)
- T06 Event Detail
- T09 Places We Protect Landing
- T10 Places We Protect Landing
- T11 Contact listing & FAQs
- T12 Contact Detail
- T13 Aggregation (Manual)
- Portal Content Page
- Portal Homepage
The primary purpose of this component is to provide the user with a text driven call-to-action. It may also be used, in limited cases as a tagline or text-based introduction to content (when CTA is omitted).
-
In-Page Navigation - Image Tiles (C12)
In-Page Navigation - Buttons (C12)
The In-Page navigation component is available on:- T01 Home Page
- T02 Landing & Campaigns Page
- T03 Chapter/Program and Region Landing
- T09 Places We Protect Landing
- T11 Contact Listing & FAQs
- T12 Contact Detail
- Portal Content Page
- Portal Homepage
This component is used for navigating the visitor to deeper level pages from a landing page. You can add a minimum of 3 tiles or buttons, and up to 8 items.
When authoring this component, you will choose a parent page and the buttons or tiles will auto-generate from the child pages of that parent page. If you choose to override, there is a 20-character limit.
-
The Featured Content component is available on both landing page templates:
- T01 Home Page
- T02 Landing & Campaigns
- T03 Chapter/Program and Region Landing
- T05 Biography Detail
- Portal Content Page
- Portal Homepage
The purpose of this component is to prominenly feature content such as articles and videos, or promote featured area of the site to cross-promote content.
-
The Search Results component is only used by site admins. It is configured once on a site on a specialized template - T16 Search Results.
As you expected, this component is used to provide visitors with a method of searching the site.
-
The Preserve Locator component is configured once by site admins on the T09 Places We Protect Landing page. The component is used to facilitate preserve/pwp search.
-
The preserve overview detail component displays a description of the preserve and high-level information at a quick glance. This component is only available on the T10 Places We Protect Detail template.
-
The C19 Tab Container component is available on the following templates:
- T02 Landing & Campaigns
- T04 Aggregation (Automated)
- T05 Biography Detail
- T06 Event Details Page
- T10 Places We Protect Detail
- T13 Aggregation Manual Page
- Portal Content Page
- Portal Homepage
The Tab Container gives you a way to include a lot of information on a page without creating one long, scrolling post. The tabs allow you to break up the information by category. You can include between 1 and 6 tabs, and the character limit for a tab title is 10 characters.
-
The C20 RTE component is available on most AEM templates;
- T01 Home Page
- T02 Landing & Campaigns
- T05 Biography Detail
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- T17 Forms Page
- Portal Content Page
- Portal Homepage
The rich text editor is a component that allows an an author to place and unlimited amount of text on a page and format that text. Rich text options include font styling, bulletted and numbered lists and some special characters. The preferred font styling for body content on nature.org is "paragraph" and the preferred heading style is "header 4."
C21 - C30
-
The C21 Resource Listing component is available on the following templates:
- T02 Landing & Campaigns
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
The C21 Resource Listing component is also available as a secondary-component option in the text-asset component.
-
The C23 Featured Number List component is available on the following templates:
- T02 Landing & Campaigns
- T05 Biography Detail
- T07 Article Detail
- T08 Press Release Detail
- Portal Content Page
- Portal Homepage
The primary purpose of this component is to display a list of items sequentially, such as steps or a "top-5" type list. Each item in the list includes the option for a link.
-
Map (C24) - Updates coming soon
The C24 Map component is available on the following templates:
- T01 Home Page
- T02 Landing & Campaigns
- T07 Article Detail
- Portal Content Page
- Portal Homepage
This component embeds a google map and there are three variations: places we protect, generic & advanced. The places we protect varitation is for usage in tab 2 of the places we protect detail template only. The generic & advanced maps can be used for articles and other templates where indicated. The generic & advanced versions may have single or mutiple pins. Typically, the advanced map is only used in cases where over 100 pins are needed. Reach out to Global Digital for assistance by submitting a ticket at nature.org/digitalrequests
-
The C25 Related Events (Auto) component is available on the following templates:
- T02 Landing & Campaigns
- T03 Chapter/Program & Region Landing
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
The related events (auto) component uses AEM taxonomy - tags added to pages in the page properties - to pull in pages that match selected criteria. For example, you could create a related articles component with Climate Change articles and set it to pull in all articles tagged with the topic tag "Climate Change." The C27 Related Articles (Auto) component is also available as a secondary-component in the Text-Asset Component.
-
The C26 Media Gallery component is available on the following templates:
- T01 Home Page
- T02 Landing & Campaigns
- T03 Chapter/Program and Region Landing
- T05 Biography Detail
- T06 Event Detail
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
The purpose of the media gallery is to display related images and/or videos relevant to the topic of a page. The component requires a minimum of 3 items and up to 15 items in the carousel. Both images and video items can be included in a single gallery.
Example page using media gallery (Page and link are subject to expiration)
-
C27 Related Articles (Manual)
The C27 Related Article (Manual) component is designed to cross-promote related stories (articles), blog posts & magazine content.
The C27 Related Articles (Manual) component is available on the following templates:
- T01 Home
- T02 Landing & Campaigns
- T03 Chapter/Program & Region Landing
- T05 Biography Detail
- T06 Event Detail
- T07 Article Detail
- T10 Places We Protect Detail
In addition, the C27 Related Articles (Manual) component is available to use as a secondary component in the Text-Asset component with the "Text-Asset Variation Only" option from the Choose Variation dropdown.
-
C28 Block Quote - Image Right
C28 Block Quote - Headshot Left
The C28 Block Quote component is designed to provide a succinct inspiring quote that is relevant to the content.
The component is available on the following templates:
- T02 Landing & Campaigns
- T05 Biography Detail
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
In addition, the C28 Block Quote component is available as a secondary component within the Text-Asset component.
C31-C40
-
This component is used as a contact/social callout primarily at the top of regional/chapter pages.
The C35 Connect Callout is available on the following templates:
- T02 Landing & Campaigns
- T03 Chapter/Program & Region Landing
- T04 Aggregation (Auto)
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
-
C37 Article Hero - Text Below Image
C37 Article Hero - Text Over Image
The article hero is designed as to be the main component visible when a visitor lands on an article page or a press release. It provides the visitor with an overview of the page content. Variations include white text or black text (author choice) and display text on image or below image.
The C37 Article Hero component is available on the following templates:
- T07 Article Detail
- T08 Press Release Detail
- Portal Content Page
- Portal Homepage
-
This component is used to display a single image within long-form article pages and stories as well as pages that require a stand-alone image in-between other content components.
The Image component is available on the following templates:
- T02 Landing & Campaigns
- T05 Biography Detail
- T06 Event Detail Page
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
-
This component is used to display a single YouTube video within long-form article pages and stories as well as pages that require a stand-alone video in-between other content components. YouTube playlists can also be added in this component by using the Playlist ID in place of the Video ID.
The YouTube video component requires the YouTube ID to embed a video. If your video URL is https://www.youtube.com/watch?v=9AoSX-xaXHM the YouTube ID is 9AoSX-xaXHM. Also important to note that the video title and description will not be pulled in from YouTube, so you will need to author these fields.
The C39 YouTube Video component is available on the following templates:
- T01 Home Page
- T02 Landing & Campaigns
- T05 Biography Detail
- T06 Event Detail Page
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- T17 Forms
- Portal Content Page
- Portal Homepage
C41-C50
-
This component is used to guide a visitor to the chapter/program pages under "Where We Work" section of nature.org.
C41 Find a Local Chapter is available on the following templates:
- T01 Home
- T02 Landings & Campaigns
- Portal Content Page
- Portal Homepage
-
The visual listing (manual) component is used to provide a listing of news, reports or other list type content.
This component is available on the following templates:
- T02 Landing & Campaigns
- T05 Biography Detail
- T07 Article Detail
- T13 Aggregation (Manual)
- Portal Content Page
- Portal Homepage
-
This component is used as a feed to provide visitor with a teaser/sample of TNC people. This may be used on influencer pieces to provide TNC contacts for followup on a topic.
This component is available on the following templates:
- T02 Landings & Campaigns
- T03 Chapter/Program & Region Landing
- T07 Article Details
- Portal Content Page
- Portal Homepage
-
The people aggregation component is designed to be used in the Our People section on nature.org. Each tab of the Our People section contains this component set to different parameters.
The component is available on the following template:
- Aggregation (Auto)
- Aggregation (Manual)
- Portal Content Page
- Portal Homepage
-
The location menu is used on the chapter/program landing pages to navigate to the deeper State/Country pages.
The Location Menu Nav is available on the following templates:
- T02 Landing and Campaigns
- T03 Chapter/Program Region Landing
- Portal Content Page
- Portal Homepage
Example page with C49 Location Menu Navigation component.
-
The Events Detail component displays at-at-glance information on the events detail page.
The component is available on the following template:
- T06 Events Detail
- Portal Content Page
- Portal Homepage
C51-C60
-
This component provides a quick overview information for biography pages. Typically, for a staff member the component will include Areas of Expertise, Resources, Media Contact, and Scheduling Contact.
This component is available on the following template:
- Biography Detail
-
This component is used to highlight important content. There is a minimum of 3, maximum of 8 link/title/short description blocks allowed. 4 are recommended from an authoring guide perspective.
This component is available on the following templates:
- T02 Landing & Campaigns
- T17 Forms Page
- Portal Content Page
- Portal Homepage
-
The accordion component's primary usage is to provide a method in which to communicate short question and answer information. The component can be used within a longer form copy page or as its own page along with the C56 anchor link component.
This component library is using the Accordion component.
The C54 Accordion component is available on the following templates:
- T02 Landing & Campaigns
- T07 Article Details Page
- T10 Places We Protect Details
- T11 Contact Listing & FAQs
- T12 Contact Detail
- T17 Forms
- Portal Content Page
- Portal Homepage
-
C55 Contacts Listing - People
This component provides a listing of contacts at TNC - either a list of places (i.e. offices) or a list of people (i.e. staff). Author can choose the type of content to display for each card in the 3 columns. Author can add, reorder, and remove card items.
The C55 Contacts Listing component is available on the following templates:
- T11 Contacts Listing & FAQs
- T12 Contact Detail
- Portal Content Page
- Portal Homepage
-
The anchor links component is used to help a visitor navigate quickly to information contained within a long form, listing or FAQ page.
The Anchor Links component is available on the following templates:
- T02 Landing & Campaigns
- T07 Article Details
- T11 Contact Listing & FAQs
- T12 Contact Details
- Portal Content Page
- Portal Homepage
-
This component is intended to function as a social sharing module that allows users to share the page on Facebook, Twitter, and LinkedIn. Users could also print or email the page.
When sharing on social media the following metadata will be used if available: Page title, Page Description, Page Type, Image, Site name, Open Graph URL.
This component is available on the following templates:
- Landing & Campaigns page
- Chapter/Program & Region Landing page
- Article Detail
- Places We Protect
-
The article aggregation component is used to display stories, features and other long-form article content (excluding press releases).
The C58 component is available on the following templates:
- T04 Aggregation (Automated)
- T05 Biography Detail
- T13 Aggregation (Manual)
- Portal Content Page
- Portal Homepage
-
This component is used to help facilitate a preliminary search for events on the volunteer & attend events landing page. When a location is chosen, it takes the user to an aggregation page set up for all TNC events.
The component is available on the following templates:
- T02 Landing & Campaigns
- Portal Content Page
- Portal Homepage
-
The basic text block is used for short or longer form text content, like a biography.
The Basic Text Block is available on the following template:
- T05 Biography Detail
- T17 Forms
- Portal Content Page
- Portal Homepage
C61-C70
-
Events aggregation aggregates events cards that users can click on to view details of a single event. It is a dynamic component which displays events and provides visitor with narrow down and search options. On nature.org this component is used on the voluteer and attend events landing page.
C61 can be used on the following templates:
- T04 Aggregation (Auto)
- T13 Aggregation (Manual)
- Portal Content Page
- Portal Homepage
-
The contact detail component provides an at-a-glance overview of the most important contact info for contact detail pages.
The C62 Contact Detail component is available on the following templates:
- T12 Contact Detail
- Portal Content Page
- Portal Homepage
-
The Open Container Component (C63) is used to bring in external content that is outside of AEM onto a page. It can also be used to embed interactive media elements that are developed by the Global Digital Team.
If you are interested in using an Open Container Component on a page, read the requirements and then submit a Marketing Requests Portal ticket on Jira Service Desk.
-
C66 Visual Download Single Large
The visual download component is meant to be used on article detail pages as a callout to featured reports or other document types.
The C66 Visual Download component is available on the following templates:
- T02 Landing & Campaigns
- T07 Article Detail
- Portal Content Page
- Portal Homepage
-
The timeline component is used to display content in a progressive format, typically used for displaying a history.
The C67 Timeline component is available on the following templates:
- T01 Homepage
- T02 Landing & Campaigns
- T03 Chapter/Program & Region Landing
- T07 Article Detail
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
-
The Media Contacts component is used for providing quick contact information on press release detail pages. An author can add from minimum 1 to 4 maximum contact cards.
The C69 Media Contacts component is available on the following templates:
- T02 Landing & Campaigns
- T08 Press Release Detail
- Portal Content Page
- Portal Homepage
-
Callout Comp. Full-Width Image-Text (C70)
Callout Comp. Sidebar (C70)
The callout component is used for highlighting content on a page, like key takeaways.
The Callout component is available for use on the following templates:
- T02 Landing & Campaigns
- T06 Event Details
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
C71-C80
-
The article CTA is used to drive action on an article page. It is meant to ONLY be used within the text of a long-form content article in a Text-Asset component. There are two variations, one with a CTA button, one with a sign-up form.
The Article CTA can be used on any page where a Text-Asset component can be used:
- T07 Article Detail
- Portal Content Page
- Portal Homepage
-
C73 Audio - w/ transcript expanded
The audio component is used for embedding audio recordings on a page with the option of adding an image.
When using the audio component, audio files should be uploaded into the DAM and published, then linked in the component.
The C73 Audio component is available on the following templates:
- T01 Home
- T02 Landing and Campaigns pages
- T03 Chapter/Program and Region Landing pages
- T07 Article Detail
- T08 Press Release pages
- T10 Places we Protect Detail
- Portal Content
- Portal Homepage
-
C74 Text List Callout (Horizontal)
C74 Text List Callout (Stacked vertical)
The text list callout component is used for listing content that includes an optional hyperlink. This now includes a stacked vertical variation for further authoring flexibility.
For an example, see the Membership Benefits text and images on the Become a Member page on nature.org.
The C74 Text List Callout component is available on the following templates:
- T02 Landing & Campaigns
- Portal Content Page
- Portal Homepage
-
The Press Release Aggregation component is used to aggregate all press releases in the TNC newsroom.
The Press Release Aggregation component is available on the following templates:
- T04 Aggregation (automated)
- T13 Aggregation (manual)
- Portal Content Page
- Portal Homepage
-
C76 Tools & Resource Listing - Manual
This component is used as a visual listing that requires manual curation. The items included in the listing can be internal or external, however this component is often used to link to external content.
Example of component use on nature.org.
The C76 Tools & Resource Listing - Manual component is available on the following templates:
- T04 Aggregation (Auto)
- T13 Aggregation (Manual)
- Portal Content Page
- Portal Homepage
-
C79 Text Asset Component - Image
C79 Text Asset Component - Image Portrait
This component is used to facilitate wrapping of text around specific components.
The secondary components that can be used in the Text Asset component are:
- C38 Image
- C72 Article CTA
- C28 Block Quote
- C70 Callout
- C27 Related Articles
- C27 Related Article (Auto)
- C21 Resource Listing
The C79 Text Asset Component is available on the following templates:
- T02 Landing & Campaigns
- T07 Article Detail
- T08 Press Release Detail
- Portal Content Page
- Portal Homepage
C81-C90
-
The Homepage Hero Carousel is for usage on the primary homepage of a site. This component is only used on the main nature.org homepage and the homepages of other TNC properties.
C82 Homepage Hero is available on the following page templates:
- T01 Home
-
The Homepage Feature is a component that highlights a feature coupled with a call to action newsletter sign-up form. This component is only used on the nature.org homepage and the homepages of other TNC properties.
The C83 Homepage Feature component is available on the following page templates:
- T01 Home
- Portal Homepage
-
The article gallery showcases stories & other important article-type content in a gallery on a homepage. Minimum 3, Maximum 5 carousel items.
The C83 Article Gallery component is available on the following templates:
- T01 Home
- Portal Content Page
- Portal Homepage
-
Homepage & Section Landing SCA (C85)
The Homepage SCA component is used to highlight TNC's main priorities (Shared Conservation Agenda). Minimum 4, Maximum 5 items.
The C85 Homepage & Section Landing SCA component is available on the following templates:
- T01 Home
- T02 Landing & Campaigns
- Portal Content Page
- Portal Homepage
-
Featured Content Initiatives (C86)
This component is used on the homepage to feature important TNC action content coupled with a Quote.
The Featured Content Initiatives component is available on the following templates:
- T01 Home
- Portal Home
See component on nature.org homepage.
-
**This component should only be used in consultation with the Global Digital team. If you wish to use this the C87 Lead Generation Form, submit a digital request**
Overview
The Form call-to-action component is used to create promotional form types such as sign-ups and registration as well as providing an interface for users to donate.
Lead Generation
- Contact Us - newsletter signup, membership queries, media queries
- Other possible use cases: action center pledges, quizzes, email-signup for state events, event registration (can be quite complex), competitions like photo contest
The C87 Lead Generation Form component can be used on the following templates:
- T02 Landing & Campaigns
- T03 Chapter/Program and Region Landing
- Portal Homepage
- Portal Content Page
-
Partner Brand - Primary Logo (C88)
This component is used to add a collection of logos for partners on a pages.
The C88 Partner Brand component is available on the following templates:
- T01 Home
- T02 Landing & Campaigns
- T03 Chapter/Program and Region Landing
- T04 Aggregation (Automated)
- T05 Biography Detail
- T06 Event Detail
- T07 Article Detail
- T08 Press Release Detail
- T09 Places We Protect Landing
- T10 Places We Protect Detail
- T11 Contact Listing & FAQs
- T12 Contact Detail
- T13 Aggregation (Manual)
- Portal Homepage
- Portal Content Page
C91-C100
-
The Image Slider (C96) component allows an author to display before and after photos. Two photos are added to the component, with a slider bar that uncovers one image or the other. The slider can swipe up and down or left to right. Typically, the sliders are showing the same area of a landscape or a map at different points in time or with different elements highlighted.
Example page with image slider
The Image Slider component is available on the following templates:
- T02 Landing & Campaigns
- T05 Biography Detail
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- Portal Homepage
- Portal Content Page
-
C100 Portal Log In is the initial screen of the donor portal where donors can log in. This component is only used for the donor/audience portal.
C101-C110
-
C101 Portal Forgot Password component is used to help portal users reset their passwords. It is an admin-only component that does not require custom authoring for each new donor portal.
-
Allows portal users to choose a new password to use when logging into their portal.
-
This header will only be used for the donor portal site and includes the contact and profile popover.
-
Feature Collection – Full Bleed (C104)
Feature Collection – Light Background (C104)
Video Tutorial (how to author component)
This component can be used for the hero on the donor portal homepage, or for a standard feature collection. The feature collection can include an optional greeting and a feature cta, along with 1-4 featured items (e.g., articles, documents).
The Feature Collection component is available for use on the following templates:
- T01 Home
- T02 Landing & Campaigns
- Portal Home
- Portal Content Page
-
Statistics (C105) - Short Description
Video Tutorial (How to author component)
The Statistics component can be used to highlight important statistics/figures using numbers and icons.
The C105 Statistics component is available on the following templates:
- T01 Home
- T02 Landing & Campaigns
- T03 Chapter/Program & Region Landing
- T06 Event Detail
- T07 Article Detail
- T08 Press Release Detail
- T10 Places We Protect Detail
- Portal Content
- Portal Homepage
-
Video Tutorial (how to author component)
The pie chart component should be used to show how individual parts make up the whole of something. On the donor portal, this may be used to show the breakdown of an individuals giving into different projects or geographic regions.
The Pie Chart component is available on the following templates:
- T01 Home
- T02 Landing & Campaigns
- T07 Article Detail
- T08 Press Release Detail
- Portal Content
- Portal Homepage
-
Column Chart - 10 Items (C107)
The column chart can be used to show a comparison among different items, or show a comparison of items over time. The stacked column charts can be used to display the contributions of parts of a whole.
The Column Chart is available on the following templates:
- T01 Home
- T02 Landing & Campaigns
- T07 Article Detail
- T08 Press Release Detail
- Portal Content
- Portal Homepage
-
The line chart shows how a data set performed during a specific time period or relationship between data sets.
The Line Chart is available on the following templates:
- T01 Home
- T02 Landing & Campaigns
- T07 Article Detail
- T08 Press Release Detail
- Portal Content
- Portal Homepage
-
Document Download - List (C109)
Document Download – Grid (C109)
This secure document component is used to store documents in the donor portals via Box API. Allowed only in donor portals.
-
Events & Trips Aggregation (C110)
The C110 Events & Trips Aggregation component will be used to aggregate events and trips (past and future).
The Events & Trips Aggregation (C110) component is available only on donor portal pages.
C111-C120
-
Image Mosaic – 5 displayed (C111)
Image Mosaic – 10 displayed (C111)
Video Tutorial (how to author image mosaic)
The purpose of the image mosaic is to display related images and/or videos relevant to the topic of the page, or link to a full album.
The Image Mosaic is available on the following templates:
- T01 Home Page
- T02 Landings & Campaigns
- T03 Chapter/Program Region Landing
- T06 Event Detail
- T07 Article Detail
- T10 Places We Protect Detail
- Portal Content Page
- Portal Homepage
-
Photo Album Aggregation (C112) - photos
Photo Album Aggregation (C112) - album
This component is used to pull details from photo albums into album preview and all photo views. The best way to use this component is to create photo album folders for photo collections in the DAM within one larger photo folder. Then create a page with a photo album detail component for each collection. Then, link those photo album pages in the photo album aggregation component.
The Photo Album Aggregation component is only available for use with the Donor Portal Pilot, on the Donor Portal Content template.
-
This component is used to create a photo album, which can later be used in the aggregation component.
The Photo Album Detail component is for use only with the Donor Portal Pilot and only available on the Portal Content page template.
-
This component is used to display a library of videos and can be used within C19 Tab Container along with documents and photos for the donor portal.
Videos can be hosted on either Vimeo or YouTube.
The Video Aggregation component is only for use on the Donor Portal and only available on the Portal Content page template.
-
This component is used to display a single video within long-form article pages and stories as well as pages that require a stand-alone video in-between other content components. The component pulls in videos hosted on Vimeo using the Vimeo ID.
This component is availble only on the Portal Content page template. Videos on Nature.org should be streamed from YouTube.
-
Globe Modal Detail
Video Tutorial (how to author component)
The globe can be used to mark significant locations and provide details on events, initiatives, etc. that have taken place there. The component places markers on a globe, and when markers are clicked information about the item is displayed in a panel.
The Globe component is available on the following templates:
- T02 Landing & Campaigns
- Portal Content
-
Impact Map (C116) - This is currently available for Donor Portal usage only.
-
Video Tutorial (how to author component)
The Scrolling Slideshow component is used to display content in a progressive format, typically used for displaying history. The user scrolls through content and images fade in and out as they correspond to the text.
The Scrolling Slideshow component is available on the following templates:
- T02 Landing & Campaigns
- T07 Article Detail
- Portal Content
- Portal Homepage
-
C120 Interactive Points Over Image Scroll to see all variations (Examples 1&2 = Tooltips: Dark; Example 3 = Tooltips: Light; Examples 4&5 = Points)
This component allows users to author an interactive experience with clickable points on an image. Clicking those points would change the display of information in the description panel as well as the option to change the featured image. Two interactive variations are available: tooltips and points.
This component will be full-width when added to a page. Content will not wrap around the Points Over Image component.
On mobile the primary image will always appear above the Description panel instead of to the right.
On desktop the primary image will always appear on the right.
The Interactive Points Over Image component is available on the following templates:
- T07 Article Detail
- Portal Content Page
- Portal Homepage
C121-C130
-
This will be coming soon to AEM.
-
This will be coming soon to AEM.
-
There are four variations that can be configured within this component:
- Cover Slide
- Text Tile Block (7 background colors available)
- Full bleed background with text panel (text panel can be aligned left or right)
- Split Image and Text Panel
C131-133
-
This vertical scrolling timeline displays a series of cascading milestone cards. This timeline allows for the display of month and year, title and descriptor, and an accompanying image or video of the milestone.
-
This component allows for the emedding of a live Facebook streaming video. Use the URL of the Facebook video to configure the player.
-
Interactive Tiles (C133) - Text Over Image
Interactive Tiles (C133) - Text Below Image
Interactive Tiles (C133) - No Text
This component functions as a collection of clickable tiles that open a detailed lightbox to reveal more information. This enables quick browsing of information without visitors having to depart the page.
To see the modal view, click on the first tile of the prototypes.