Callout

<pc-callout>

0.5.1

Experimental

Callouts are used to display important messages inline.

<pc-callout>    <pc-icon        library="default"        icon-style="solid"        name="circle-info"        slot="icon"    ></pc-icon>    This is a standard callout. You can customise its content and even the icon.</pc-callout>

Code

Edit

Demos

Appearances

Set the appearance attribute to change the callout’s appearance.

<div class="pc-stack">    <pc-callout appearance="primary">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        <strong>This is super informative</strong><br />        You can tell by how pretty the callout is.    </pc-callout>    <pc-callout appearance="success">        <pc-icon            library="default"            icon-style="solid"            name="circle-check"            slot="icon"        ></pc-icon>        <strong>Your changes have been saved</strong><br />        You can safely exit the app now.    </pc-callout>    <pc-callout appearance="neutral">        <pc-icon            library="default"            icon-style="solid"            name="gear"            slot="icon"        ></pc-icon>        <strong>Your settings have been updated</strong><br />        Settings will take effect on next login.    </pc-callout>    <pc-callout appearance="warning">        <pc-icon            library="default"            icon-style="solid"            name="triangle-exclamation"            slot="icon"        ></pc-icon>        <strong>Your session has ended</strong><br />        Please login again to continue.    </pc-callout>    <pc-callout appearance="danger">        <pc-icon            library="default"            icon-style="solid"            name="circle-exclamation"            slot="icon"        ></pc-icon>        <strong>Your account has been deleted</strong><br />        We’re very sorry to see you go!    </pc-callout></div>

Code

Edit

Variants

Use the variant attribute to change the callout’s variant.

<div class="pc-stack">    <pc-callout appearance="primary" variant="accent">        <pc-icon            library="default"            icon-style="solid"            name="square-check"            slot="icon"        ></pc-icon>        This <strong>accent</strong> callout draws attention.    </pc-callout>    <pc-callout appearance="primary" variant="filled outlined">        <pc-icon            library="default"            icon-style="solid"            name="fill-drip"            slot="icon"        ></pc-icon>        This callout is both <strong>filled</strong> and <strong>outlined</strong>.    </pc-callout>    <pc-callout appearance="primary" variant="filled">        <pc-icon            library="default"            icon-style="solid"            name="fill"            slot="icon"        ></pc-icon>        This callout is only <strong>filled</strong>.    </pc-callout>    <pc-callout appearance="primary" variant="outlined">        <pc-icon            library="default"            icon-style="solid"            name="lines-leaning"            slot="icon"        ></pc-icon>        Here’s an <strong>outlined</strong> callout.    </pc-callout>    <pc-callout appearance="primary" variant="plain">        <pc-icon            library="default"            icon-style="solid"            name="font"            slot="icon"        ></pc-icon>        No bells and whistles on this <strong>plain</strong> callout.    </pc-callout></div>

Code

Edit

Sizes

Use the size attribute to change the callout’s size.

<div class="pc-stack">    <pc-callout size="large">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        This is meant to be <strong>very</strong> emphasised.    </pc-callout>    <pc-callout size="medium">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        This is a normal‐sized callout.    </pc-callout>    <pc-callout size="small">        <pc-icon            library="default"            icon-style="solid"            name="circle-info"            slot="icon"        ></pc-icon>        Just a small tip!    </pc-callout></div>

Code

Edit

No icons

Icons are optional. Simply omit the icon slot if you don’t want them.

<pc-callout appearance="primary">    Nothing fancy here, just a simple callout.</pc-callout>

Code

Edit

Properties

Name	Description	Default
`appearance`	The callout’s appearance. Type: `"primary" \| "success" \| "neutral" \| "warning" \| "danger"`	`"primary"`
`variant`	The callout’s variant. Type: `"accent" \| "filled" \| "outlined" \| "filled outlined" \| "plain"`	`"filled outlined"`
`size`	The callout’s size. Type: `"small" \| "medium" \| "large"`	`"medium"`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	‐

Learn more about attributes and properties.

Slots

Name	Description
(default)	The callout’s content.
`icon`	An informational icon.

Learn more about using slots.

Parts

Name	Description
`base`	The component’s base wrapper.
`icon`	The callout’s icon.
`message`	The callout’s content.

Learn more about customising CSS parts.

Importing

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/callout/callout.js"></script>

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/callout/callout.js";

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

import "placer-toolkit/dist/components/callout/callout.js";