Hide

To hide a element at a specific screen size use the hide trait. It uses the format {size}:{direction}.

  • size - { sm | md | lg | xl }
  • direction -{ "" | up | down }
<div pam-hide="{size}">Affects device widths that's in the size range</div>
<div pam-hide="{size}:{direction}">Affects device widths below or over the declared size</div>

Tip Adjust the window width to see the hiding in action.

Default styling
Small
sm%3Adown
Hides elements for device widths under the small breakpoint.
Small
sm
Hides elements for device widths that're in the small range.
Small
sm%3Aup
Hides elements for device widths from the small breakpoint and up.
Small
Markup

Toggle example guides Toggle HTML markup 

<div pam-flex="wrap">
    <div pam-hide="[modifier]" pam-size="w:full md:w:1-5">
        <div pam-skin="bg:gray:200" pam-space="p:4">
            <span>Small</span>
        </div>
    </div>
</div>