Breakout boxes provide a way of highlighting a small amount of text to make it stand out on a page.

They work well when used consistently throughout your site.

While set out as an example of the different options, this page is a good reminder that having too many breakout boxes on a page results in a loss of impact.

Feature showcase


Use to indicate a successful outcome in a process (green tick icon). For example: for a correct answer. Class = 'status--success'.


Use to highlight text of a temporary nature. For example: a product recall or office closure. Class = 'status--warning'.


Use when something is wrong or not working. For example: a system is unavailable or emergency situation. Class = 'status--error'.


Use to draw attention to a permanat outcome. For example: an outcome, action to take or common questions where the rest of the page provides a greater level of detail. Class = 'status--info'.

Add this feature to your site

Guide to adding breakout boxes (requires log-in)

Top accessibility tip

Create link text that’s as specific as possible. Don't just use 'click here', 'read more', 'find out more' or 'download' (which may not make sense for people using screen readers): accessibility.sa.gov.au/your-role/content/links