Breadcrumb block

 

Below is a Breadcrumb block section. Component allows editor to add Breadcrumbs title and to check option Has Breadcrumbs. By creating and adding this component it want automatically be displayed unless it is enabled on the page where it's used.

EXAMPLE 1 FULL WIDTH

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

Margins: none

In the example 1 fully populated container is created and breadcrumb is enabled on navigation page. Breadcrumb component works as expected on Desktop, Tablet and Mobile. Mobile version of the breadcrumb has horizontal scroll option for longer content.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

Component works as expected, there is no problem with rendering and displaying it. When content is wider then screen size, horizontal scrolling is created and some parts of content are displayed as three dots.

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;

When a layout is full width with a forced narrow margin, on a 1280px breakpoint there is no content, and nothing is displayed till 1320px when some parts of the content are displayed but still look very bad. Other breakpoints show content but it doesn't look very nice.

 

CTA BLOCK

Below is a CTA block section. Component allows editor to add CTA on couple of different ways. User can ether write link (not the best solution since it displays URL as the button name), insert link that allow user to add email link or anchor, insert media link allows user to add media when the CTA is clicked, insert anchor, email and JS. In component are presented CTA added different way, as written earlier.

EXAMPLE 1 FULL WIDTH

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

Margins: none

In the example 1 fully populated container is created with 4 different CTA. That is maximum CTA buttons that user can add. 768px has little problem when 4 CTA are added since it doesn't fit in one row. Other devices look good.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

Component works as expected, there is no problem with rendering and displaying it. All screen sizes look great.

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;

When a layout is full width with a forced narrow margin. As in many other component, larger screens look bad. Content is squeezed on 1920 and 1280px, on 768px it looks a bit better since just last button is in other row and CTA are displayed.

 

homepage promo BLOCK

Below is a Homepage promo block section. Component allows editor to add background images for different screen sizes, title, description and CTA button. There is minor problem with CTA name, since it isn't visible for some reason.

 

EXAMPLE 1 FULL WIDTH

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

Margins: none

For example 1 fully populated container is created. There is no problem with content rendering, except the color of the button is a global problem and not a problem for this specific screen width.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

The component works as expected, there is no problem with rendering and displaying it. All screen sizes look good.

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;

 

When a layout is a full width with a forced narrow margin, on 1280px and 1920px breakpoints content is squeezed and looks pretty bad. Other breakpoints show content and it looks nice.

 

navigation BLOCK

 

Below is a Navigation block section. Component allows editor to add Navigation Cards. Navigation card allows editor to add Information about card content, logo image, title and link.

EXAMPLE 1 FULL WIDTH

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

Margins: none

For example 1 fully populated container is created. Screen sizes 1920, 1280, and 768px have a problem with content alignment since it is aligned to the left edge, while a mobile device doesn't show navigation cards at all.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

The component works as expected, there is no problem with rendering and displaying it except on mobile devices whereas on full width there is no Navigation card content. The content rendered on the page is aligned to the left and maybe it would be better to be stretched.

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;

 

There is the same problem on mobile devices as with previous layout settings. Content is rendered badly on all devices since it puts the page out of the flow.

 

CTA button BLOCK

Below is a CTA button block section. Component allows editor to add CTA on couple of different ways. User can ether write link (not the best solution since it displays URL as the button name), insert link that allow user to add email link or anchor, insert media link allows user to add media when the CTA is clicked, insert anchor, email and JS. In component are presented CTA added different way, as written earlier. CTA Button has to be a child of other component that accept CTA as a parameter.

 

EXAMPLE 1 FULL WIDTH

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

Margins: none

In the example 1 fully populated container is created with 4 different CTA. All devices look good with full width layout settings.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

Component works as expected, there is no problem with rendering. 768px screen width has a problem if there is more than 3 CTA buttons, since it cuts half of the 4ths. 

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;

The Layout is full width with a forced narrow margin. Content on the 768px screen width isn't presented as it should be. There is no 4th button on the page. Same problem is presented on the all big screen sizes, component presents 3 CTA buttons.

 

NAVIGATION BLOCK tab

 

