3.0.0-alpha.11 Alpha
Native Styles

Callout

.wa-callout

Callouts are used to display important messages inline.

Want to do more? Check out the <wa-callout> component! 
<article class="wa-callout">
  This is a callout style, applied to a standard article element.
</article>

Examples

Variants

Use the variant utility classes to set the callout's color variant.





<article class="wa-callout wa-brand">
  <strong>This is super informative</strong><br />
  You can tell by how pretty the callout is.
</article>

<br />

<article class="wa-callout wa-success">
  <strong>Your changes have been saved</strong><br />
  You can safely exit the app now.
</article>

<br />

<article class="wa-callout wa-neutral">
  <strong>Your settings have been updated</strong><br />
  Settings will take effect on next login.
</article>

<br />

<article class="wa-callout wa-warning">
  <strong>Your session has ended</strong><br />
  Please login again to continue.
</article>

<br />

<article class="wa-callout wa-danger">
  <strong>Your account has been deleted</strong><br />
  We're very sorry to see you go!
</article>

Appearance

Use the appearance utility classes to change the callout's visual appearance (the default is outlined filled).






<article class="wa-callout wa-brand wa-outlined wa-accent">
  This <strong>accent</strong> callout is also <strong>outlined</strong>
</article>

<br />

<article class="wa-callout wa-brand wa-accent">
  This <strong>accent</strong> callout draws attention without an outline
</article>

<br />

<article class="wa-callout wa-brand wa-outlined wa-filled">
  This callout is both <strong>filled</strong> and <strong>outlined</strong>
</article>

<br />

<article class="wa-callout wa-brand wa-filled">
  This callout is only <strong>filled</strong>
</article>

<br />

<article class="wa-callout wa-brand wa-outlined">
  Here's an <strong>outlined</strong> callout
</article>

<br />

<article class="wa-callout wa-brand wa-plain">
  No bells and whistles on this <strong>plain</strong> callout
</article>

Sizes

Use the size utility classes to change a callout's size.



<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
  This is meant to be very emphasized.
</article>

<br />

<article class="wa-callout">
  Normal-sized callout.
</article>

<br />

<article class="wa-callout wa-plain wa-plain wa-size-s">
  Just a small tip!
</article>

Opting In to Native Callout Styles

If you want to use the Native Callout styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/callout.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/callout.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results