.u-visible

  • /src/css/object/utility/_visible.scss

Visible utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-visible">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-visible-sm

  • /src/css/object/utility/_visible.scss

Visible utility for sm

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-hidden u-visible-sm">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-visible-md

  • /src/css/object/utility/_visible.scss

Visible utility for md

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-hidden u-visible-md">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-visible-md-up

  • /src/css/object/utility/_visible.scss

Visible utility for md or more

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-hidden u-visible-md-up">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-visible-lg

  • /src/css/object/utility/_visible.scss

Visible utility for lg

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-hidden u-visible-lg">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-visible-lg-up

  • /src/css/object/utility/_visible.scss

Visible utility for lg or more

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-hidden u-visible-lg-up">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-visible-xl

  • /src/css/object/utility/_visible.scss

Visible utility for xl

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-hidden u-visible-xl">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-visible-xl-up

  • /src/css/object/utility/_visible.scss

Visible utility for xl or more

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="u-hidden u-visible-xl-up">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>