Below is a Navigation block tab section. Component allows editor to add Navigation Tab containing navigation cards. Navigation card allows editor to add Information about card content, logo image, title and link. When only one tab is defined, there is problem with cards, they are pulled up and squeezed, so there isn't useful content visible on them.

EXAMPLE 1 FULL WIDTH

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

Margins: none

 

There is problem with cards rendering on every screen size. Mobile screen doesn’t have navigation cards displayed.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

The component has the same problem as the full width layout, and one additional problem, on the 768px screen size, the title in the upper left corner has a break, it doesn't use the full width, as a card.

NAVIGATION BLOCK TAB (with multiple tabs)

 

Below is a Navigation block tab with multiple tabs section. Component allows editor to add Navigation Tabs containing Navigation cards. Navigation card allows editor to add Information about card content, logo image, title and link. Unlike navigation with one tab, this component doesn't have cards rendering issues, except on mobile screens where cards aren't rendered. Colour of the title should me adjusted based on background image saturation.

EXAMPLE 1 FULL WIDTH

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

Margins: none

Component has no problem accept mobile screen cards rendering as mentioned earlier.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

Cards rendering on mobile screens is only problem.

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;

The Layout is full width with a forced narrow margin. Content on the 768px screen width isn't presented as it should be. There is no 4th button on the page. Same problem is presented on the all big screen sizes, component presents 3 CTA buttons.

 

Next steps

 

Below is a Next steps section. Component allows editor to add steps cards containing Title, image, CTA, button fields. There aren't problems with rendering content and displaying it.

EXAMPLE 1 FULL WIDTH

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

Margins: none

Component has no problems with rendering fields.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

Next steps component looks good with normal setting width. No 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;

Content is rendered as expected. Looks good on all devices except big screens. Content is shifted for 640px on 1280px and 1920px width.

News grid business update

No ReactJS implementation.

 

EXAMPLE 1 FULL WIDTH

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

Margins: none

/

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

No ReactJS implementation.

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;

No ReactJS implementation.

 

Promo block

 

Below is a Promo block section. Component allows editor to add Title, image, CTA and description. User is able to choose different variants' of block, as shown on the page In case one we used variant grey background and aspect ration landscape.

EXAMPLE 1 FULL WIDTH

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

Margins: none

Component has no problems with rendering fields. Component is rendered as it should based on design.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

No problems were detected. The component is rendered with a small UX problem on the 1920px screen size. The font size is large so it is passing the image side of the block, and that shouldn't happen. Other screens look as they should.

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;

Content is rendered as expected. Looks good on small-screen devices. The Content for desktop screens is unusable.

PROMO BLOCK

 

Below is a Promo block section. This is a promo block populated with the same content but different background option choices, the background is blue, and the aspect ratio is landscape, without any animations added.

PROMO BLOCK - aspect ratio squares

 

Below is a Promo block section. The Component is populated as before, but a different aspect ratio is chosen, it's square, and animation that isn't working is added. I don't see any differences between ratio aspects.

Related articles

 

Not getting the FE part of component.

EXAMPLE 1 FULL WIDTH

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

Margins: none

/

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

/

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;

/

text Cta BLOCK

 

Below is a Text CTA block section. Component allows the editor to add Title, image, CTA, description, and announcement. The user is able to choose different variants' of block themes and alignment, as shown on the page. Scenarios with narrow margins are not repeated with different them and alignment since the content is not useful.

EXAMPLE 1 FULL WIDTH

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

Margins: none

Component has no problems with rendering fields. Component is rendered as it should based on design.

EXAMPLE 2 NORMAL WIDTH

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

Margins: none

Component has no problems with rendering fields. Component is rendered as it should based on design.

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;

Content isn't useful with this kind of setup for desktop screens, but it renders content as it should on smaller screen sizes.

TEXT CTA BLOCK - grey background

 

Below is a Text CTA block section with grey theme, there is no difference between grey and dark themes.

TEXT CTA BLOCK - light background

 

Below is a Text CTA block section with light them chosen. As displayed content isn’t fully visible for this scenario.

TEXT CTA BLOCK - text right

 

Below is a Text CTA block section with text aligned to the right of the container.