Mirage: BGA styles

4.6 components.hidden Hidden

Toggle example guides Toggle HTML markup

Hide elements from all users. Compare to the visually-hidden component.

Used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user.

For anything you want to hide on page load when JavaScript is enabled, use the .js-hidden class.

Example
Markup: components/hidden/hidden.twig
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hidden </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  This content is hidden.
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span>
Source: components/hidden/_hidden.scss, line 1