Heading components — Examples

This page contains examples which are also used for automated testing. If some examples look a bit clunky, they are basically representing all kinds of test cases and edge cases. There should be many if not all possible ways to use this component on this page.

1. Click the link at the end of the headline
2. See the URL change, a #something is added to the end
3. You can copy+paste that link and it leads straight to this headline

See a couple of examples below, with different configurations and settings and contents.

An H2 Headline with attributes: `id` and `is=more-h2`

Expectation: The link should be visible after the heading text.
The code: <h2 is="more-h2" id="h2-1">...

An H2 Headline with attributes: `id`, `is=more-h2` and `show-link-on-mouseover`

Expectation: On mouseover the link appears behind H2 text.
The code: <h2 is="more-h2" id="h2-1-hover" show-link-on-mouseover>...

Headline with Multiple Tags Inside

Expectation: The headline itself should be linked to #, the "#" behind it should provide a link with the id as hash at the end.
The code: <h2 is="more-h2" id="h2-3"><a href="#"><span>...

Expectation: The headline itself should be linked to #, the link-symbol behind it should provide a link ending in #wrapped-headline.
The code: <a href="#"><h2 is="more-h2" id="wrapped-headline">...

H3 with Missing `id` Attribute

Expectation: No link shows up.
Reason: The "id" attribute is required.
The code: <h2 is="more-h3">...

H4 Headline with Margin on the left of the Heading.

Expectation: Render the headline with the link-symbol indented on the left.
The code: <h4 style="margin: 2rem;" is="more-h4" id="h4-headline">...