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.
::: demo Hover over me :::
Box-Shadow
.h-box-shadow or .h-box-shadow--decent
::: demo
Glass Background Effect
.h-bg-glass applies a glass-like background effect to an element, giving it a frosted glass appearance.
::: demo
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) ::: demo Hover over me :::
Specific Cursor on Mouseover / Hover
.h-hover-pointer: The cursor is a pointer that indicates a link. ::: demo Hover over me :::
.h-forbidden-pointer: The cursor is a "not-allowed" symbol that indicates that the button/input is disabled. ::: demo Hover over me :::
.h-help-pointer: Help information is available. ::: demo Hover over me :::
.h-zoom-pointer: Something can be zoomed (magnified) in or out. ::: demo Hover over me :::
.h-hover-darken to darken a color on mouse-over.. ::: demo :::
No Pointer-Events
.h-no-pointer-evenets
::: demo Click me :::
Grayscale
Add grayscale filter to a section: .h-grayscale
::: demo
:::Opacity
Set opacity to 40%, 50% or 60%: .h-opacity-40[50, 60]
::: demo 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 ::: demo
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
::: demo
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