Block Promo

The Block Promo of a website serves as a dynamic space dedicated to highlighting special offers, promotions, or key marketing messages. It is placed below the hero block.

Overview

Common usage

The qds-web-block-promo is used on the page to catch visitors' attention and provide brief information about products, events etc. Usually includes title, short description and call to action to encourage users to explore further. Some of the use cases are:

Promote video about event, product, service or technology
Promote information about event, product, service or technology
Heading of the article
Promote special offers

This component can't be used instead of Hero Promo.

Best practices

Don't overwhelm block with too many text, use concise titles
Make sure that the contrast level between text and background is high enough
Provide an option to allow users to stop and resume video

The Block Promo and the Block Hero have similar purposes and do look very alike but must be used consistently across your product.

Block Promo is always placed below the Block Hero while Block Hero is used as the first block on page.

Properties

The qds-web-block-promo contains a qds-title component, here its documentation. The following title properties can be set:

mainTitle
headingLevel
subtitle
kicker

Live Editor

<qds-web-block-promo
  heading-level="h3"
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
></qds-web-block-promo>

mainTitle

The mainTitle property is the only mandatory one and sets the title text to display on the qds-title component:

headingLevel

The headingLevel property sets the tag to specify the title's level on the qds-title. If the headingLevel isn't specified, it will be h2 by default, but depending on the content where this component will be used the level could be changed.

As recommended by the web standards, the <h1>-<h6> tags should be used to describe the semantic structure of the document, not to set visual styles of the headings.

The qds-title component enables this good practice by decoupling the visual hierarchy, defined by its layer and importance properties, from the semantic structure, defined by its tag property

— Definition from the qds-title docs

In the following example, the qds-block-promo section's using an h3 level:

kicker

The kicker property sets the text to display on the qds-title:

subtitle

The subtitle property sets the subtitle text to display on the qds-title:

description

The description property sets the text to display on the description under the qds-title.

If bold text is needed, use ** befor and after the text to wrap it.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  description="Having helped **thousands of customers** do more with less, we are proving the power of digitisation in energy management and industrial automation."
  description-list="Real-time product and availability;Simplified quotes interface;Order history and shipping details"
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
></qds-web-block-promo>

descriptionList

The descriptionList property is optional and sets the text description to be displayed in an unordered list.

As HTML attributes can only be strings, the descriptionList array must be also a string.

Consumers can choose whether to use ; to separate different values of the object list of strings or JSON stringify the string[] by using JSON.stringify().

In the example below, we are using the first approach.

If bold text is needed, use ** befor and after the text to wrap it.

imageSrc

The imageSrc property specifies the source path or url of the promo image to display.

imagePosition

The imagePosition property specifies the position of the promo image to display when in small size.

The default value is end, but can be also set to start.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  image-position="start"
></qds-web-block-promo>

importance

The Block Promo follow the transversal Importance principle through its importance property.

standard

The standard importance is the default one. Usually includes title, description and CTA. Video and slider can be used. Usually has white background placed over grey background to be more prominent on page.

Component can be customised based on where it's used and it's purpose. Can be used for articles on subsection level. In this case, CTAs are not required and tags can be added.

It has been designed for 3 sizes: small, standard and large.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  importance="standard"
></qds-web-block-promo>

Recommendation

CHARACTERS

Small Size

Standard Size

Large Size

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 70
(recommended - 30)

subtitle:

min 6 → max 60
(recommended - 30)

description:

min 25 → max 200
(recommended - 140)

CTA:

bullet point list:

bullet points

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 125
(recommended - 30)

subtitle:

min 6 → max 60
(recommended - 30)

description:

min 25 → max 200
(recommended - 140)

CTA:

bullet point list:

bullet points

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 100
(recommended - 30)

subtitle:

min 6 → max 60
(recommended - 30)

description:

min 65 → max 260
(recommended - 140)

CTA:

bullet point list:

no bullet points

