Mirage: BGA styles

2.5.3 base.text.abbr Abbreviation / Acroynym

Toggle example guides Toggle HTML markup

The <abbr> element makes the meanings of abbreviations and acronyms visible on hover.

Example
An abbreviation of the word attribute is attr. And HTML is an acroynm.
Markup: base/text/text-abbr.twig
<span class="xml">An abbreviation of the word attribute is <span class="hljs-tag">&lt;<span class="hljs-name">abbr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"attribute"</span>&gt;</span>attr<span class="hljs-tag">&lt;/<span class="hljs-name">abbr</span>&gt;</span>.
And <span class="hljs-tag">&lt;<span class="hljs-name">acronym</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"HyperText Markup Language"</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">acronym</span>&gt;</span> is an acroynm.
</span>
Source: base/text/_text.scss, line 9