Components :: Notice

Specs

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

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

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 the HTML component (the Astro component is available on Github but not yet documented), 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.

Available styles

Default Notice

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

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

Notice with the .notice-danger modifier class.
Attention

Notice with the .notice-warning modifier class.
Success

Notice with the .notice-confirm modifier class.

Examples

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

Astro component syntax:

<Notice title="Info Notice">
  <p>This is the the default […].</p>
</Notice>

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

Astro component syntax:

<Notice title="Pro tip!" type="info">
  <p>Notice with the `.notice-info` modifier class.</p>
</Notice>