Highlight
Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information.
Usage
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt nunc, porttitor pretium enim vestibulum eget. Suspendisse ac tempor ante. Nullam at convallis ex. Integer mattis sagittis interdum. Suspendisse viverra sit amet mauris non interdum. In porttitor tempus diam vel venenatis. Aenean elementum sem vitae tempus tempor.
You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.
Sed quis massa elementum, pulvinar lacus at, efficitur velit. Nam nec ornare augue. Aliquam pellentesque dictum nisl, a commodo arcu dapibus id.
Add an interesting quote here
Sed mollis mauris nec dui condimentum pulvinar. Suspendisse vitae aliquet nisi. Donec libero ipsum, fermentum ut augue id, scelerisque lobortis orci.
Principles
- Highlights are designed to capture users' attention. Therefore, they should be used sparingly.
- With the React component you can use the prop
type="quote"to transform the highlight text into a quote with an optional reference, though we strongly recommend adding a reference to a quote. With the core version remember to insert the em-dash character — (HTML code—) before the reference text. In React component the dash is handled automatically. - Pay attention to accessibility when using custom text or accent line colour. Use sufficient colour contrast so the content is clearly distinguishable from the surrounding area.
- Quote and Highlight adds vertical margin before and after actual content.
Type variations
Highlight
You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.
Quote
In Core package remember to insert the em-dash character — (HTML code —) before the reference text.
Add an interesting quote here
Size variations
Large
You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.
Add an interesting quote here
Default
You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.
Add an interesting quote here
Small
You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.
Add an interesting quote here
Theming
Custom accent line colour
You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.
Add an interesting quote here
Custom text colour
You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.
Add an interesting quote here