Banner

The banner element is mainly used in the upper section of a page.

It should give the user information about the following section through a title, subheadline and image.

Recommendations#

  • Keep the text short and avoid line breaks.
  • If you select a banner with text, look at it’s contrast to the picture (i.e. choose gray for an image with a bright subject and vice versa).

Overall styling#

  • The title uses the text-style large bold.
  • The subhead comes in the text-style small.
  • The line-height is 120%.
  • However, it has no hover or focus state.
  • The background-color of a bar always has an opacity of 90%.
  • Its appearance and design is similar to the teaser component.

Variants#

  • Bars can have two different states: title and with-subhead.
  • They also are available in two colors: light and dark.

Title#

TypesAttributesPreview
lighttext-color: gray-darker
background-color: basic-white		title: light
darktext-color: basic-white
background-color: gray-darker		title: dark

With subhead#

TypesAttributesPreview
lighttext-color: gray-darker
background-color: basic-white		with-subhead: light
darktext-color: basic-white
background-color: gray-darker		with-subhead: dark

Spacing & measurements#

Spacing#

TypesAttributesPreview
Horizontal spacingpadding: 16px
text is horizontally centered		horizontal spacing
Vertical spacingmargin-bottom: 2pxhorizontal spacing

Measurements#

  • The width of the symbol always adapts to the viewport – up to a maximum of 1920px.
TypesAttributesPreview
HeightLG: 200px
MD: 184px
SM: 184px
XS: 184px		height: LG
height: MD
height: SM
height: XS
WidthLG: 1280px (max. 1920px)
MD: 960px
SM: 600px
XS: 320px		width: LG
width: MD
width: SM
width: XS

What can be modified?#

  • Override the text and bars.
  • Adjust the width.

Our workflow in Sketch#

  • Use the "Overrides"-function to change the bar of the banner.

Change log#

10.0.0 Fundamental & 10.0.0 Web - 2022-05-30#

Changed#

  • Sketch, Doc: "Banner" | Adjusted to new grid settings

8.1.0 Fundamental & 8.1.0 Web - 2021-07-22#

Changed#

  • Doc: "Banner" | Clean up the documentation for the right structure and sentence case

6.0.0 Fundamental & 6.0.0 Web - 2021-03-22#

Changed#

  • "Banner" | Changed symbols: with layer-style settings

4.4.1 Core & 4.4.1 Web - 2020-05-07#

Added#

  • "Banner" | Added description: line height to overall styling

4.2.0 Core & 4.2.0 Web - 2020-01-16#

Changed#

  • "Banner" | Changed symbols to new smart layout of Sketch