Header-Box Overview

What does the component do?

  • Display important information or features.

When should the component be used?

  • For important information or functions, which should always be available.

Rules

  • The header box is located above the header and the content.
  • Scroll below the header box.
  • The header box can change depending on the scrolling and, for example, shrink.
Variants

Variants

The component has the following variants:

  • Subtext: Optional
  • Icon: Optional
  • Button: Optional
  • Loading: Optional
  • Flap: Optional
  • Animated: Optional

Header-Box

Visual design of a Header-Box
Visual design of a Header-Box

Specification

Design