This component is utilized when an icon from the icon font list is added before or after a text element. The icon should aid the user in scanning the content, but should be avoided in excess so as not to create visual noise and confusion. The text may be visible (in the case of an icon preceding a heading) or it may be visually hidden (in the case of a social network link). Use this component in conjunction with icon classes and space utilities.
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L13
<!-- pseudo icon -->
<a class="c-pseudo-icon icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L30
<!-- pseudo icon white -->
<a class="c-pseudo-icon c-pseudo-icon--white icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L50
<!-- pseudo icon xs -->
<a class="c-pseudo-icon c-pseudo-icon--xs icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L70
<!-- pseudo icon small -->
<a class="c-pseudo-icon c-pseudo-icon--sm icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L90
<!-- pseudo icon large -->
<a class="c-pseudo-icon c-pseudo-icon--lg icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L110
<!-- pseudo icon xl -->
<a class="c-pseudo-icon c-pseudo-icon--xl icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L130
<!-- pseudo icon xxl -->
<a class="c-pseudo-icon c-pseudo-icon--xxl icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>
Author: Not specified
Since: 0.9.0
Source: /source/patterns/components/pseudo-icons.scss#L150
<!-- pseudo icon xxxl -->
<a class="c-pseudo-icon c-pseudo-icon--xxxl icon-facebook" title="facebook" href="#" target="_blank">
<span class="visuallyhidden">Facebook</span>
</a>