Announcement BLOCK

Below is an Announcement Block component. Component allows editor to add a large banner image with centre aligned Title and subtitle and announcement cards that user should define as subcomponent of the parent announcement block.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Announcement Block with all fields populated. First notable thing is that subtitle font is larger than title, but there is explanation, when doing SEO, it is important what content comes in which order, so the subtitle font is larger. Component looks good on all screen sizes.

EXAMPLE 2 - Normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Announcement Block with all fields populated. Component looks good on mobile and tablet devices. On 1280px screen width, padding between block start and first and last announcement block filed should be greater ( personal opinion ), 1920px screen width has really big margin so child components don't have enough room to "breathe". Solution could me smaller margin on parent component or to change grid to 2 announcement blocks inside normal widths row. 

EXAMPLE 3 - FUll WIDTH with narrow margin

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Announcement Block with all fields populated. Component looks good just on mobile. On 768px screen width, margin squeeze background image too much and announcement children content is out of it. 1280px has strange behaviour, it doesn't display background image and font is very small. 1920px has similar problem as 768 screen width has, background image isn't lager enough to cover children components.

features BLOCK

Below is a Features Block component. Component allows editor to add centre aligned Title with description, features heading and features items as a subcomponent. It is possible to add image gallery as subcomponent of features block as well.

Features items subcomponent requires icon (SVG), text and sub features component that has title and text fields.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Features Block with all fields populated. Feature block need to contain features items that are subcomponents of block. When title in features items has bigger amount of characters, there is a problem with displaying the content properly. In every other case, content looks good on all devices.

EXAMPLE 2 - Normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Features Block with all fields populated. Feature block need to contain features items that are subcomponents of block, it can also contain image gallery as subcomponent.There isn't big difference between full and normal width.

EXAMPLE 3 - full WIDTH with narrow margin

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Features Block with all fields populated. Content looks ok just on mobile devices, on all other components image gallery content is floated to the right too much, and text is squeezed.

FEATURE list BLOCK

Below is a Feature list component. Component allows editor to add upper title, main title and Feature cards as a subcomponent. Feature cards are populated with SVG icons and text related to that feature.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Feature list with all fields populated. Feature list need to contain feature cards that are subcomponents of block. Feature card are populated with SVG icons and text related to them. Only problem with displaying feature list is on the mobile devices, since they are not aligned when there is odd number of cards.

EXAMPLE 2 - normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Feature list with all fields populated. Feature list need to contain feature cards that are subcomponents of block. Feature card are populated with SVG icons and text related to them. Only problem with displaying feature list is on the mobile devices, since they are not aligned when there is odd number of cards, same as full width.

EXAMPLE 3 - full WIDTH with narrow margin

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

Doesn't show any problem with content rendering, just like in full width layer and normal with layer there is small problem with structure of content on mobile devices.

hotspot BLOCK

Below is a Hotspot Block component. Component allows editor to add image and subcomponent Hotspot point where user can add title, label, description, coordinate X and Y, image, video, left and centred CTA.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Hotspot Block with all fields populated. Hotspot block has two fields, image and hotspot points that are subcomponents of the block.

Problems if product page design and navigation buttons aren't checked!

