CSS Utility Classes Visibility
Set element visibility using visibility utilities. Content will be hidden both visually and for assistive technology/screen reader users.
._hidden._visible._{xs|sm|md|lg|xl|2xl}:hidden._{xs|sm|md|lg|xl|2xl}:visible
<div class="_hidden">...</div>
<div class="_visible">...</div>
Without modifying the element's display:
<div class="_visibility:hidden">...</div>
<div class="_visibility:visible">...</div>
Visibility utilities can be applied responsively using the following helper classes:
<template>
<p class="_xs:hidden!">This text is hidden starting from xs viewport size.</p>
<p class="_sm:hidden!">This text is hidden starting from sm viewport size.</p>
<p class="_md:hidden!">This text is hidden starting from md viewport size.</p>
<p class="_lg:hidden!">This text is hidden starting from lg viewport size.</p>
<p class="_xl:hidden!">This text is hidden starting from xl viewport size.</p>
<p class="_2xl:hidden!">This text is hidden starting from 2xl viewport size.</p>
<br />
<p class="_xs:visible!">This text is visible starting from xs viewport size.</p>
<p class="_sm:visible!">This text is visible starting from sm viewport size.</p>
<p class="_md:visible!">This text is visible starting from md viewport size.</p>
<p class="_lg:visible!">This text is visible starting from lg viewport size.</p>
<p class="_xl:visible!">This text is visible starting from xl viewport size.</p>
<p class="_2xl:visible!">This text is visible starting from 2xl viewport size.</p>
<br />
<p class="_xs:visible! _sm:hidden!">This text is visible only on xs viewport size.</p>
<p class="_sm:visible! _md:hidden!">This text is visible only on sm viewport size.</p>
<p class="_md:visible! _lg:hidden!">This text is visible only on md viewport size.</p>
<p class="_lg:visible! _xl:hidden!">This text is visible only on lg viewport size.</p>
<p class="_xl:visible! _2xl:hidden!">This text is visible only on xl viewport size.</p>
<p class="_2xl:visible!">This text is visible only on 2xl viewport size.</p>
</template>