Guidelines for AEM Components

Explore a library of components designed to create impactful marketing pages.

Sub-Navigation Components

Category Navigation Component

The Category Navigation Component provides access to lower-level categories that give more specific content within a section.

 

Browse by Topics:

Settings

Basic

  • Navigation Headline
    • Enter the label for the component headline.

Content

Navigation Configuration

We can configure the navigation menu here.

  • Link Text
    • It is visible on page as navigation menu name.
  • Link
    • We can add here the destination URL for the menu.
    • It can be external/internal/a particular section on a page.
  • Link Title
    • This will displayed when we hovering over the link/menu.
    • Best practice to add link title for accessibility and SEO.
  • This page is selected as current?
    • It has two option Yes/No in dropdown.
    • We have to select no for the other pages except the current one.
    • Once we make the current one as Yes then a blue bar is visible on the menu. That means it is a current page.

 

Yes or No Action

  • Top Gap?
    • Add space above the component.
  • No Gap?
    • Remove space below to the component.
  • Secondary Color Scheme (Pink)?
    • .It enables the pink color schemeto the menu text.
  • White Background?
    • The component has gray background by default.
    • If we check this option background color will be white of the navigation.

Example

Sub-Navigation Component

The Sub-Navigation Component allows for easy access to different pages of a specific section of the site. This specific component can be customized with either a logo or a headline to fit the overall design of a section and can even include dropdown menus for more options.

 

Settings

Logo

  • It is shown at the center of the sub navigation above to the navigation menu and will stick at the top of the page on scroll of the page.
  • Logo Image Dimension :- 60px high - *MUST* be SVG format.

Logo Text

  • It is optional.
  • If we add this logo text it will appear on a blue green gradient image which we can not change the gradient color.
  • It will stick at the top of the page on scroll of the page.
  • We can not use both logo and logo text in a single component if we do so it will visible only the logo text on page but the logo will be hide on the page.

Logo image alt text

  • If we are uploading a logo then the alt text is required.
  • It is accessed by SEO.

Note:-

We have to add Logo / Logo text compulsory to configure the Sub-Navigation component.

Content

Navigation Configuration

We can configure the navigation menu here.

  • Link Text
    • It is visible on page as navigation menu name.
  • Link
    • We can add here the destination URL for the menu.
    • It can be external/internal/a particular section on a page.
  • Link Title
    • This will displayed when we hovering over the link/menu.
    • Best practice to add link title for accessibility and SEO.
  • This page is selected as current?
    • It has two option Yes/No in dropdown.
    • We have to select no for the other pages except the current one.
    • Once we make the current one as Yes then a blue bar is visible on the menu. That means it is a current page.

 

Yes or No Action

  • White Background?
    • If we check this option background color will be white of the navigation.

Examples

Example 1 :- Logo Implemented

Example 2 :- Logo Text Implemented

Example 3 :- Logo Text Implemented in white background

Sticky Navigation Component

Designed for long PDPs, the Sticky Sub-Navigation Component includes up to four anchor links to specific parts of the PDP and the primary CTA.

 

Sticky Sub-Navigation Title

Settings

Basic

  • Navigation Bar Title
    • It is required field to set the sticky sub navigation.
    • It will visible on top left corner of the page.

Navigation Items

  • Nav Menu Item Display Name
    • It is the menu name which will be visible on navigation.
  • Nav Menu Item Link/Hash
    • We can add page URL as destination URL or we can use "#followed by the ID name of specific sections on page to navigate.

Call To Action

  • CTA Link
    • We can add destination URL for the CTA on the sticky subnavigation.
    • It is optional field.
  • CTA Link Text
    • This text will visible on page as CTA button text.
  • CTA Link Title
    • This text will visible when we are hovering over the CTA button.
    • Also it will accessible by SEO.
  • Open in new Tab
    • There are two option in the dropdown (Yes/No).
    • If we want to open the destination URL in new tab in browser then we must select yes from the dropdown.

Note:-

  • If we are using page URL as destination it will never sticky on the page while scrolling.
  • If there are multiple sticky sub navigation on a page then the CTA will visible only for the first component which was implemented at first at the top of other sticky sub navigation component.
  • When we add a Nav Menu Item as Hash to navigate inside a current page then it will automatically create paragraph system which acts as a container. We can put other components into it. 

Improve your in-house mailing processes when switching to hybrid mail

Transform your outgoing mail process by elevating into the digital age. Reduce cost, add greater flexibility and free up staff for more valuable tasks
Setupfewlicks transparent

Setup in just a few clicks

Scalable service to fit any organisations, the solution capture your print ready files through either the printer driver, web portal or hot folder.

Using templates to process mail, we work with you to standardise to ensure any one can simply print to post

Save up to 35% versus franking

Low cost subscription and less work hours, the business justification is straight forward​. Find out how much you could save
Potential annual savings
£0.00

Frequently Asked Questions (FAQs)

What exactly is a Hybrid Mail Service?

Hybrid Mail is an outsourced service designed to centralise print streams for businesses, optimising postal and stationery costs. It streamlines the process of printing and mailing documents, whether in bulk or individually, without necessitating any change to existing business processes.

Is there a minimum volume requirement for using Hybrid Mail?

No, once you are subscribed and document templates are created there are no minimum daily volume requirements. You can send a single letter or multiple letters for printing and posting as needed.

How secure is the hybrid mail service, and how does it comply with GDPR?

Security is a top priority with our hybrid mail service. We comply with GDPR and other data protection regulations by ensuring all documents are encrypted using AES-256 encryption, both in transit and at rest. Only authorised users can decrypt documents, with encryption keys uniquely generated for each document.

Can the system print and post documents in any format?

Our system can accept print-ready files in both Word and PDF formats and can process mail merges online, making it highly versatile and accommodating for various document types.

How does the hybrid mail service ensure the correct document reaches the right recipient?

The service utilises barcodes for page-level tracking, ensuring the right document is always placed in the right envelope. This accuracy is further supported by item-level reporting for audit purposes and a secure solution that includes item-level encryption.

What postal services can be used with this service?

You have the flexibility to use the postal service of your choice, whether it's 1st or 2nd class or a Downstream Access Delivery service. Royal Mail is used for the "Final Mile" delivery, guaranteeing that your documents reach their destination reliably.

How does the service support remote and hybrid working?

The service supports remote and hybrid working by allowing users to send documents for printing and posting or for digital delivery from any location. This flexibility is supported by our SaaS solution, which doesn't require any changes to your existing IT infrastructure.

PBU TOC Component

The PBU TOC (Table of Contents) Component provides a page overview and direct access to specific sections. Placed in the left rail, this component provides a seamless user experience for long-form pages, such as SEO pages.

 

Item 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Item 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Item 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Item 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Item 5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Item 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Item 7

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Settings

Configuration

  • Unique ID
    • This is auto-generated and populated after saving. Can be edited as needed.

Basic

  • TOC Navigation Label
    • Enter the label for the component Label.
  • TOC Heading Level
    • DIV
    • H2
    • H3
    • H4
    • H5
    • H6

TOC Content

  • TOC Heading Text
    • It is used for heading for this TOC.
  • TOC Short Text
    • We can put a short text/name for the TOC item.
    • No spaces, must start with letter, only dashes.

Yes or No Action

  • Top Gap?
    • Adds a gap to the top of the component separating it from the top of the page or a prior component.
  • No Gap?
    • Removes the bottom margin separating modules.

Note:-

  • TOC content acts as a container. We can put other components into it. Except other components we can use text and standalone image component for better layout in this module.