<p>The label on the form element below is hidden, while still accessible.</p>
<div class="b-form__group">
<label class="b-form__label b-hide" for="name">Hidden Label</label>
<input class="b-form__input" type="text" id="name" placeholder="Hidden Label" />
<span class="b-form__message"></span>
</div>
<p>The label on the form element below is hidden, while still accessible.</p>
<div class="b-form__group">
<label class="b-form__label b-hide" for="name">Hidden Label</label>
<input class="b-form__input" type="text" id="name" placeholder="Hidden Label" />
<span class="b-form__message"></span>
</div>
/* No context defined for this component. */
This base class allows you to visually hide elements on the page, while leaving them accessible to screen readers etc. This will help with accessibility of the page for the visually impaired.
The best example of a use for this would be on forms. Placeholder text with no label has become a design norm, but this leaves the form inaccessible to the visually disabled as placeholders are not readable to screenreaders.