Hide or show content

Hidden

Hide content in a non-accessible way. Content is hidden for everybody including screenreaders.

<div class="k-hidden">
    ...
</div>

Visually hidden

Hide the content in an accessible way. Content is hidden for viewers but not for screenreaders

<div class="k-visually-hidden">
    ...
</div>

Visually shown

Show content that have the .visually-hidden class.

• Use as @extend for items that are already extending .k-visually-hidden.
• Avoid using .k-visually-hidden and .k-visually-shown classes together.

<div class="k-visually-shown">
    ...
</div>

Touch events hidden

Hide elements for touch enabled devices

<div class="k-touchevents-hidden">
    ...
</div>