Block Hero

Block Hero is a prominent full width section serves as a welcoming entrance, the first impression that sets the tone for the entire online experience. It is designed to grab attention, communicate value proposition and intuitively direct visitors towards desired actions.

Overview

Usage

The qds-web-block-hero is the top section of a web page, first block on the page to catch visitors' attention and provide brief information about page, website, products etc. Usually includes background image or video, title, short description and call to action to encourage users to explore further.

The Block Hero and the Block Promo have a similar structure and must be used consistently across your application.

As a rule of thumb, Block Hero is used as the first block on page and should only be one in the whole page, whereas Block Promo are always placed below the Block Hero.

Use Block Hero when:

Brief information about company (slogan, brief description) on home screen
Title and description of the inner page.
Accordion with information about products/programs etc.
Brand introduction with image or video.
Product showcase.
Product showcase.
Service promotion.
Content promotion.
Social proof display.

Do not use Block Hero when:

Blocks that are placed below the first block on the page.

Properties

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

mainTitle
headingLevel
kicker
subtitle

Live Editor

<qds-web-block-hero
  heading-level="h1"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  kicker="Kicker"
  main-title="Title"
  subtitle="Subtitle"
></qds-web-block-hero>

mainTitle

The mainTitle property sets the text displayed in the title, this property is mandatory.

headingLevel

The block-hero, being the top section on the page, should always be an h1 and so it's set by default. For some exceptions, the heading level tag can be set from <h1> to <h4>,

The headingLevel property sets the tag to specify the title's heading level.

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

Live Editor

<qds-web-block-hero
  heading-level="h1"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  kicker="Kicker"
  main-title="Title"
  size="standard"
  subtitle="Subtitle"
></qds-web-block-hero>

kicker

The kicker property sets the text displayed above the title.

subtitle

The subtitle property sets the text displayed under the title.

description

The description property is optional and sets the text description displayed under the qds-title component.

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

Live Editor

<qds-web-block-hero
  description="Stay ahead with innovations for a sustainable world and explore how software and technologies make the digital, electric world a reality."
  description-list="Create cases to help from our experts;Manage cases and view case history;Personalized char experience"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  main-title="Title"
></qds-web-block-hero>

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 for the hero image, this property is mandatory.

importance

The Block Hero follow the transversal Importance principle through its importance property:

standard

The standard section is placed on the top of page. It usually contains slider and description. This is a static block, so videos or animation can't be used.

Component designed for 2 sizes: standard and large. The size depends on the content. User can switch between block pages using slider.

Live Editor

<qds-web-block-hero
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  importance="standard"
  kicker="Kicker"
  main-title="Title"
  subtitle="Subtitle"
></qds-web-block-hero>

Recommendation

Standard Size	Large Size
kicker: min 6 → max 75 (recommended - 25) title: min 6 → max 125 (recommended - 40) subtitle: min 6 → max 100 (recommended - 40) description: min 6 → max 125 (recommended - 160) CTA: 20 image: min 1920 х 540 pixels (recommended - 1920 x 612 pixels)	kicker: 25 (recommended - 25) title: min 6 → max 60 (recommended - 40) subtitle: min 6 → max 100 (recommended - 40) description: min 6 → max 125 (recommended - 160) CTA: 20 image: min 1920 х 800 pixels (recommended - 1920 x 800 pixels)
⚠ Use only approved images by Schneider Electric.

Standard Size

Large Size

kicker:

min 6 → max 75
(recommended - 25)

title:

min 6 → max 125
(recommended - 40)

subtitle:

min 6 → max 100
(recommended - 40)

description:

min 6 → max 125
(recommended - 160)

CTA:

image:

min 1920 х 540 pixels
(recommended - 1920 x 612 pixels)

kicker:

25
(recommended - 25)

title:

min 6 → max 60
(recommended - 40)

subtitle:

min 6 → max 100
(recommended - 40)

description:

min 6 → max 125
(recommended - 160)

CTA:

image:

min 1920 х 800 pixels
(recommended - 1920 x 800 pixels)

⚠ Use only approved images by Schneider Electric.

subdued

The subdued section is placed on the top of the page and it usually has a white background.

Optionally tags can be used. Background images, videos or sliders can't be used.

Component designed for 3 sizes: small, standard and large.

Live Editor

<qds-web-block-hero
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  importance="subdued"
  kicker="Kicker"
  main-title="Title"
  subtitle="Subtitle"
></qds-web-block-hero>

Recommendation

Small Size	Standard Size	Large Size
kicker: min 6 → max 60 (recommended - 25) title: min 6 → max 95 (recommended - 30) subtitle: min 6 → max 60 (recommended - 30) description: min 25 → max 200 (recommended - 160) CTA: - tag: - image: fixed width 550 pixels (recommended - 550 x 340 pixels)	kicker: min 6 → max 60 (recommended - 25) title: min 6 → max 125 (recommended - 40) subtitle: min 6 → max 60 (recommended - 30) description: min 25 → max 200 (recommended - 160) CTA: 20 tag: tbd image: occupies 1/2 of the block (recommended - 800 x 500 pixels)	kicker: min 6 → max 60 (recommended - 25) title: min 6 → max 60 (recommended - 25) subtitle: min 6 → max 60 (recommended - 30) description: min 25 → max 200 (recommended - 160) CTA: 15 tag: tbd image: occupies 1/2 of the block (recommended - 900 x 600 pixels)
⚠ Use only approved images by Schneider Electric.

Small Size

Standard Size

Large Size

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 95
(recommended - 30)

subtitle:

min 6 → max 60
(recommended - 30)

description:

min 25 → max 200
(recommended - 160)

CTA:

tag:

image:

