Kickstand UI

# Display Utility Classes

Kickstand UI's display utility classes provide a way for you to easily adjust responsive layouts.

# Classes

Class CSS Rule
display-block display: block
display-flex more info display: flex
display-inline display: inline
display-inline-block display: inline-block
display-inline-flex display: inline-flex
show display: initial
hide display: none
visible visibility: visible
invisible visibility: hidden
sr-only visible only to screen readers
full-width ignores existing width constrains and spans the full viewport
display-block
display-flex
display-inline-block
display-inline
display-inline-flex
<div class="bg-light p-lg my-md display-block">display-block</div>
<div class="bg-light p-lg my-md display-flex">display-flex</div>
<div class="bg-light p-lg my-md display-inline">display-inline</div>
<div class="bg-light p-lg my-md display-inline-block">display-inline-block</div>
<div class="bg-light p-lg my-md display-inline-flex">display-inline-flex</div>

# Screen Reader Only

The sr-only class is used to hide information that is intended only for screen readers from the layout of a rendered page.

go to cart
<a href="#cart-page">
    <ks-icon icon="cart"></ks-icon>
    <span class="sr-only">go to cart</span>
</a>

NOTE

You can also use aria-label to accomplish this task, but it can only be used for text descriptions and not markup.

Also, if you are relying on tools like Google Translate to provide localized content to your users, aria-label values will not be translated.

# Full Width

If you need a container to ignore the width of the container it is in (like the mega menu), you can add the full-width utility class to it and it will span the full width of the browser window.

# Responsive Classes

You can also change the layout based on the user's screen size using the responsive variations of each class. By prefixing the class with the desired screen size (xxs-xl), you can adjust the behavior.

Display inline then block on md screen
<div class="display-inline md:display-block">Display <code>inline</code> then <code>block</code> on <code>md</code> screen</div>

← Layout →