Components
Callout
A bordered alert box for inline messages. The default tone is warning; semantic variants cover info, success and danger. Add a ds-callout__title for an optional heading.
Variants
The base ds-callout is a warning. Add ds-callout--info, ds-callout--success or ds-callout--danger to switch the tone.
Default (warning tone). Incomplete configuration for this entity.
Heads up
This is an informational callout.Saved successfully.
This action cannot be undone.
<div class="ds-callout">Default (warning tone). Incomplete configuration for this entity.</div>
<div class="ds-callout ds-callout--info"><div class="ds-callout__title">Heads up</div>This is an informational callout.</div>
<div class="ds-callout ds-callout--success">Saved successfully.</div>
<div class="ds-callout ds-callout--danger">This action cannot be undone.</div>Web Component
The <ds-callout> element self-classes from a type attribute and prepends a ds-callout__title from the heading attribute.
<ds-callout type="info" heading="Heads up">This is an informational callout.</ds-callout>