Emphasis boxes are used to highlight important information on a web page. We have two styles of emphasis boxes – indent and highlight the left border (Emphasis box 1) and indent and shading (Emphasis box 2). When we create your site, our team will specify the styling of your emphasis boxes to ensure they are accessible and match your branding.
You can add emphasis styling to paragraphs of text through the WYSIWYG Editor. Just select the text you want to highlight and select the emphasis box you want to use from the Apply CSS Class drop-down menu. To clear the styling, place your cursor in the emphasized text and select Clear Class from the Apply CSS Class drop-down menu, or use the element editor below the Design tab to remove the SPAN tag.
Please note that adding emphasis styling to more than one paragraph will create a break in the styling; the emphasis box will run until a line break, then restart on the next paragraph.
In general, emphasis boxes should be used sparingly to avoid losing their significance and should not be used on excessively long paragraphs. On mobile devices, long paragraphs can be difficult to read, and you may not want the emphasis boxes to run too long. Additionally, they should not be used with ordered or unordered lists or tables. Some uses we've seen for emphasis boxes are:
- Contact information
- Calls to action that don't suit a button
- Changes to opening hours
- New or temporary changes to services
- Relevant rules or restrictions for services