Highlights are visual emphasis used to draw information to the attention of the user.
Highlight is used in eQ to draw the attention of the user to a particular value or phrase which is central to the understanding of the sentence. It is used to highlight a section of a sentence or phrase which a user may otherwise miss.
Highlight is also used to indicate a calculated or piped value which was entered previously and is being displayed in a new context.
It should be noted that highlight should be applied to an
<em>element. If it is applied to another element which does not carry semantic emphasis (for example<span>) it will fail in its intent as it no longer provides emphasis to all users.
Global
/components/_highlight.scssvars/_colours.sccs
<p class="mars">This is some <em class="highlight">important</em> content.</p>
<h1 class="neptune">What was the value of the business’s total sales of <em class="highlight">food</em>?</h1>
<h1 class="neptune">What was the value of the business’s total sales of <em class="highlight">alcohol, tobacco and confectionary</em>?</h1>
<h2 class="neptune">Of the <em class="highlight">423</em> employees how many were part-time?</h2>
{
"highlightcontent": "This is some <em class=\"highlight\">important</em> content.",
"highlightcontent-heading": "What was the value of the business’s total sales of <em class=\"highlight\">food</em>?",
"highlightcontent-heading2": "What was the value of the business’s total sales of <em class=\"highlight\">alcohol, tobacco and confectionary</em>?",
"highlightcontent-total": "Of the <em class=\"highlight\">423</em> employees how many were part-time?"
}