AEM Components List

AEM Authoring Components List

Within AEM, components are utilized to define the functionality and design of a page. They are the building blocks for creating your web pages.

Components are dragged and dropped onto a page. To break up a page horizontally, components are dragged into Column Generators; A Column Generator breaks the page into separate columns with either a three-column 33-33-33 (%) division, or a two column 33-66 (%), 66-33 (%) or 50-50 (%) division.

To break up a page vertically, Panel components may be used. Panels may be assigned a background color, a background image, or a fixed position (parallax effect) background image. 

After creating a Panel or Column Generator, other components may be dragged inside the newly created areas to form the page's content and give life to the layout you've made.

See below for a complete list of the available authoring components and their usages.

Questions? 

 

Email digitalteam@udel.edu

Full Component List

UDEL General Components

The accordion component provides a clean way to include lots of page content in a compact space.

  • Each accordion tab may be assigned a unique ID to link directly to it, using a URL ID parameter (e.g. "...link#id_here")

  • Note: Accordion boxes appear open in edit mode for easy editing but will close in preview mode.

University of Delaware AEM accordion component example
Accordion component example

The add style or script component may be used to embed custom HTML/JavaScript/CSS that is not covered by other components.

  • Ideal for audio, social feeds, non-AEM forms, etc.
  • Note: For YouTube and UD Capture Space videos, please make use of External Video.

The call to action component provides a convenient, colorful way to present button links to users.

  • Multiple background color options

  • Ability to use a custom FontAwesome icon

  • Optional arrow display

University of Delaware AEM call to action component example
Call to Action component example

The carousel component creates an image slider with optional supporting text and link options.

  • Can be made clickable, with a link destination

  • Optional text overlay

  • No captions for photos

  • Note: Please be sure to complete the title and alt text, for accessibility purposes

University of Delaware AEM carousel component example
Carousel component example

The carousel playlist component provides an asset slider for DAM photos/videos OR YouTube videos.

  • May only display one of either DAM assets or YouTube videos.
University of Delaware AEM carousel playlist component example
Carousel Playlist component example
University of Delaware AEM carousel playlist component example
Second Carousel Playlist component example

The contact component provides a means of displaying unit or personel contact information in a clean, uniform manner.

  • Image not required

  • Note: Please be sure to complete the title and alt text, for accessibility purposes

University of Delaware AEM contact component example
Contact component example

The countdown clock accepts a target date and time along with header text to display.

  • Allows the customization of colors and style

University of Delaware AEM countdown clock component example
Countdown Clock component example

The external video component scales and uniformly displays YouTube or UD Capture Space videos for all browser/window/device sizes.

  • For YouTube videos, paste the last part of the video URL into component dialog (see information text on the dialog field)

  • For UD Capture Space videos, paste full video iFrame code into component dialog
  • Note: This component will also accept YouTube playlists, but they will not be uniformly styled.
University of Delaware AEM external video component example
External Video component example

The image component is the core method to display image content on pages.

  • Optional image caption

  • Note: Please be sure to complete the title and alt text, for accessibility purposes

University of Delaware AEM image component example
Image component example

The list component provides a quick way to organize links into a stacked format. Unlike the Group of Links component, the list component is not auto-generated or orderable. All content is manually created.

University of Delaware AEM list component example
List component example

 

The matrix details component allows configuration of customizable data inputs for use with the Matrix Filtering component

 

University of Delaware AEM matrix (details) component example
Matrix (Details) component example

 

The matrix filtering component may be used to create flexible, modular content search areas with configurable fields for how the user may filter the list of AEM pages.

 

University of Delaware AEM matrix (filtering) component example
Matrix (filtering) component example
University of Delaware AEM matrix (filtering) component example
Second Matrix (filtering) component example

The portal latest news component accepts a News Portal path to display recent stories from. The stories are automatically pulled to this component as new portal posts are created.

  • Offers flexible display options

  • Featured story is optional. If none is selected, the most recent story will display

  • One or more tags can be used to specify story types

University of Delaware AEM portal - latest news component example
Portal - Latest News component example

The Portal Featured Story component accepts a news portal story path to display the image and title from, providing a nice way to encourage readers to click through to read the story.

University of Delaware AEM portal featured story component example
Portal Featured Story component example

The pull quote component accepts input to create styled, text block quotes.

  • Can be left or right aligned

  • Optional quote author field

  • Several background color options

University of Delaware AEM pull quote component example
Pull Quote component example

The reference component allows authors to create sets of components (reference column generators) in a central, organized location that may then be used elsewhere on the website. When a reference is updated, all pages pointing to that reference will also see these changes reflected.

  • Note: Please configure a "Reference Title" in the  reference page Column Generator dialogs, so that each reference group may be identified when selecting it from the reference list.

The reference carousel component displays selected references within a slider.

  • Spans width of page on landing pages

  • Should not be placed inside column generators 

  • Circles at bottom act as progress indicators

  • Arrows on left and right to transition to next panel

