Random Helper Classes

Set Highest z-index

.h-always-on-top

Disable Pointer-Events

Use .h-pointer-events-auto to revert to the default browser behavior for pointer events (like :hover and click).

Use .h-pointer-events-none (deprecated: .button-disabled) to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.

INFO

Hover over me

Box-Shadow

.h-box-shadow or .h-box-shadow--decent

INFO

h-box-shadow

h-box-shadow--decent

Glass Background Effect

.h-bg-glass applies a glass-like background effect to an element, giving it a frosted glass appearance.

INFO

This is a glass background effect.

Apply Link-Color on Text-Element

.h-link-color: Link Color including hover and focus-styles (without applying any font-size)

INFO

Hover over me

Specific Cursor on Mouseover / Hover

.h-hover-pointer: The cursor is a pointer that indicates a link.

INFO

Hover over me

.h-forbidden-pointer: The cursor is a "not-allowed" symbol that indicates that the button/input is disabled.

INFO

Hover over me

.h-help-pointer: Help information is available.

INFO

Hover over me

.h-zoom-pointer: Something can be zoomed (magnified) in or out.

INFO

Hover over me

.h-hover-darken to darken a color on mouse-over..

INFO

No Pointer-Events

.h-no-pointer-evenets

INFO

Click me

Grayscale

Add grayscale filter to a section: .h-grayscale

INFO

Opacity

Set opacity to 40%, 50% or 60%: .h-opacity-40[50, 60]

INFO

Opacity 60%

Reduce Paragraph Margin-Bottom

TIP

A paragraph has a margin-bottom of $space-s per default. Use the following helper classes on either the parent element or the paragraph element itself, to reduce or eliminate the margin.

.h-paragraph-spacing-xs // reduces margin to $space-xs

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

.h-paragraph-spacing-reset // reduces margin to 0

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Scroll Margin Top

Sets scroll-margin-top to the specified space value. This is useful for ensuring that elements are positioned correctly when scrolled into view, especially in single-page applications or when using anchor links.

.h-scroll-margin-top-m // sets scroll-margin-top to $space-m.h-scroll-margin-top-xl // sets scroll-margin-top to $space-xl.h-scroll-margin-top-xxl // sets scroll-margin-top to $space-xxl