IMAGES (Recommended minimum image size)
Small Size	Standard Size	Large Size
700 x 300 pixels	700 x 400 pixels	800 x 500 pixels
⚠ Use only approved images by Schneider Electric.

subdued

The subdued importance is a simple block without background image, video or slider. Usually placed at the bottom of the screen. In this importance images, videos or sliders can't be used.

When used as Block Promo:

Title and description are centre aligned. Has white background with paddings placed over grey background.
When used as Heading for an article:

CTAs can be omitted. Title and description are placed on grey background without paddings.

It has been designed for 3 sizes: small, standard and large.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitalisation in energy management and industrial automation."
  importance="subdued"
></qds-web-block-promo>

Recommendation

CHARACTERS
kicker: min 6 → max 60 (recommended - 25) title: min 6 → max 65 (recommended - 40) subtitle: min 6 → max 60 (recommended - 20) description: min 65 → max 200 (recommended - 200) CTA: 20	kicker: min 6 → max 60 (recommended - 25) title: min 6 → max 125 (recommended - 40) subtitle: min 6 → max 60 (recommended - 20) description: min 65 → max 200 (recommended - 200) CTA: 20	kicker: min 6 → max 60 (recommended - 25) title: min 6 → max 65 (recommended - 40) subtitle: min 6 → max 60 (recommended - 25) description: min 65 → max 200 (recommended - 200) CTA: 20

CHARACTERS

Small Size

Standard Size

Large Size

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 65
(recommended - 40)

subtitle:

min 6 → max 60
(recommended - 20)

description:

min 65 → max 200
(recommended - 200)

CTA:

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 125
(recommended - 40)

subtitle:

min 6 → max 60
(recommended - 20)

description:

min 65 → max 200
(recommended - 200)

CTA:

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 65
(recommended - 40)

subtitle:

min 6 → max 60
(recommended - 25)

description:

min 65 → max 200
(recommended - 200)

CTA:

emphasized

The emphasized importance is a prominent section on page that includes information about events, products etc. Title, description and CTAs are required. This importance Usually used on section level. In this importance videos or sliders can't be used.

Component can be customised based on where it's used and it's purpose.

It has been designed for 3 sizes: small, standard and large.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitalisation in energy management and industrial automation."
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  importance="emphasized"
></qds-web-block-promo>

Recommendation

CHARACTERS
kicker: - title: - subtitle: - description: - CTA: -	kicker: max 25 title: max 40 subtitle: max 40 description: max 160 CTA: 20	kicker: max 25 title: max 40 subtitle: max 40 description: max 160 CTA: 20

CHARACTERS

Standard Center Aligned Size

Standard Ledft / Right Aligned Size

Large Size

kicker:

title:

subtitle:

description:

CTA:

kicker:

max 25

title:

max 40

subtitle:

max 40

description:

max 160

CTA:

kicker:

max 25

title:

max 40

subtitle:

max 40

description:

max 160

CTA:

size

The Block Promo follows the transversal control size-principle. Use the standard size unless you're in one of the specific contexts described on that page.

small

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  size="small"
></qds-web-block-promo>

standard

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  size="standard"
></qds-web-block-promo>

large

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  size="large"
></qds-web-block-promo>

videoSrc

The videoSrc property specifies the source path or url of the promo video to display.

Video version is available for standard importance. Block promo supports:

Native .webm, .mp4 or .avi format.
External URL from YouTube and Youku platforms.

Native video

Manual play, it starts when the user clicks on the play button.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  importance="standard"
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  video-src="https://videos.pexels.com/video-files/855181/855181-hd_1920_1080_25fps.mp4"
></qds-web-block-promo>

YouTube and Youku video URL

The video is displayed in an iFrame inside a modal when clicking the play button.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  importance="standard"
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  video-src="https://www.youtube.com/watch?v=Y44hHETtHQs"
></qds-web-block-promo>

Implementation tips

Slot

The Block Promo component can contain controls as slot.

We ask you to consider the following if you are going to use it:

