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.

<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>

<br />

<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>

<br />

<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>

<br />

<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>

<br />

<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>

Code

Edit

Variants

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

<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>

<br />

<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>

<br />

<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>

<br />

<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>

<br />

<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>

Code

Edit

Sizes

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

<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>

<br />

<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>

<br />

<pc-callout size="small">
    <pc-icon
        library="default"
        icon-style="solid"
        name="circle-info"
        slot="icon"
    ></pc-icon>
    Just a small tip!
</pc-callout>

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" \| "plain" \| "accent outlined" \| "filled outlined"`	`"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 customising animations.

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.3/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.3/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";