- There is different behaviour of the component on different devices ( on desktop hotspot point is open on the right and on all other devices it's hidden, user could use more time to consider what to do ), bad practice.

- When Hotspot point is fully populated, there are just two elements that are displayed on the screen ( title and description ) beside coordinates that work perfectly. None of other populated fields aren't displayed (video, image, CTA buttons).

- Consider possibility to add open and close hotspot point on the same button, not just opening.

- On mobile devices, when hotspot point is opened, there is only grey background displayed, title and description available on bigger screens aren't there. There isn't possibility to close hotspot point on mobile device, user has to refresh the page.

EXAMPLE 2 - normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Hotspot Block with all fields populated. Hotspot block has two fields, image and hotspot points that are subcomponents of the block.

Everything works fine when Product page design and navigation buttons are checked as options.

EXAMPLE 3 - full WIDTH with narrow margin

Item added directly in the One Column Container with layout setting Normal Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Hotspot Block with all fields populated. On the desktop screens margin makes a problem. 1280px doesn't show content, 1920px shows content but it is too small to be useful. On Tablet and Mobile everything works fine. 

icon text BLOCK

Below is an Icon text block. Component allows editor to add feature cards that need to bi populated with SVG icon and text.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Icon text block with two feature cards added. Both cards have icon and text field populated. Content looks fine on every device.

EXAMPLE 2 - normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Icon text block with two feature cards added. Both cards have icon and text field populated. Content looks fine on every device.

EXAMPLE 3 - full WIDTH with narrow margin

Item added directly in the One Column Container with layout setting Normal Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Icon text block with two feature cards added. Both cards have icon and text field populated. Content looks fine on every device, although text is squeezed on Desktop pages.

information heading BLOCK

Below is an Information heading Block component. Component allows editor to add image, centre aligned Title with subtitle, place and date.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Information Heading Block with all fields populated. Information Heading block works on all devices and looks good, but when title is too long it takes edge to edge width ( maybe add some padding on title element ).

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is fully populated Information Heading block component. Component looks good on all devices.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

Doesn't show any problem with content rendering. There is problem on bigger screens, image is to small, text is squeezed and doesn’t look properly.

Jobs BLOCK

Below is a Jobs component. Component accepts only one field - Job Details URL, page with all details defined. Job Details need to be created outside Data folder as a BAUPage component.

Full details page is too long, think about possibility to create dropdown (display/hide) beside every country to make user Experience better.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

Jobs Block refer to /Grenadier/global/home/__DEMO/Pages/content-editor-sandbox/information/Job page with defined Breadcrumb and Card type Summer Card. 

Page renders two dropdown menus that are positioned on the top of the page over the content I created earlier, looks like content is out of flow. Problem is presented on all devices. Beside that, other content seems to be in line with expectations.

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

Identical problem as on full width. Full details page is too long, think about possibility to create dropdown (display/hide) beside every country to make user Experience better.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

Creates more problem with content rendering. On bigger devices content is squeezed and on mobile font is large and it's out of flow.

Location map BLOCK

Below is a Location map Block component. Component allows editor to add Description of the location, Location Source (SAP API), Location that needs to be crated as subcomponent of the Location map, default markers' icon, latitude, longitude of the location, Pin description and Marker icons that are created as a subcomponent of Location map. User have possibility to create 3 types of subcomponent, Location Map folder, Location, Location details. Location subcomponent accepts Latitude, Longitude, details, description. Location details accept marker icon (image) and marker key.

After opening description for location there isn't possibility to go back on previous state.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Location map with all fields populated. There are two location components with full width, one is Belgrade and Bucharest and the other one is London, UK.The reason I created two types of same component is because Pins for SE Europe aren't displayed, but everything else works perfectly fine.

Location map BLOCK

Below is a Location map Block component. Component allows editor to add Description of the location, Location Source (SAP API), Location that needs to be crated as subcomponent of the Location map, default markers' icon, latitude, longitude of the location, Pin description and Marker icons that are created as a subcomponent of Location map. User have possibility to create 3 types of subcomponent, Location Map folder, Location, Location details. Location subcomponent accepts Latitude, Longitude, details, description. Location details accept marker icon (image) and marker key.

After opening description for location there isn't possibility to go back on previous state.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Location map with all fields populated. There are two location components with full width, one is Belgrade and Bucharest and the other one is London, UK.The reason I created two types of same component is because Pins for SE Europe aren't displayed, but everything else works perfectly fine.

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Location map with all fields populated. Location map doesn't show any problem no mater of device screen.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Normal Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Locations map with all fields populated. Component looks good on mobile and tablet but its content is unusable on 1280px and higher breakpoints since it doesn't show anything on 1280px screens.

price tag BLOCK

Below is a Price Tag Block component. Component allows editor to add a large banner image with content aligned to the right. Component accepts title field, description and CTA buttons.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Price Tag Block with all fields populated. Content looks great on all devices, there are no problems with rendering.

EXAMPLE 2 - Normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Price Tag Block with all fields populated.There are no problem with rendering content on the page. Component looks great on all devices.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

Creates more problem with content rendering. On bigger devices content is squeezed and image isn't displayed. Mobile and Tablet devices look decent.

Quote BLOCK

Below is a Quote Block component. Component allows editor to add a large banner image with Quote and quote author. There is possibility for defining 3 size images for different devices.

On the page rendering there are options to chose: Variant of rendering - Text on image, text only, text with image, and Text theme on the image: Dark and Light.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Quote Block with all fields populated. Quote block is defined with different themes chosen, and the result is the same. Content is rendered on the page as expected. Container doesn't look good on 768px since image placed on left side is smaller that quote text and is placed in top left corner.

EXAMPLE 2 - normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Quote Block with all fields populated. Same problem with rendering page on Tablets as on full width pages.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Normal Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Quote Block with all fields populated. Content is rendered well just on mobile devices, all other have terrible UX.

EXAMPLE 4 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

Variant: Text only

This is the Quote Block with all fields populated. Quote block is created with Variant: Text only. It is rendered good on all devices and there is no problem.

EXAMPLE 5 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

Variant: Image with text

This is the Quote Block with all fields populated. Quote block is created with Variant: Image with text. It is rendered good on all devices and there is no problem.

EXAMPLE 2 - normal WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Rich text with all fields populated. Rich text component with normal layout settings defined. Component defined this way looks better than full width.

property list BLOCK

Below is a Property list component. Property list can't be defined as individual component. It has to be subcomponent of Info Block component. This component accepts Property Cards that has two parameters, unit and value.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Property list component with all fields populated ( 5 Property cards ). Property list has big empty space on bottom of component and components' can be stretched more on bigger screens, there is no need to make a break after 4th card since it fits to the screen. Similar problem is presented on smaller device screens, space between card subcomponent is little bigger and the break point could be changed.

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Property list with all fields populated.There is no difference between normal width and full width layout settings.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

Component with full width layout and narrow margin renders on page as expected. On bigger devices content is squeezed and shifted to the right, on 1280px breakpoint content isn'u useful and on 1920px cards are shifted to the right and Info Blocks text is centred.

Tint BLOCK

Below is a Tint Block component. Component allows editor to add a heading, description and script src. There is no difference between full layout, normal layout and margins added, the content is displayed the same way.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Tint Block with all fields populated. Content is rendered on every screen size nicely and there is no problem.

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Tint block with all fields populated.Content is rendered the same way as full layout is. There is no padding characteristic for Normal width layout. Beside that there are no specific problems detected.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Tint Block with all fields populated. Margins are added to the container but nothing has changed, it renders the content as full width layout.