1. Utilities

Display and Visibility Complete

Hiding and showing elements

Display block orc-u-display-block

Display description

Content is hidden orc-u-is-hidden

Display description

Content is vishidden orc-u-is-vishidden

Display description

Content is hidden xl orc-u-is-hidden-xl

Display description

Content is visible large orc-u-is-visible-large

Display description

Content is visible xl orc-u-is-visible-xl

Display description

  • 

    <!-- 'fpo' stands for 'for placement only'. 'fpo-block' should be ignored-->
<div class="orc-u-display-block fpo-block">
  Display block
</div>
    

  • 

    <!-- 'fpo' stands for 'for placement only'. 'fpo-block' should be ignored-->
<div class="orc-u-is-hidden fpo-block">
  Content is hidden
</div>
    

  • 

    <!-- 'fpo' stands for 'for placement only'. 'fpo-block' should be ignored-->
<div class="orc-u-is-vishidden fpo-block">
  Content is visibly hidden
</div>
    

  • 

    <!-- 'fpo' stands for 'for placement only'. 'fpo-block' should be ignored-->
<div class="orc-u-is-hidden-xl fpo-block">
  Content is hiden on xl screens
</div>
    

  • 

    <!-- 'fpo' stands for 'for placement only'. 'fpo-block' should be ignored-->
<div class="orc-u-is-visible-large fpo-block">
  Content is visible on large screens
</div>
    

  • 

    <!-- 'fpo' stands for 'for placement only'. 'fpo-block' should be ignored-->
<div class="orc-u-is-visible-xl fpo-block">
  Content is visible on xl screens
</div>