Headline

Section headings can be styled in different ways and can combined with other components. This page shows the different style possibilities and further down different ideas how to combine them with other components.

ATTENTION A major exception will be made to the rule, that styles are not applied to HTML tags, see BEM. The HTML Section Heading elements <h1>-<h6> are used directly as selector.

In the following we first explain which classes and modifiers exist.

NOTE hX and hY means h1, h2, h3, h4, h5 or h6

• Basic Classes simple headline texts:
  • .headline The block class describes the component. This class has hardly any styles on its own, especially no font adjustments.
  • hX.headline If you combine the block class with a heading element hX, the styles of the headline hX are applied directly.
    • Example: <h1 class="headline">Test</h1>
  • .headline.headline--hX If you add this modifier, the text will have the style of the hX.
    • Example: <div class="headline headline--h1">Test</div>
  • hX.headline.headline--hY If the block is a hX heading element, you can switch the style to another hY heading element with this modifier.
    • Example: <h1 class="headline headline--h3">Test</h1> the <h1> heading element will have the style of a <h3>.
• Inner Elements A block element with more inner elements.
  • .headline > hX You can add a heading element directly in block. The text will get the appropriate hX style.
    • Example: <div class="headline"><h1>Test</h1></div>
  • .headline > .headline__hX Instead of using heading elements, you can use an element class.
    • Example: <div class="headline"><div class="headline__h1">Test</div></div>
  • .headline > hX.headline__hY Override the style of inner heading elements with the element class.
    • Example: <div class="headline"><h1 class="headline__h3">Test</h1></div>
• Link Effects Normal the headline text have no link like design.
  • .headline.headline--link With this modifier the text has a clickable hover design.
    • Example: <h2 class="headline"><a href="#">Test</a></h2> simple h2 design, no link like designs
    • Example: <h2 class="headline headline--link"><a href="#">Test</a></h2> headline with hover effects
• Side Content Add additional content next to the headline.
  • .headline > .headline__side Add the content right lined.
    • Example: <div class="headline"><span class="headline__h1">Test</span><span class="headline__side">Lorem</span></div>
  • .headline > .headline__side.headline__side--start Change the horizontal position of the side.
  • .headline > .headline__side.headline__side--{start, end}-{lg, md, sm, xs} Change the horizontal position of the side until screens.
  • .headline > .headline__side.headline__side--{top, center, bottom} Change the vertical position of the side.
  • .headline > .headline__side.headline__side--{top, center, baseline, bottom}-{lg, md, sm, xs} Change the vertical position of the side until screens.
  • .headline.headline--side-wrap Normal the side contents will always shown in the same row. This modifier will active the wrapping, if needed.
• Underline
  • .headline.headline--underline Adds a line below the headline.
• Segment
  • .headline.headline--segment Change the headline design to a card optic.
• Center
  • .headline.headline--center Change the position of the headline to a centered position.

The following examples show, how the headline can be used in its simplest way.

Inner

These examples show, how the headline will have inner heading elements or texts. It is used especially for Link Headlines and Side Content.

Link Headlines

This example shows how to change a headline with a link-like design.

Side Content

In these examples, in addition to the actual headings, further elements are also displayed, which are to the right of the heading. The elements can be left- and right-aligned. In addition, the vertical positioning of the elements can be adjusted.

Long text behavior

This interactive example shows how the additional content behaves with the different modifiers when the headline texts become very long.

Underline

A heading with an underscore.

Segment

A heading with card optic.

Center

A centered heading, do not works with side content.

Examples

Here are a few examples of how the above classes can be combined.