fixed width 550 pixels
(recommended - 550 x 340 pixels)

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 125
(recommended - 40)

subtitle:

min 6 → max 60
(recommended - 30)

description:

min 25 → max 200
(recommended - 160)

CTA:

tag:

tbd

image:

occupies 1/2 of the block
(recommended - 800 x 500 pixels)

kicker:

min 6 → max 60
(recommended - 25)

title:

min 6 → max 60
(recommended - 25)

subtitle:

min 6 → max 60
(recommended - 30)

description:

min 25 → max 200
(recommended - 160)

CTA:

tag:

tbd

image:

occupies 1/2 of the block
(recommended - 900 x 600 pixels)

⚠ Use only approved images by Schneider Electric.

emphasized

The emphasized section is the most prominent one placed on the top of page. By default has full width background video that can be paused by clicking on "pause" button. Sliders can't be used.

Kicker, description and buttons are optional elements. They can be added based on where the component is applied and it's purpose. It's possible to display only two CTA buttons on a single slide, so the two first CTA buttons from the top of the list are the ones displayed.

Component designed for 2 sizes: standard and large. The size depends on the content. User can switch between block pages using slider.

Live Editor

<qds-web-block-hero
  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://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  importance="emphasized"
  kicker="Kicker"
  main-title="Title"
  subtitle="Subtitle"
></qds-web-block-hero>

Recommendation

Standard Size	Large Size
kicker: 25 title: max 60 (recommended - 40) subtitle: 40 description: recommended - 160 CTA: 20 image: min 1920 х 540 pixels (recommended - 1920 x 612 pixels)	kicker: 25 title: max 60 (recommended - 40) subtitle: 40 description: recommended - 160 CTA: 20 image: min 1920 х 800 pixels (recommended - 1920 x 800 pixels)
⚠ Use only approved images by Schneider Electric.

Standard Size

Large Size

kicker:

title:

max 60
(recommended - 40)

subtitle:

description:

recommended - 160

CTA:

image:

min 1920 х 540 pixels
(recommended - 1920 x 612 pixels)

kicker:

title:

max 60
(recommended - 40)

subtitle:

description:

recommended - 160

CTA:

image:

min 1920 х 800 pixels
(recommended - 1920 x 800 pixels)

⚠ Use only approved images by Schneider Electric.

size

The Block Hero 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-hero
  main-title="Small sized Block Hero"
  size="small"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
></qds-web-block-hero>

Standard

Live Editor

<qds-web-block-hero
  description="Stay ahead with innovations for a sustainable world and explore how software and technologies make the digital, electric world a reality."
  main-title="Standard sized Block Hero"
  size="standard"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
></qds-web-block-hero>

Large

Live Editor

<qds-web-block-hero
  description="Stay ahead with innovations for a sustainable world and explore how software and technologies make the digital, electric world a reality."
  main-title="Large sized Block Hero"
  size="large"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
></qds-web-block-hero>

videoSrc

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

Video version is available for emphasized importance. Block hero auto plays a video in the background by default, only native videos can be displayed in .webm, .mp4 or .avi.

Live Editor

<qds-web-block-hero
  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="emphasized"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  video-src="https://videos.pexels.com/video-files/855181/855181-hd_1920_1080_25fps.mp4"
></qds-web-block-hero>

Implementation tips

Slot

Optionally, the Block Hero can contain controls as a slot. Example of a Block Hero containing a button group with a link and a button, both are using a qds-button component with its variant hero, find more information here:

Live Editor

<qds-web-block-hero
  description="Stay ahead with innovations for a sustainable world and explore how software and technologies make the digital, electric world a reality."
  main-title="Title"
  size="standard"
  image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
>
  <qds-button
    size="large"
    text="Link"
    importance="emphasized"
    variant="hero"
    href="#"
  ></qds-button>
  <qds-button
    size="large"
    text="Button"
    importance="standard"
    variant="hero"
  ></qds-button>
</qds-web-block-hero>

Tags slot

The Block Promo component can contain tags as slot in subdued 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://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
>
  <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 { defineCustomElementQdsWebBlockHero } from 'https://cdn.jsdelivr.net/npm/@quartzds/websites@next+esm'
defineCustomElementQdsWebBlockHero()

To import this component using a bundler:

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

To import this component as an Angular component:

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

To import this component as a React component:

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

To import this component as a Vue component:

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

Platforms

The Block Hero component is designed 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

The block-hero will show a 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-src / imageSrc

string

This property is used to specify the source path or url for the hero image

undefined

importance

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

The block-hero's importance can be specified.

"subdued"

kicker

string | undefined

The block-hero's kicker text can be specified.

undefined

main-title / mainTitle

string

The block-hero will show a title heading.

undefined

size

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

The block-hero's size can be specified.

"standard"

subtitle

string

The block-hero subtitle can be specified.

undefined

title-tag / titleTag

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

The block-hero heading level for the title can be specified.

"h1"

video-src / videoSrc

string | undefined

Src of the video to display.

undefined

Overview​

Usage​

Block Hero vs. Block Promo​

Properties​

mainTitle​

headingLevel​

kicker​

subtitle​

description​

descriptionList​

imageSrc​

importance​

standard​

subdued​

emphasized​

size​

videoSrc​

Implementation tips​

Slot​

Tags slot​

Importing​

Platforms​

Anatomy​

Component reference​

Properties​

Overview

Usage

Block Hero vs. Block Promo

Properties

mainTitle

headingLevel

kicker

subtitle

description

descriptionList

imageSrc

importance

standard

subdued

emphasized

size

videoSrc

Implementation tips

Slot

Tags slot

Importing

Platforms

Anatomy

Component reference

Properties