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.
This is the the default notice style, without a modifier class.
File Name class Source component.notice.css.noticeGithub
HTML
Available modifiers
Available modifiers Description .noticeDefault style. Base colors. .notice + .notice-infoInformation. Primary colors. .notice + .notice-dangerError/Danger. Reds. .notice + .notice-warningWarning. Oranges. .notice + .notice-confirmConfirmation/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-spacingPadding inside Notice. --notice-text-colorDefault text color. --notice-background-colorDefault background color. --notice-border-colorDefault border color. --notice-border-widthDefault border width. --notice-border-radiusDefault border radius.
Astro component
Prop Type Default Description titlestringundefinedText for the notice header. (Optional.) typestringundefinedinfo, danger, warning, confirm.extraClassstringundefinedAdditional CSS, useful for helper classes .
Available styles
This is the the default notice style, without a modifier class.
Examples
import Notice from "../../components/Notice.astro" ;
< p >This is a warning notice without a `title` prop.</ p >
import Notice from "../../components/Notice.astro" ;
< Notice title = "Congratulation!" type = "confirm" >
< p >You've read this notice until the end!</ p >
HTML examples
This is the the default notice style, without a modifier class.
< div class = "notice_title" >
< strong >Default Notice</ strong >
< p >This is the the default […].</ p >
< aside class = "notice notice-info" >
< div class = "notice_title" >
< strong >Pro tip!</ strong >
< p >Notice with the < code >.notice-info</ code > modifier class.</ p >