The callout is an info box for important information. It can have a header and some content.
You need to import the CSS file and assign the data attribute to use it.
@import "ssstyles/css/callout.css" layer(components);
<aside data-callout>
<header><h3>Watch out!</h3></header>
<p>If you tellsomeone to watch out, you tell them to be careful or warn them of a danger.</p>
</aside>
You can increase the importance by adding the accent colors to the data attribute.
<aside data-callout="accent">
<header><h3>Watch out!</h3></header>
<p>
Watch Out! is the second studio album from Canadian post-hardcore band Alexisonfire, released on June 8, 2004.
</p>
</aside>
<aside data-callout="accent2">
<header><h3>Watch out!</h3></header>
<p>
You may also use the term to inform others that your watch is broken and you're no longer able to tell the time.
</p>
</aside>