No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Highlight

The Highlight component is used to pull out important informational content to a user in a more visually dynamic way.

This is the highlight children content.

How it works

The component is made up from a keylined box containing content, and an optional shape/background image. The content contained can be of any type.

The purpose of the Highlight molecule is to lift a section of content from the main flow of the page and give it increased prominence. Examples of this include:

  • highlighting the particular benefits of a course or product to learners

  • explaining what skills and knowledge learners can be expected to gain from doing a course

  • explaining what learners will receive on completion of a course

Implementation

NameDescriptionDefault
backgroundColour
'black''blue''cool-grey''coral''dark-grey''gainsboro-grey''gold''light-grey'
'gainsboro-grey'
size
'mega''hall'
'mega'
hasRelativePositioning
bool
false
id
string
-
children
node[] | node
-
backgroundImage
string
-
title
string
-