QS Pack
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. |