Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 5845

7.4.1 Display Nothing on Empty

This utility class is used to hide an element when it contains no content. This is super useful for creating a space that needs to be decorated but also doesn't need to be shown when empty.

Example

Default styling

Does Not Have class display_none:empty and has No Content

Has class display_none:empty and has No Content

Has class display_none:empty has Content

any content including space will show the element
NOTE:
!! Whitespace counts as not empty !! 
<h2> <strong class="font_bold c_primary-n2 uppercase">Does Not Have</strong> class display_none:empty and has <strong class="font_bold c_primary-n2 uppercase">No Content</strong></h2>
<div class="p-b_3 br_solid br_primary br_1"></div>
<h2> <strong class="font_bold c_primary-n2 uppercase">Has</strong> class display_none:empty and has <strong class="font_bold c_primary-n2 uppercase">No Content</strong></h2>
<div class="p-b_3 br_solid br_primary br_1 display_none:empty"></div>
<h2> <strong class="font_bold c_primary-n2 uppercase">Has</strong> class display_none:empty has <strong class="font_bold c_primary-n2 uppercase">Content</strong></h2>
<div class="p-b_3 br_solid br_primary br_1 display_none:empty">any content including space will show the element</div>
Copy Code