# Random Helper Classes

# Set Highest z-index

.h-always-on-top

# Box Shadow

.h-box-shadow

h-box-shadow

hide code

<div class="m-t-m h-flex h-space-between">
    <div class="p-m h-bg-color-white h-box-shadow">h-box-shadow</div>
</div>

# Apply Link-Color on Text-Element

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

Hover over me

hide code

<span class="h-link-color">Hover over me</span>

# Specific Cursor on Mouseover / Hover

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

Hover over me

hide code

<span class="h-hover-pointer">Hover over me</span>

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

Hover over me

hide code

<span class="h-forbidden-pointer">Hover over me</span>

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

Hover over me

hide code

<span class="h-help-pointer">Hover over me</span>

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

Hover over me

hide code

<span class="h-zoom-pointer">Hover over me</span>

# No Pointer-Events

.h-no-pointer-evenets

Click me

hide code

<a class="h-no-pointer-events">Click me</a>

# 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

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

hide code

<div class="h-paragraph-spacing-xs">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>    
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>    
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>

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

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

hide code

<div>
    <p class="h-paragraph-spacing-reset">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>    
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>    
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>

← Animation Helper Classes Useful CSS Mixins →