component :: Notice

The .notice component is useful to bring something to the attention of the reader/user, as well as provide feedback on user interaction.

File Name	class	Source
`component.notice.css`	`.notice`	Github

HTML

Available modifiers

Available modifiers	Description
`.notice`	Default style. Base colors.
`.notice` + `.notice-info`	Information. Primary colors.
`.notice` + `.notice-danger`	Error/Danger. Reds.
`.notice` + `.notice-warning`	Warning. Oranges.
`.notice` + `.notice-confirm`	Confirmation/Success. Greens.

When using HTML, you’ll need to include the SVG icons “manually.” All the icons are available on Github. If you’d like to use different icons, Lucide is a great resource.

Custom properties

The following custom properties are available in the default theme:

Property	Color
`--notice-spacing`	Padding inside Notice.
`--notice-text-color`	Default text color.
`--notice-background-color`	Default background color.
`--notice-border-color`	Default border color.
`--notice-border-width`	Default border width.
`--notice-border-radius`	Default border radius.

Astro component

Prop	Type	Default	Description
`title`	`string`	`undefined`	Text for the notice header. (Optional.)
`type`	`string`	`undefined`	`info`, `danger`, `warning`, `confirm`.
`extraClass`	`string`	`undefined`	Additional CSS, useful for helper classes.

Available styles

Default Notice

This is the the default notice style, without a modifier class.
Information

Notice with the .notice-info class.
Something went wrong

Notice with the .notice-danger class.
Attention

Notice with the .notice-warning class.
Success

Notice with the .notice-confirm class.

Examples

---
import Notice from "../../components/Notice.astro";
---
<Notice type="warning">
  <p>This is a warning notice without a `title` prop.</p>
</Notice>

---
import Notice from "../../components/Notice.astro";
---
<Notice title="Congratulation!" type="confirm">
  <p>You've read this notice until the end!</p>
</Notice>

HTML examples

<aside class="notice">
  <div class="notice_title">
    <svg>[…]</svg>
    <strong>Default Notice</strong>
  </div>
  <p>This is the the default […].</p>
</aside>

<aside class="notice notice-info">
  <div class="notice_title">
    <svg>[…]</svg>
    <strong>Pro tip!</strong>
  </div>
  <p>Notice with the <code>.notice-info</code> modifier class.</p>
</aside>