Skip to content

Anchor Navigation (Anchor Link Navigation V2 Component)

This component creates an automatic collection of anchor tags within the content, which are injected into the navigation by using the Page Divider V2 component.

Simple Hero Banner (Hero V2 Component)

This hero banner uses a background image pulled from TAB, with a text overlay and optional lead title and CTA button. It is set by the CSS class hero__fixed-height

Video Hero Banner (Hero V2 Component)

The video hero banner uses a background image pulled from TAB, with a play button overlay.. The video is uploaded to YouTube, and pulled into AEM by using the YouTube ID. It is set by the CSS class hero-video--positions

Carousel Gallery (Carousel V2 Component)

This a dual-layered component that produces a carousel with selected images, a teaser paragraph and link to a related article or page. The carousel is created using a related page which contains a selection of hero images.

NOTE THAT THIS COMPONENT IS NOT COMPATIBLE WITH THE RELATED PRODUCTS SLIDE-IN COMPONENT

Article Listings (Column Control and Page Listing Components)

This creates uses the Column Control component to display a consolidated selection of page listings, both of which use the Page Listing V2 component. Default set at 50/50, this feature has a single linked article in the left panel, and multiple listings in the right side. Images/thumbnails and teaser copy are pulled from the linked pages.

Note that due to a bug in UAT which applies a visibility:invisible class to this component, you will see a white space inside the component boxes. To fix this (as is the case in this boilerplate) you will need to include the following CSS in the page properties (layout & style):

div.c-column-control .col-md-6 .page-listing-v2 {visibility:visible;}

Note that this fix is not necessary in the Production (live) environment, but it is helpful to retain it in case the page is ported back to UAT).

Rich Text Introduction (Rich Text V2)

This is a standard rich text component, styled for the font to be slightly larger that the main content text. Text can be styled and customised using the WYSIWIG tools. It is set by the CSS class rich-text-introduction

LEAD TITLE / CATEGORY

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Sed tincidunt placerat purus, eu faucibus nunc imperdiet sed. Donec laoreet, mauris sit amet vulputate porttitor, metus augue aliquam augue, quis consectetur eros odio eget justo. Etiam sodales risus quis orci lacinia aliquet. Nam dignissim auctor ante, ac ornare eros egestas sed. Nulla ultricies rutrum velit quis cursus. Ut quis velit efficitur justo elementum bibendum. Aenean vitae arcu eu eros tempor imperdiet at pharetra tortor.

Rich Text Standard Copy (Rich Text V2)

This is a standard rich text componen. Text can be styled and customised using the WYSIWIG tools. No CSS classes applied.

Morbi eget nulla lacus. Maecenas ac lobortis quam

Mauris ultrices lorem nec sem convallis faucibus. Cras non maximus urna, id finibus massa. Sed a ligula ligula. Donec velit orci, consectetur eget sem in, consectetur efficitur tortor. Phasellus et neque venenatis turpis dignissim pharetra. Praesent ut ultricies risus. Aenean feugiat purus ac tellus blandit, sed mattis elit elementum.

Donec vel eros ut mauris dictum hendrerit elementum nec ligula. Vestibulum tincidunt massa arcu, non varius lorem suscipit ut. Proin non facilisis mi. Pellentesque luctus sapien nec nunc commodo luctus..

Standard Image (Adaptive Image V2)

This is a standard image, pulled from tab using the left panel method. There are no special styling features, although the CSS class c-adaptive-image__maxwidth-md can be used to set the image to same general width as the text blocks.

Hot cross bun and a cup of tea

Simple Hero Banner (Hero V2 Component)

This hero banner uses a background image pulled from TAB, with a text overlay and optional lead title and CTA button. It is set by the CSS class hero__fixed-height. The font colour is set inside the text blockusing inline styles (not recommended but a workaround for white/pale background imagery).

Discover more about Magnum White

DELICIOUS & PLAYFUL

Anchor Point (Page Divider V2 Component)

This feature applies an anchor point within the page. Any text entered in the single field will automatically appear in the related sub-navigation component (Anchor Link Navigation V2 Component).


Title with Divider (Rich Text V2 Component)

This is the standard Rich Text component, styled with a thin grey dividing line. It uses the CSS classes rich-text-introduction and divider.

ANCHOR POINT 1

Illustrated Page Link Pair (Page Listing V2 Component)

This component features two fixed link articles, selected from the entire page tree. The related image, title and headline snippet are all inherited from the linked page. The stepped display is not an error, but part of the intended design. This layout is created using the CSS class page-listing__twoarticles.

