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	Description	Source
`component.notice.css`	All notice styles (`.notice`)	Github

Playground

Variation

Type

Content

Title

Body

Copied!

<aside class="notice">
<div class="notice_title">
  <svg>[…]</svg>
  <strong>Pro tip!</strong>
</div>
<p>Notices work without JavaScript.</p>
</aside>

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 settings.ui.css:

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`.
`class`	`string`	`undefined`	Additional CSS classes, useful for helper classes.

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>