When rendering a qds-web-block-promo component with size="large" the qds-button has to be variant="hero"
When rendering a group of controls the firts qds-button has to be importance="emphasized" and the second one importance="standard"

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less, we are proving the power of digitisation in energy management and industrial automation."
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  size="large"
>
  <qds-button
    size="large"
    text="Link"
    importance="emphasized"
    href="#"
  ></qds-button>
  <qds-button size="large" text="Button" importance="standard"></qds-button>
</qds-web-block-promo>

Tag slot

The Block Promo component can contain tags as slot in standard importance. The slot attribute needs to be specified with a "tags" value, the maximum amount recommended is two.

Live Editor

<qds-web-block-promo
  main-title="Title"
  subtitle="Subtitle"
  kicker="Kicker"
  description="Having helped thousands of customers do more with less."
  description-list="Real-time product and availability;Simplified quotes interface;Order history and shipping details"
  image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
>
  <qds-tag slot="tags" text="Content"></qds-tag>
  <qds-tag slot="tags" text="Content"></qds-tag>
</qds-web-block-promo>

Importing

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import
Bundler
Angular
React
Vue

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsWebBlockPromo } from 'https://cdn.jsdelivr.net/npm/@quartzds/websites@next+esm'
defineCustomElementQdsWebBlockPromo()

To import this component using a bundler:

import { defineCustomElementQdsWebBlockPromo } from '@quartzds/websites'
defineCustomElementQdsWebBlockPromo()

To import this component as an Angular component:

import { QdsWebBlockPromo } from '@quartzds/websites-angular'

To import this component as a React component:

import { QdsWebBlockPromo } from '@quartzds/websites-react'

To import this component as a Vue component:

import { QdsWebBlockPromo } from '@quartzds/websites-vue'

Platforms

The Block Promo component is designed for two platforms mobile / desktop, and four screen sizes tablet being included in mobile and large desktop in desktop:

Large desktop: 1280px+
Desktop: 1024-1279px
Tablet: 768-1023px
Mobile: 375-767px

Anatomy

Component reference

Properties

Attribute / Property

Type

Description

Default

description

string | undefined

Text to display for the description.

undefined

description-list / descriptionList

string | string[] | undefined

Text to display in an unordered list. As HTML attributes can only be strings, the values array must be stringified by the consumer into a string to be internally parsed into a string[].

undefined

image-position / imagePosition

"end" | "start" | undefined

Position to display the image.

"end"

image-src / imageSrc

string | undefined

Src of the image to display.

undefined

importance

"emphasized" | "standard" | "subdued" | undefined

The block's promo importance.

"standard"

kicker

string | undefined

Text to display for the kicker.

undefined

main-title / mainTitle

string

Text to display for the title.

undefined

size

"large" | "small" | "standard" | undefined

The block's promo size.

"standard"

subtitle

string | undefined

Text to display for the subtitle.

undefined

title-tag / titleTag

"h2" | "h3" | "h4" | undefined

HTML tag to use to render the title.

"h2"

video-src / videoSrc

string | undefined

Src of the video to display.

undefined

Overview​

Common usage​

When to use Block Promo?​

When not to use Block Promo?​

Best practices​

Block Promo vs. Block Hero​

Properties​

mainTitle​

headingLevel​

kicker​

subtitle​

description​

descriptionList​

imageSrc​

imagePosition​

importance​

standard​

subdued​

emphasized​

size​

videoSrc​

Native video​

YouTube and Youku video URL​

Implementation tips​

Slot​

Tag slot​

Importing​

Platforms​

Anatomy​

Component reference​

Properties​

Overview

Common usage

When to use Block Promo?

When not to use Block Promo?

Best practices

Block Promo vs. Block Hero

Properties

mainTitle

headingLevel

kicker

subtitle

description

descriptionList

imageSrc

imagePosition

importance

standard

subdued

emphasized

size

videoSrc

Native video

YouTube and Youku video URL

Implementation tips

Slot

Tag slot

Importing

Platforms

Anatomy

Component reference

Properties