Category Link Button (Call to Action Component)

Optional button that can be used to link to any specific category page, product or article.


ANCHOR POINT 2

Illustrated Page Link Trio (Page Listing V2 Component)

This component features three fixed linked articles, selected from the entire page tree. The related image, title and headline snippet are all inherited from the linked page. This layout is created using the CSS class page-listing__threearticles.


ANCHOR POINT 3

Single Feature (Featured Content Component)

This component consists of one large illustration and manually-entered text snippet. This is ideal for external links in conjuction with a CTA link/button.

50/50 Images (Column Control and Adaptive Image V2 Components)

Simple layout using the Column Control layout set to 50/50, with two images without text for illustrative purposes. Can be linked.

Standard Video Player (Video Player V2 Component)

Simple, drag and drop video player.. Not massive settings required, all that is needed is the relevant ID from the selected YouTube video.

Image Name

ANCHOR POINT 4

You can also add some additional information text to accompany these section headings.

Adaptive Images inside Column Control I (Column Control and Adaptive Image V2 Components)

The Column Control component allows flexibility and ability to contain and arrange multiple sub-components. The section can contain up to four elements, all set to a specific percentage to differentiate the layout. This example below is set to 33/66. Note that the second image appearing slightly dropped is an intended design feature. Images are added through the left panel method (drag and drop). No additional CSS classes required.

Image Name
Image Name

ANCHOR POINT 5

Here's some more text, just to illustrate what can be added to this section. Like any other free text element, content can be styled using the WYSIWYG tools.

Adaptive Images inside Column Control II (Column Control and Adaptive Image V2 Components)

This example of the two-image display is set to 66/33. As with the first example, the slightly dropped larger image is an intended design feature. Left panel method to add images from TAB archive. No additional CSS classes required.

Image Name
Image Name

Image and text inside Column Control (Column Control with Adaptive Image V2 and Rich Text V2 Components)

Half and half image and accompanying text, using the Column Control feature. There are two Column Control components below, the first with the image set to the left and the other secind set to the right. As it is a rich text item, any copy can be styled using the WYSIWYG tools. Image added from TAB using left panel drag and drop. No additional CSS classes required.

Image Name

CRAS METUS IPSUM

In dapibus sodales metus vitae consequat. Nunc pulvinar est eu ante elementum, quis cursus velit fermentum. Sed porttitor eros vitae mattis malesuada. Nulla facilisi.

PROIN ID MOLLIS ARCU

Proin id mollis arcu, vel eleifend ante. Nullam eget lectus id dui consequat elementum. Curabitur sagittis, tortor vel consectetur tempor, magna elit auctor dolor, sed rutrum ex lorem et massa. Sed ut augue id justo vestibulum interdum vitae quis augue.

Image Name

ANCHOR POINT 6

Embedded Google Map (Code Snippet Component)

The Code Snippet Component allows you to drop in any third party API code into AEM. This is the Google map that was used for the Magnum Pleasure Store page in 2019. By default the map is a lot smaller, and the size is set by using the custom CSS class google-maps. As this class is specific to the page, you will need to add the CSS in the Properties section of your new page.

This feature can be used to embed any external code snippet, which will appear on the page as an iframe.

Illustrated Page Link Trio, Alternate Colour (Page Listing V2 Component)

This component features three fixed linked articles, selected from the entire page tree. The related image, title and headline snippet are all inherited from the linked page. This layout is created using the CSS classes page-listing__threearticles and theme-merino. The latter provides the "Merino" background colour.

Related Products (Related Products Component)

This component allows for the addition of related products for any given article or feature. All items are pulled in from the published products database as part of a fixed list. No additional CSS classes are required. The image thumbnail and product name will be pulled into the display automatically.

Page tagging (Tags Component)

This component allows for the addition of tags for each page or article, which triggers the search facility and the list of all other pages and resources sharing the same tag. Tags are selected by browsing through the set list and selecting them. No additional CSS classes required.

Social media icons (Social Sharing Component)

This adds the three icons for Facebook, Twitter and Instagram. The icons are be default left aligned, and can be dropped anywhere and (in needed) at multiple points on the page. They can also be added inside individual components. No additional CSS classes required for implementation.

Back to top link (Back to Top CTA Component)

This provides a horizontal strip with a "back to top" link, taking the visitor back up to the top of the page. Only reaslly necessary on long articles..