Callout • Ssstyles

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>