Alerts

Info (Default)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo eaque iusto expedita, repellendus molestiae, aliquid nesciunt vel nam odit doloribus corrupti.

Success

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo eaque iusto expedita, repellendus molestiae, aliquid nesciunt vel nam odit doloribus corrupti.

Error

Something went wrong

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo eaque iusto expedita, repellendus molestiae, aliquid nesciunt vel nam odit doloribus corrupti.

Warn

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo eaque iusto expedita, repellendus molestiae, aliquid nesciunt vel nam odit doloribus corrupti.



Variable name Default value Description
--b-alert #daecf8 Background color for the alert component
--border-alert rgba(0, 0, 0, .05) Border color for the alert component
--br-alert .3rem Border radius for the alert component
--c-alert #2d6e93 Text color for the alert component
--p-alert 1rem Padding for the alert component
--b-alert-error #f3dfe0 Background color for the error alert variant
--c-alert-error #b1423d Text color for the error alert variant
--b-alert-success #def0d8 Background color for the success alert variant
--c-alert-success #337638 Text color for the success alert variant
--b-alert-warning #fff8e3 Background color for the warning alert variant
--c-alert-warning #cb9700 Text color for the warning alert variant
--fs-alert-d .9rem Font size for the alert description
--fs-alert-s .9rem Font size for the alert subtitle
--fw-alert-s 600 Font weight for the alert subtitle
--pb-alert-s .3rem Padding bottom for the alert subtitle
--fs-alert-t 1.1rem Font size for the alert title
--fw-alert-t 600 Font weight for the alert title
--pb-alert-t .5rem Padding bottom for the alert title


CSS Class Description
alert Base class for the alert component. Sets the background, border, color, and more.
alert.error Alert class variant for errors. Sets specific background and text colors for error alerts.
alert.success Alert class variant for success messages. Sets specific background and text colors for success alerts.
alert.warn Alert class variant for warnings. Sets specific background and text colors for warning alerts.
alert-d Class for the description inside an alert. Sets the font size for the description.
alert-s Class for the subtitle inside an alert. Sets the font size, weight, and bottom padding for the subtitle.
alert-t Class for the title inside an alert. Sets the font size, weight, and bottom padding for the title.
alert-time Class for the icon or time area inside an alert. Sets the position, size, and shape of the close icon.