Skip to main content

Help users to See important information

Highlights are visual emphasis used to draw information to the attention of the user.

<p>This is some <em class="ons-highlight">important</em> content.</p>
<h1 class="ons-u-fs-m">What was the value of the business’s total sales of <em class="ons-highlight">food</em>?</h1>
<h1 class="ons-u-fs-m">What was the value of the business’s total sales of <em class="ons-highlight">alcohol, tobacco and confectionary</em>?</h1>
<h2>Of the <em class="ons-highlight">423</em> employees how many were part-time?</h2>
<p>This is some <em class="ons-highlight">important</em> content.</p>
<h1 class="ons-u-fs-m">What was the value of the business’s total sales of <em class="ons-highlight">food</em>?</h1>
<h1 class="ons-u-fs-m">What was the value of the business’s total sales of <em class="ons-highlight">alcohol, tobacco and confectionary</em>?</h1>
<h2>Of the <em class="ons-highlight">423</em> employees how many were part-time?</h2>

When to use this pattern

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.

How to use this pattern

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.

Help improve this pattern

Let us know how we could improve this pattern or share your user research findings. Discuss the ‘See important information’ pattern on GitHub