The RSS feed component provides authors a quick, easy, configurable way to display RSS feeds from a source URL.

University of Delaware AEM RSS feed component example
RSS Feed component example

The staff component provides a means of displaying personel information "cards" in a clean, uniform manner.

  • Created for the display of personel details, but may also be used for other information displays

  • Call to action button optional

  • Photo can be on right or left
  • Note: Please be sure to complete the title and alt text, for accessibility purposes

University of Delaware AEM staff component example
Staff component example

The tabs component provides a clean way to include lots of page content in a compact space. Similar to the Accordion component, this component will hide content until it is selected for display.

  • Tabs turn into an accordion on mobile display sizes

University of Delaware AEM tabs component example
Tabs component example

The text component is the core method to display text content on pages.

  • Multiple heading and paragraph display options
  • Various color options for both the background color and text color. Please follow accessibility standards by using dark text colors on light backgrounds and light text colors with dark backgrounds.
  • Hidden text option exists - this allows authors to hide a portion of the text on initial load and let the user decide whether they want to expand that portion.

  • Fullscreen editor allows for Table creation and editing.

University of Delaware AEM text component example
Text component example

 

The text and image component displays text alongside an image, and wraps text underneath of the image when the text breakpoint passes the image height.

  • Primarily used for UDaily story layouts
  • Allows for captioned images inset in text

  • Note: Please be sure to complete the title and alt text, for accessibility purposes

University of Delaware AEM text & image component example
Text & Image component example

UDEL Callout Components

The expert callout component provides authors a uniform way to display headshots, expert information and topics, and other "profile" related data.

University of Delaware AEM expert callout component example
Expert Callout component example

The full image callout component is used to display an image with optional text overlay, as well as paragraph text alongside it.

  • Main text suggested but optional

  • Arrow is displayed when there is a configured link destination

  • Note: Please be sure to complete the title and alt text, for accessibility purposes

University of Delaware AEM full image callout component example
Full Image Callout component example

The fun fact callout component provides a formatted way to display text in a large font. This is good for cases where you'd like text to "pop" and look uniquely different from the rest of the page content.

University of Delaware AEM fun fact callout component example
Fun Fact Callout component example

The callout reference component allows authors to create individual components (callout pages) in a central, organized location that may then be used elsewhere on the website. When a callout reference source is updated, all pages pointing to that callout will also see these changes reflected.

The callout reference carousel component displays selected callout references within a slider.

  • Spans width of page on landing pages

  • Should not be placed inside column generators 

  • Arrows on left and right to transition to next panel if more than 3 callouts are selected

The callout text and image component displays text alongside an image, and wraps text underneath of the image when the text breakpoint passes the image height.

  • Main title is bold with a short summary (fewer than 10 words).
  • Call to action area.

  • Note: Please be sure to complete the title and alt text, for accessibility purposes

University of Delaware AEM text & image callout component example
Text & Image Callout component example

UDEL Layout Components

The column generator component is a core building block for any page layout/structure.

  • Other components may be placed inside of this one
  • Provides column layout options for various column widths, splits, and sizes
  • Configurable column colors
University of Delaware AEM column generator component example
Column Generator component example

The FAQ category component allows authors to create organized, searchable information displays like the one on this page.

  • Other components may be placed inside of this one
  • Add in "FAQ Generator" to create
  • For each desired category, add an "FAQ Container"

 

The left navigation component provides an automatically updated listing of the page and all child pages below it, based on the page tree structure. Displays like the one at the top of this page.

  • Goes on top left of the page and all child pages below it.

 

  • Create as a reference and add to pages with the reference component

  • Allows for a display of up to three child page levels deep

 

The localized footer component provides authors with a place to list unit links and contact information, prominent pages, and other information that should be present on their entire area of the site. Displays like the one at the bottom of this page, above the global footer.

  • Goes on unit main page and all child pages underneath it

 

The panel component is a core building block for any page layout/structure.

  • Other components may be placed inside of this one
  • Spans width of layout container
  • Can be configured to use a background color or image

  • Background image option includes fixed positioning to give a parallax effect

  • Option to fill with background color instead of image on mobile

University of Delaware AEM panel component example
Panel component example

UDEL UDaily Content Components

The UDaily Featured Story component accepts a UDaily story path to display the image and title from, providing a nice way to encourage readers to click through to read the story.

University of Delaware AEM UDaily featured story component example
UDaily Featured Story component example

The UDaily latest news component displays the latest UDaily stories on to the page.

  • May be configured to display only stories tagged in with a particular topic
  • May be configured to display 3, 4, or 5 most recent stories.
University of Delaware AEM UDaily latest news component example
UDaily Latest News component example

The UDaily RSS Feed Tabs & Image component displays the latest UDaily articles in a list format, filtered according to set keyword and category tags.

University of Delaware AEM UDaily rss feed tabs & image component example
UDaily RSS Feed Tabs & Image component example

Sorry, no results found.