components

 

AEM components are used to hold, format, and render the content made available on the webpages. When authoring pages, the components allow the authors to edit and configure the content. Components are a simple design patterns, reusable solution to a design problem. Here we show you how our components  are used to hold, format, and render the content made available on our webpages.

Components by category

Interactive

AEM Form

BEV Calculator

Comparison Tool

Loan Calculator

Marketo Form

PopUp

TOE Novali calculator

Tables and Charts

Content

Accordion

Campaign Placeholder

DAM Video

iFrame

Image

Sticky Section

Text

Title

Video

Lightbox

Navigation

Anchor Menu

Tabs

inPage Navigation

Scania Teaser
Background Image

Carousel

Dynamic List

Hero Image

Multimedia Hero

Intro Banner

List

Teaser

CTA

Button

Link

Digital Expirience

Calendar CTA
Countdown Timer
Contact

Contact CTA

Dealer Listing

Map

 

General
Content Fragment

Layout Container

Dynamic Content
Content Fragment

Content Fragment List

Dynamic Content Fragment Viewer
Media

Gallery

Jobserch

Related jobs

Social

Social Share

Structure

Space

Site Settings

Promotion banner

Interactive Components

AEM Form

The Form Component enables the building of simple information submission forms and features.

 

By using the configure dialog the content editor can define the action triggered by form submission. 

Regional BEV

Regional BEV

Vehicle weight

Weather conditions

Driving conditions

Wheel configurations

Application

Lunch charging

The estimated range is dependent on multiple factors .... Estimated range (km)

The estimated range is dependent on multiple factors .... Estimated range (km)

0 100 200 300 400 500

BEV calculator

Interactive calculator for battery electric vehicle (BEV) where users can calculate their fuel savings. 

Loan calculator

The loan calculator app calculates leasing loans for Serbia.
Will hopefully be possible to use in the future for other market.

Popup

A pop-up is a content area that can contain CTA, Form Submition, links or  contact information.

 

Can be authoured to auto-activate after X seconds or when a visitor clicks on an icon on the bottom right corner of the page.

tables

Tables and Charts component

 

Visualizes data from Excel in different ways:

 

  • Table with Filters
  • Table

 

charts

Tables and Charts component

 

Visualizes data from Excel in different ways:

 

  • Line Chart
  • Doughnut Chart
  • Pie Chart
  • Bar Chart
  • Combo Chart / Bar-Line

 

Content Components

Accordion

Accordion allows for the creation of a collection of components, composed as panels, and arranged in an accordion on a page, similar to the Tabs Component, but allows for expanding and collapsing of the panels.

 

The accordion’s properties can be defined in the configure dialog. The order of the panels of the accordion can be defined in the configure dialog as well as the select panel popover.

Defaults for the Accordion Component when adding it to a page can be defined in the design dialog.

 

Mainly used for product specification, details, FAQ's

DAM Video

The Video component is used to display videos on the websites that are hosted in our system. Max file size: 20 MB.

Notice: .srt files are not supported in the DAM video. 

 

There is an option to add the headlines to the DAM video and animate them with interval 3-6 seconds.

 

 

Poster for mobile video is required.

Loop option is available.

 

Image

The image component can be used to add images to website pages. Images can be configured to be clickable by adding links in the configuration.

 

Furthermore, combined with a layout container, this component can be set up in different grid patterns and such. Very versatile.

Text 1

Text 2

Text 3

Sticky Section

Sticky Component allows to have a static image or video on one side, and add a scrollable text to other side 

Text color: BLUE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text color: GREY

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text color: WHITE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus sapien congue egestas vehicula.

Text color: red (attention!)

Text color: orange

Text style: extra large

Text style: large

Text style: medium

Text style: small

Text style: extra small

Text

This text component is used for adding text.

  1. Text colour can be picked, for example blue or white , depending on the background picked on the layout container.
  2. Blue should be used in most cases.
  3. Red should be used sparingly.
  4. Use of uppercase and default font size can be picked as well.
  5. There are options to truncate text for lines from  1-5

Scania Headline Bold

The title component with font "Scania Headline Bold" has 6 levels of title, from h1 to h6: 

H1, font-size 8rem

H2, font-size 5.6rem

H3, font-size 4rem

H4, font-size 2.8rem

H5, font-size 1.6rem
H6, font-size 0.67em

Scania Sans Bold

The title component with font "Scania Sans Bold" has 6 levels of title, from h1 to h6: 

H1, font-size 8rem

H2, font-size 5.6rem

H3, font-size 4rem

H4, font-size 2.8rem

H5, font-size 1.6rem
H6, font-size 1,4rem

Scania Sans Regular

The title component with font "Scania Sans Regular" has 6 levels of title, from h1 to h6 

H1, font-size 8rem

H2, font-size 5.6rem

H3, font-size 4rem

H4, font-size 2.8rem

H5, font-size 1.6rem
H6, font-size 1,4rem

Title

The title component has 6 levels of title, from h1 to h6, which is set in the dialogue box of the component.

 

The title component can be colored white, blue, grey or red. It also has a separator which can be set to top or bottom. 

 

Video

(Custom Component)

The Video component is used to display videos on the websites.

 

