Design options
By default, the Feedback Message doesn't have a lot of styles applied. This is because these is a large variety of design options affecting colors (background, text, icon, etc), animations, sizing, icons, dismissal type and more.
For this example we have set the background to "Alternate background 1" and the background size to "full-width". The "starFill" icon has been set with its color set to "warning".
Feedback Message - Content
It's recommended that you experiment with the design options first before attempting to use them on a published page
Presets
The following examples use the "preset" field. Presets change the default values of options, but you can still fully customize the component using the existing design options. These exist purely as a time savor and contain no unique styles.
"alert"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"alert-reverse"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"global-alert"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"global-alert-reverse"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"top"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"top-info"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"top-error"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"top-warning"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"top-success"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"context"
Context - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"context-info"
Context info - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"context-error"
Context error - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"context-warning"
Context warning - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"context-success"
Context success - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"note"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.
"note-reverse"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis in enim vitae rhoncus. Sed finibus leo nec mi dapibus condimentum.