❄ SnowballSH Foundation UI

Callout

One recipe, two bindings — rendered side by side from the same source the package ships.

React

Info: reads calmly in the accent hue.
Warning: something needs attention before publishing.
Aurora: a highlight for good news and fresh results.
callout.demo.tsx
import { Callout } from "../react/index.js";

export default function CalloutDemo() {
  return (
    <div className="flex flex-col">
      <Callout tone="info">Info: reads calmly in the accent hue.</Callout>
      <Callout tone="warn">
        Warning: something needs attention before publishing.
      </Callout>
      <Callout tone="aurora">
        Aurora: a highlight for good news and fresh results.
      </Callout>
    </div>
  );
}

Svelte

Info: reads calmly in the accent hue.
Warning: something needs attention before publishing.
Aurora: a highlight for good news and fresh results.
callout.demo.svelte
<script lang="ts">
  import { Callout } from "../svelte/index.js";
</script>

<div class="flex flex-col">
  <Callout tone="info">Info: reads calmly in the accent hue.</Callout>
  <Callout tone="warn"
    >Warning: something needs attention before publishing.</Callout
  >
  <Callout tone="aurora"
    >Aurora: a highlight for good news and fresh results.</Callout
  >
</div>