From the component dialog you choose YouTube Player for rest of the world and Youku Player for China region. Author the video urls for both desktop and mobile. You can have an optional poster image as well. If you select the Autoplay option the video will start playing when the video is in the view.

 

Lightbox

(Custom Component)

 

The Lightbox component is used to display text on demand. 

 

From the component dialog you choose Lightbox and add Header Title, Text, CTA & CTA url.

 

Use Styling (icon brush) to choose between different colours (blue, white or transparent).

Anchor menu

Anchor menu can be authored to fetch menu from the ID or H1 tags. 

Shown on the right side of the page

 

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups

 

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

 

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Non diam phasellus vestibulum lorem. Amet commodo nulla facilisi nullam vehicula ipsum a. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Viverra vitae congue eu consequat. Enim tortor at auctor urna nunc id. Amet mauris commodo quis imperdiet massa tincidunt nunc. Duis at consectetur lorem donec massa sapien. Vitae nunc sed velit dignissim sodales ut eu sem integer. Luctus venenatis lectus magna fringilla urna porttitor. Neque vitae tempus quam pellentesque nec nam.

 

Morbi tincidunt augue interdum velit euismod. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Tortor vitae purus faucibus ornare. Ultrices sagittis orci a scelerisque purus semper eget. Proin fermentum leo vel orci porta non pulvinar neque laoreet. Venenatis urna cursus eget nunc.

tabs

Example to the left is based on tabs with text elements.

Also possible to use layout containers - more flexibility. 

inPage Navigation

inPage navigation fetches all child pages from the parent page.

 

2 styles available:

  • black text underlined with red colour
  • Scania Blue background with white text

should be placed in the full bleed layout container if there are many child pages under the parent page since the width is not adjustable. 

Scania Teaser components

carousel

Carousel allows a user to cycle through content panels. Slides of varying component type can be created.

Components allowed inside carousel are

  1. Hero Image
  2. Teasers
  3. Image
  4. Video

Title

Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface

Hero Image

The image component can be used to add a background image with a inbuild layut conatiner inside. We can add text, ttile, link, button components in this inbuild  layout conatiner making it possible to appear on top of the image. Furthermore, combined with a layout container, this component can be set up in different grid patterns and such. Very versatile.

 

Recommended ratio:

 

desktop: 

group site: 16x9, 16x7

markets: 16x7, 16x5

 

mobile:

1x1

 

 

Title H1

copy text

Alternative text

Multimedia hero

There are 3 different colours available in the hero background and all of them are moving (fade).

 

  • Scania blue
  • Scania grey
  • Scania super (should be used only for Scania Super page)

 

Component can be used with Image (.png, .jpg, .GIF) and video (MP4).

 

Same as for Hero Image, you can add a layout container with Title and Text on top of the image

 

Multihero can also be used in other places than the top of the page. 

 

 

Intro banner

Can use images or videos

List

List can be used to display a list of pages. They can be defined either dynamically - by search query, tags or from a parent page - or as a static list of items.

 

The list component is used to create lists of links.

They can be generated depending on: 

  • child pages to a parent page
  • fixed list (where you specify each link)
  • a search query
  • tags

 

The list's appearance can be adjusted and you can for example present it as blocks or in a grid, with or without images, date or description. 

 

  • Headlines fetch from the "Title for List Component" 
  • Descriptions fetch from the "Short Description - Max 160 characters (For List Component)"
  • Images fetch from the page thumbnail

 

 

Description and date visible when mouse over and disappear when mouse moved away. 

teaser

Teaser allows the grouping of an image, title and description for promoting and linking to site content sections. One or more actions can also be defined. Teasers can be linked to internal relative AEM resources or external absolute URLs.

CTA components

Button

This BUTTON component is used for adding internal or extenrnal reference paths with buttons. Buttons are categorized by Scania Brand Colors and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.

 

In the BUTTON dialog if you choose the checkbox Redirect to Geo IP Market site the CTA will redirect to the market site based on user's Geolocation.

 

Link

This Link component is used for adding internal or external reference paths.

Contact components

Contact CTA

This component can be used for dealers' search

Call us
Sales
Workshop
Website
OPENING HOURS
ACCEPTED CREDIT CARDS

Map

Map is used to show all available dealers in the area or country

General

Layout Container

This component provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can be used as the default parsys for your page and/or made available to authors in the component browser. 

Dynamic Content

Content Fragment List

Content Fragment List allows the display of a list of content fragments on a page. Useful for authoring headless content that can be easily consumed by applications.

Content fragment list component that displays content fragments based on a CISION model which allows the output of structured data. A Parent Path is used as a root for looking up the content fragments to display.

Media Components

Gallery

This component can be used for easy image downloading.

Jobsearch Components

Related jobs

This component can be usedto show all related jobs, can be added to a job description page

Social Components

Social share

this component allows to share the content on social media

Structure Components

Space

(Custom Component)

This component is used to add Vertical space in-between components.


You can choose spacing options between 5px - 120px.

Site Settings

promotion banner

Promotion banner can be used to promote a campaign or launch. When activated, will be visible above the main menu on all pages for that specific market.

The component has the following fields:

- Title

- Text

- CTA

- Image, recommended size: 1920x120px

 

 


 

How to:

Admin --> Sitesettings, navigate to Promotion Banner

To activate: check box "enable" and republish the Sitesettings page