Headers

These headers are available in the design system:

  • .image - auto height, with background image, gets expanded by content
  • .banner - with background image
  • .with-box - contains a white box with more text content, auto height, gets expanded by content

Every header can contain a wrapper div that determines how the content within the header is displayed.

A note on images: We don't provide a default image because images should always be relevant to the content.

Default header

This header is the default header and generally needs no class. It can contain a sub line for further explanation what this page is about.

Please do not use the name of the whole web presence as h1 but use a meaningful and short title for content on page shown.

In congue definiebas

Default header with subline

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis

Image header

Using .image as class, this heading must have a background image specified in the style attribute.

Wrappers

There are several different inner wrappers to position the content within this header type:

  • .mid-align - recommended as standard wrapper within this header. Positions content vertically centered
  • .bottom-align
  • .bottom-align-flat

Image header mid-align

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis

Image header bottom-aligned

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis

Image header bottom-aligned (flat)

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis

Header overlays

Sometimes images aren't well suited for having text displayed on top of them. To solve this we created some overlay classes that you can use to improve the contrast.

Default header overlay

Use the class blurred to apply an overlay.

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis

Alternate header overlay

Use the class .blurred-50 to apply an overlay.

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis

Image header with filters

In congue definiebas

Filter by type

Banners

Banners take up the most important space on a website. So this is the place to promote the most important thing on your website. Be careful what background pictures you choose as the text on top must be readable.

Simple header banner

Other headers

The following headers are for special purposes only.

Please note! The .with-box style shown below cannot be combined with a fixed-height header, such as .banner , as the box height matches its container (fluid layout).

Header with box

In congue definiebas

In congue definiebas quo. Vivendo officiis vix an, eos at fabulas constituam dissentiunt. Id sit iuvaret habemus splendide, mei ea dicta quaestio. No malis eruditi maiorum vim, cu duo atqui dolorum imperdiet.

Pro id alienum epicurei, nam ne legimus vivendum lobortis. Docendi dissentiunt duo ad, eu vix nonumy legere. Ut vis iusto quidam virtute, harum convenire at his, option tacimates ea est. Ius et nisl nemore praesent. Sit ut meis porro velit, his cu malorum voluptatum sadipscing, tation atomorum dissentiet ne mea.

Course header short

Idque Caesaris facere voluntate

Cum ceteris in veneratione tui montes, nascetur mus.

Course header banner