{"id":4897,"date":"2022-10-09T02:00:00","date_gmt":"2022-10-09T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/css-alerts\/"},"modified":"2026-04-07T22:06:49","modified_gmt":"2026-04-07T20:06:49","slug":"css-alerts","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-alerts\/","title":{"rendered":"CSS Alerts: 28 Copy-Paste Alert CSS Examples"},"content":{"rendered":"<p>You can build reusable <strong>CSS alerts<\/strong> with plain HTML and a small set of CSS classes. Below you will find copy-paste starter code first, then a library of examples you can preview and adapt for success, info, warning, and error messages.<\/p>\n<h2 class=\"wp-block-heading\" id=\"how-do-you-build-a-css-alert-you-can-copy-and-reuse\">How do you build a CSS alert you can copy and reuse?<\/h2>\n<p>You build a reusable CSS alert by using a single base class (<code>.alert<\/code>) plus small modifier classes for color and style.<\/p>\n\n<ol class=\"wp-block-list\"><li>Add semantic HTML for the message and an optional title.<\/li>\n<li>Apply a base <code>.alert<\/code> style (padding, border radius, layout).<\/li>\n<li>Add variant classes like <code>.alert--success<\/code> or <code>.alert--error<\/code>.<\/li>\n<li>Add <code>role=\"status\"<\/code> or <code>role=\"alert\"<\/code> based on urgency.<\/li>\n<li>Add an optional close button, CSS-only or JS-enhanced.<\/li><\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"copy-paste-html-base-alert\">Copy-paste HTML (base alert)<\/h3>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--info\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"polite\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__content\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__title\"<\/span>&gt;<\/span>Heads up<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Your changes were saved.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3 class=\"wp-block-heading\" id=\"copy-paste-css-base-tokens\">Copy-paste CSS (base + tokens)<\/h3>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-pseudo\">:root<\/span>{\n  <span class=\"hljs-attribute\">--alert-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n  <span class=\"hljs-attribute\">--alert-border<\/span>: <span class=\"hljs-number\">1px<\/span>;\n  <span class=\"hljs-attribute\">--alert-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">25px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,.<span class=\"hljs-number\">08<\/span>);\n  <span class=\"hljs-attribute\">--alert-gap<\/span>: .<span class=\"hljs-number\">75rem<\/span>;\n\n  <span class=\"hljs-attribute\">--info-bg<\/span>: <span class=\"hljs-number\">#eff6ff<\/span>;   <span class=\"hljs-attribute\">--info-bd<\/span>: <span class=\"hljs-number\">#93c5fd<\/span>;   <span class=\"hljs-attribute\">--info-tx<\/span>: <span class=\"hljs-number\">#0b3a75<\/span>;\n  <span class=\"hljs-attribute\">--success-bg<\/span>:<span class=\"hljs-number\">#ecfdf5<\/span>; <span class=\"hljs-attribute\">--success-bd<\/span>:<span class=\"hljs-number\">#6ee7b7<\/span>; <span class=\"hljs-attribute\">--success-tx<\/span>:<span class=\"hljs-number\">#065f46<\/span>;\n  <span class=\"hljs-attribute\">--warning-bg<\/span>:<span class=\"hljs-number\">#fffbeb<\/span>; <span class=\"hljs-attribute\">--warning-bd<\/span>:<span class=\"hljs-number\">#fcd34d<\/span>; <span class=\"hljs-attribute\">--warning-tx<\/span>:<span class=\"hljs-number\">#7a4c00<\/span>;\n  <span class=\"hljs-attribute\">--error-bg<\/span>:  <span class=\"hljs-number\">#fef2f2<\/span>; <span class=\"hljs-attribute\">--error-bd<\/span>:  <span class=\"hljs-number\">#fca5a5<\/span>; <span class=\"hljs-attribute\">--error-tx<\/span>:  <span class=\"hljs-number\">#7f1d1d<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.alert<\/span>{\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-built_in\">var<\/span>(--alert-radius);\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-built_in\">var<\/span>(--alert-border) solid transparent;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-built_in\">var<\/span>(--alert-shadow);\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-built_in\">var<\/span>(--alert-gap);\n  <span class=\"hljs-attribute\">align-items<\/span>: flex-start;\n}\n\n<span class=\"hljs-selector-class\">.alert__title<\/span>{\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> .<span class=\"hljs-number\">25rem<\/span>;\n  <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.alert__content<\/span> &gt; <span class=\"hljs-selector-pseudo\">:last-child<\/span>{ <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0<\/span>; }\n\n<span class=\"hljs-selector-class\">.alert--info<\/span>   { <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--info-bg);    <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--info-bd);    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--info-tx); }\n<span class=\"hljs-selector-class\">.alert--success<\/span>{ <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--success-bg); <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--success-bd); <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--success-tx); }\n<span class=\"hljs-selector-class\">.alert--warning<\/span>{ <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--warning-bg); <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--warning-bd); <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--warning-tx); }\n<span class=\"hljs-selector-class\">.alert--error<\/span>  { <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--error-bg);   <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--error-bd);   <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--error-tx); }\n\n<span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">prefers-reduced-motion:<\/span> reduce){\n  *{ <span class=\"hljs-attribute\">animation-duration<\/span>: .<span class=\"hljs-number\">01ms<\/span> <span class=\"hljs-meta\">!important<\/span>; <span class=\"hljs-attribute\">animation-iteration-count<\/span>: <span class=\"hljs-number\">1<\/span> <span class=\"hljs-meta\">!important<\/span>; <span class=\"hljs-attribute\">transition-duration<\/span>: .<span class=\"hljs-number\">01ms<\/span> <span class=\"hljs-meta\">!important<\/span>; }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3 class=\"wp-block-heading\" id=\"quick-customization\">Quick customization<\/h3>\n<p>Start by changing the CSS variables in <code>:root<\/code> for radius, shadow, and colors. Keep text contrast readable, especially for light warning backgrounds. If you animate alerts (slide in, fade out), make sure <code>prefers-reduced-motion<\/code> disables it.<\/p>\n<h2 class=\"wp-block-heading\" id=\"what-css-alert-variants-should-you-offer-success-info-warning-error\">What CSS alert variants should you offer (success, info, warning, error)?<\/h2>\n<p>Most sites need four variants, success, info, warning, and error, because they match common outcomes and expected colors. The error variant also covers the classic <strong>css error message<\/strong> after a failed form submit or validation issue.<\/p>\n<h3 class=\"wp-block-heading\" id=\"example-markup-for-each-variant\">Example markup for each variant<\/h3>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--success\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"polite\"<\/span>&gt;<\/span>Payment received.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--info\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"polite\"<\/span>&gt;<\/span>New version available.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--warning\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"polite\"<\/span>&gt;<\/span>Your session will expire soon.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--error\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"alert\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"assertive\"<\/span>&gt;<\/span>Error: email or password is incorrect.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"how-do-you-make-css-alerts-accessible\">How do you make CSS alerts accessible?<\/h2>\n<p>Accessible CSS alerts use the right ARIA live behavior, readable contrast, and keyboard-friendly dismissal. Use ARIA live regions when the message appears dynamically after an action.<\/p>\n<h3 class=\"wp-block-heading\" id=\"choose-the-right-role-and-live-region\">Choose the right role and live region<\/h3>\n\n<ul class=\"wp-block-list\"><li><code>role=\"alert\"<\/code> for urgent errors that must be announced right away (failed payment, form submission failed).<\/li>\n<li><code>role=\"status\"<\/code> (or <code>aria-live=\"polite\"<\/code>) for non-blocking updates like &#8220;Saved&#8221;.<\/li>\n<li>Avoid spamming screen readers with repeated alerts. Update the text instead of injecting lots of nodes.<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"close-button-requirements\">Close button requirements<\/h3>\n\n<ul class=\"wp-block-list\"><li>Use a real button, <code>&lt;button type=\"button\"&gt;<\/code>, not a clickable <code>&lt;div&gt;<\/code>.<\/li>\n<li>Add <code>aria-label=\"Dismiss alert\"<\/code> if the button is icon-only.<\/li>\n<li>Keep focus styles visible, and do not make click-to-dismiss the only way to clear an error.<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"how-do-you-make-a-dismissible-alert-css-only-and-with-javascript\">How do you make a dismissible alert (CSS-only and with JavaScript)?<\/h2>\n<p>You can dismiss alerts with CSS-only patterns using a checkbox, but JavaScript is more robust and accessible.<\/p>\n<h3 class=\"wp-block-heading\" id=\"css-only-dismiss-pattern-checkbox\">CSS-only dismiss pattern (checkbox)<\/h3>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert-toggle\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"a1\"<\/span> <span class=\"hljs-attr\">hidden<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--info\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__content\"<\/span>&gt;<\/span>Newsletter preferences updated.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__close\"<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"a1\"<\/span>&gt;<\/span>\u00d7<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.alert__close<\/span>{ <span class=\"hljs-attribute\">margin-left<\/span>: auto; <span class=\"hljs-attribute\">cursor<\/span>: pointer; <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.25rem<\/span>; <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1<\/span>; }\n<span class=\"hljs-selector-class\">.alert-toggle<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> + <span class=\"hljs-selector-class\">.alert<\/span>{ <span class=\"hljs-attribute\">display<\/span>:none; }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Limitation: the close control is a <code>label<\/code>, not a button, and state handling is awkward. Use it for simple demos or static pages.<\/p>\n<h3 class=\"wp-block-heading\" id=\"progressive-enhancement-js-recommended\">Progressive enhancement JS (recommended)<\/h3>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--warning\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"polite\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__content\"<\/span>&gt;<\/span>Your trial ends in 2 days.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__close\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Dismiss alert\"<\/span>&gt;<\/span>\u00d7<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">'click'<\/span>, (e) =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> btn = e.target.closest(<span class=\"hljs-string\">'.alert__close'<\/span>);\n  <span class=\"hljs-keyword\">if<\/span> (!btn) <span class=\"hljs-keyword\">return<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> alert = btn.closest(<span class=\"hljs-string\">'.alert'<\/span>);\n  <span class=\"hljs-keyword\">if<\/span> (alert) alert.remove();\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"how-do-you-style-links-icons-and-actions-inside-an-alert\">How do you style links, icons, and actions inside an alert?<\/h2>\n<p>Use a flex layout with a gap, define link colors per variant, and keep actions aligned to the right on wider screens.<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.alert__icon<\/span>{ <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> auto; <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">1.25rem<\/span>; <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">1.25rem<\/span>; <span class=\"hljs-attribute\">margin-top<\/span>: .<span class=\"hljs-number\">15rem<\/span>; }\n<span class=\"hljs-selector-class\">.alert<\/span> <span class=\"hljs-selector-tag\">a<\/span>{ <span class=\"hljs-attribute\">color<\/span>: inherit; <span class=\"hljs-attribute\">text-decoration<\/span>: underline; <span class=\"hljs-attribute\">text-underline-offset<\/span>: .<span class=\"hljs-number\">15em<\/span>; }\n<span class=\"hljs-selector-class\">.alert__actions<\/span>{ <span class=\"hljs-attribute\">margin-left<\/span>: auto; <span class=\"hljs-attribute\">display<\/span>: flex; <span class=\"hljs-attribute\">gap<\/span>: .<span class=\"hljs-number\">5rem<\/span>; <span class=\"hljs-attribute\">align-items<\/span>: center; }\n<span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">640px<\/span>){ <span class=\"hljs-selector-class\">.alert<\/span>{ <span class=\"hljs-attribute\">align-items<\/span>: center; } }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"how-do-you-style-inline-form-error-messages-with-css\">How do you style inline form error messages with CSS?<\/h2>\n<p>Form errors work best as field-level messages plus an optional error summary at the top. A field-level css error message should tell the user what to fix, and it should be linked to the input with ARIA.<\/p>\n<h3 class=\"wp-block-heading\" id=\"field-level-css-error-message-pattern\">Field-level css error message pattern<\/h3>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"email\"<\/span>&gt;<\/span>Email<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"email\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"email\"<\/span> <span class=\"hljs-attr\">aria-describedby<\/span>=<span class=\"hljs-string\">\"email-error\"<\/span> <span class=\"hljs-attr\">aria-invalid<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"field-error\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"email-error\"<\/span>&gt;<\/span>Enter a valid email address, like name@domain.com.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.field-error<\/span>{ <span class=\"hljs-attribute\">margin<\/span>: .<span class=\"hljs-number\">25rem<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--error-tx); <span class=\"hljs-attribute\">font-size<\/span>: .<span class=\"hljs-number\">95rem<\/span>; }\n<span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-attr\">&#91;aria-invalid=<span class=\"hljs-string\">\"true\"<\/span>]<\/span>{ <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--error-bd); <span class=\"hljs-attribute\">outline-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--error-bd); }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3 class=\"wp-block-heading\" id=\"error-summary-pattern\">Error summary pattern<\/h3>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--error\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"alert\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"assertive\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__title\"<\/span>&gt;<\/span>Fix 2 errors<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#email\"<\/span>&gt;<\/span>Email is invalid<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#password\"<\/span>&gt;<\/span>Password is too short<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"what-are-css-alerts%3F\">What Are CSS Alerts?<\/h2>\n<p>CSS alerts are styled HTML messages that communicate feedback, like success, info, warning, or error states. You can render them inline in a page, pin them as a banner, or show them as a toast. Alerts are not the same as modals, which block the page, or toasts, which usually auto-dismiss. Use ARIA live regions when the message appears dynamically.<\/p>\n<p>CSS alerts are classified into 4 main categories:<\/p>\n<ul class=\"wp-block-list\">\n<li>Danger\/Error (Red)<\/li>\n<li>Warning (Yellow\/orange)<\/li>\n<li>Information (Blue)<\/li>\n<li>Success (Green)<\/li>\n<\/ul>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-10-09\/what-are-css-alerts.jpeg\" alt=\"What Are CSS Alerts?\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\"><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"best-28-css-alerts\">Best 28 CSS Alerts<\/h2>\n<p>Whether you are looking for CSS-only alerts, JavaScript-animated ones, or just some beautiful styles, check our list below:<\/p>\n<h2 class=\"wp-block-heading\" id=\"css-alerts-examples-you-can-copy\">CSS alerts examples you can copy<\/h2>\n<p>Choose an alert pattern based on where it appears and how urgent it is. Inline alerts work best near the content they refer to, banners are good for site-wide notices, and toasts fit non-blocking updates like &#8220;Saved&#8221;. Modal-style patterns are better for confirmations, but they are not a drop-in replacement for alerts.<\/p>\n\n<ul class=\"wp-block-list\"><li><a href=\"#1.-closable-pure-css-alerts\">Pure CSS alerts<\/a><\/li>\n<li><a href=\"#2.-beautiful-%26-basic-css-only-alert\">Modal-style patterns<\/a><\/li>\n<li><a href=\"#7.-tailwind-css-alerts\">Framework-based alerts<\/a><\/li><\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"1.-closable-pure-css-alerts\">1. Closable Pure CSS Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaVBpYj\" data-src=\"\/\/codepen.io\/anon\/embed\/BaVBpYj?height=450&amp;theme-id=1&amp;slug-hash=BaVBpYj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaVBpYj\" title=\"CodePen Embed BaVBpYj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BaVBpYj\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>These light-themed alerts are using only CSS. Dismissal is done by clicking the alert area or the &#8220;x&#8221; icon, which is fine for demos, but do not make click-to-dismiss the only way to clear a critical message.<\/p>\n<p>Copy idea: pair a visible close <code>&lt;button&gt;<\/code> with a small JS handler (see the dismissible section above), or use a checkbox pattern if you need CSS-only.<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert--success\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">aria-live<\/span>=<span class=\"hljs-string\">\"polite\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__content\"<\/span>&gt;<\/span>Profile updated.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert__close\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Dismiss alert\"<\/span>&gt;<\/span>\u00d7<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3 class=\"wp-block-heading\" id=\"2.-beautiful-%26-basic-css-only-alert\">2. Beautiful &amp; Basic CSS Only Alert<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjZPBPM\" data-src=\"\/\/codepen.io\/anon\/embed\/JjZPBPM?height=450&amp;theme-id=1&amp;slug-hash=JjZPBPM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjZPBPM\" title=\"CodePen Embed JjZPBPM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/JjZPBPM\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>This is a modal-style pattern built with CSS and no JavaScript. It uses <code>:target<\/code> to toggle the popup, so the URL hash changes, and the back button can close it.<\/p>\n<p>Limitation: you do not get a real focus trap or ESC-to-close without JavaScript. Best for demos and simple content, not critical flows like payments or authentication.<\/p>\n<h3 class=\"wp-block-heading\" id=\"3.-modal-alert-overlay-in-pure-css\">3. Modal Alert Overlay In Pure CSS<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWXgXRy\" data-src=\"\/\/codepen.io\/anon\/embed\/MWXgXRy?height=450&amp;theme-id=1&amp;slug-hash=MWXgXRy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWXgXRy\" title=\"CodePen Embed MWXgXRy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWXgXRy\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>This is a checkbox-hack modal dialog, not a standard inline CSS alert. It uses a <code>checkbox<\/code> input and <code>:checked<\/code> to show and hide the overlay.<\/p>\n<p>If you use it, make sure the open and close controls are keyboard reachable, and consider adding JavaScript for focus management and ESC-to-close.<\/p>\n<p>It&#8217;s a technique used for many CSS elements with 2 states, such as <a href=\"https:\/\/alvarotrigo.com\/blog\/hamburger-menu-css\/\">hamburger menus<\/a> or <a href=\"https:\/\/alvarotrigo.com\/blog\/toggle-switch-css\/\">CSS toggles switches<\/a>.<\/p>\n<h3 class=\"wp-block-heading\" id=\"4.-material-design-multi-color-css-alerts\">4. Material Design Multi-color CSS Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYrBbzj\" data-src=\"\/\/codepen.io\/anon\/embed\/vYrBbzj?height=450&amp;theme-id=1&amp;slug-hash=vYrBbzj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYrBbzj\" title=\"CodePen Embed vYrBbzj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vYrBbzj\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Modern, colorful CSS alerts inspired by Material UI.<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Variants:<\/strong> multi-color status styles (success, info, warning, error).<\/li>\n<li><strong>Dependencies:<\/strong> <a href=\"https:\/\/materialdesignicons.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Material Design Icons<\/a>.<\/li>\n<li><strong>Best for:<\/strong> inline notifications and banners where icons help scanning.<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"5.-basic-pure-css-alerts\">5. Basic Pure CSS Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYKOgyy\" data-src=\"\/\/codepen.io\/anon\/embed\/eYKOgyy?height=450&amp;theme-id=1&amp;slug-hash=eYKOgyy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYKOgyy\" title=\"CodePen Embed eYKOgyy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/eYKOgyy\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>If you are looking for simplicity, then these alerts are for you. They don&#8217;t make use of any external vendor, no framework, no JS, and no icons.<\/p>\n<p>If you want a reusable version, map these styles to the starter kit idea: one <code>.alert<\/code> plus <code>.alert--success\/.alert--info\/.alert--warning\/.alert--error<\/code>.<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* Base + modifiers, see the starter kit above *\/<\/span>\n<span class=\"hljs-selector-class\">.alert<\/span>{ <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>; <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>; <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid transparent; }\n<span class=\"hljs-selector-class\">.alert--success<\/span>{ <span class=\"hljs-attribute\">background<\/span>:<span class=\"hljs-number\">#ecfdf5<\/span>; <span class=\"hljs-attribute\">border-color<\/span>:<span class=\"hljs-number\">#6ee7b7<\/span>; <span class=\"hljs-attribute\">color<\/span>:<span class=\"hljs-number\">#065f46<\/span>; }\n<span class=\"hljs-selector-class\">.alert--error<\/span>{ <span class=\"hljs-attribute\">background<\/span>:<span class=\"hljs-number\">#fef2f2<\/span>; <span class=\"hljs-attribute\">border-color<\/span>:<span class=\"hljs-number\">#fca5a5<\/span>; <span class=\"hljs-attribute\">color<\/span>:<span class=\"hljs-number\">#7f1d1d<\/span>; }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3 class=\"wp-block-heading\" id=\"6.-light-alerts-in-pure-css\">6. Light Alerts In Pure CSS<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWzKoOV\" data-src=\"\/\/codepen.io\/anon\/embed\/NWzKoOV?height=450&amp;theme-id=1&amp;slug-hash=NWzKoOV&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWzKoOV\" title=\"CodePen Embed NWzKoOV\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/NWzKoOV\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Light, minimal CSS alerts that work well on bright UIs. Compared to item 5, these lean more on subtle borders and softer fills.<\/p>\n<p>Quick check: keep link styling obvious (underline or higher contrast color), and verify contrast for warning backgrounds where yellow can get hard to read.<\/p>\n<h3 class=\"wp-block-heading\" id=\"7.-tailwind-css-alerts\">7. Tailwind CSS Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdKbRBN\" data-src=\"\/\/codepen.io\/anon\/embed\/mdKbRBN?height=450&amp;theme-id=1&amp;slug-hash=mdKbRBN&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdKbRBN\" title=\"CodePen Embed mdKbRBN\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/mdKbRBN\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>This is a TailwindCSS example, so it depends on Tailwind utility classes. If you want vanilla CSS alerts, use the starter kit above and copy the base <code>.alert<\/code> styles.<\/p>\n<p>This example shows how to display multiple alerts at the bottom of the page, with different colors and icons for error, success, info, and warning.<\/p>\n<h3 class=\"wp-block-heading\" id=\"8.-modal-dialog-alert-message-with-css\">8. Modal Dialog Alert Message With CSS<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyKbKLm\" data-src=\"\/\/codepen.io\/anon\/embed\/dyKbKLm?height=450&amp;theme-id=1&amp;slug-hash=dyKbKLm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyKbKLm\" title=\"CodePen Embed dyKbKLm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/dyKbKLm\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Another CSS only solution to create a stylish alert modal.<\/p>\n<p>The modals show a box with some content and a closing button.<\/p>\n<p>To close the modal you can click on the dark overlay or the closing button.<\/p>\n<p>This example uses the same technique as other two-state components. It uses a <code>checkbox<\/code> to track the state with CSS.<\/p>\n<h3 class=\"wp-block-heading\" id=\"9.-timed-vanilla-js-and-css-alert\">9. Timed Vanilla JS and CSS Alert<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzvKNvo\" data-src=\"\/\/codepen.io\/anon\/embed\/YzvKNvo?height=450&amp;theme-id=1&amp;slug-hash=YzvKNvo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzvKNvo\" title=\"CodePen Embed YzvKNvo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzvKNvo\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>A truly modern alert that displays a notification on the top right corner of the page.<\/p>\n<p>The alert times out and displays an animated progress bar to show the remaining time.<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Talking about progress bars&#8230; check out these <a href=\"https:\/\/alvarotrigo.com\/blog\/progress-bar-css\/\">amazing CSS progress bars<\/a>.<\/p>\n<\/blockquote>\n<p>The design looks super modern and, best of all, it doesn&#8217;t use any external components! Pure CSS and Vanilla JS make the magic.<\/p>\n<h3 class=\"wp-block-heading\" id=\"10.-multiple-simple-css-only-modals\">10. Multiple Simple CSS Only Modals<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKePBPd\" data-src=\"\/\/codepen.io\/anon\/embed\/KKePBPd?height=450&amp;theme-id=1&amp;slug-hash=KKePBPd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKePBPd\" title=\"CodePen Embed KKePBPd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKePBPd\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>These alert modal dialogs make intelligent use of the <code>:target<\/code> pseudoelement to control the status of the modal.<\/p>\n<p>The alerts get displayed when clicking (and focusing) the texts.<\/p>\n<h3 class=\"wp-block-heading\" id=\"11.-large-css-alert-notification\">11. Large CSS Alert Notification<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYaONja\" data-src=\"\/\/codepen.io\/anon\/embed\/zYaONja?height=450&amp;theme-id=1&amp;slug-hash=zYaONja&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYaONja\" title=\"CodePen Embed zYaONja\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zYaONja\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>These alerts are a bit more original than others.<\/p>\n<p>If you are looking for a big notification with some personality, these might be for you.<\/p>\n<p>They don&#8217;t use any external vendor library and make use of SVG icons.<\/p>\n<p>jQuery is fully optional. It only adds the closing feature, but that can be replaced if necessary for plain JS or even pure CSS.<\/p>\n<h3 class=\"wp-block-heading\" id=\"12.-timed-jquery-text-alerts\">12. Timed jQuery Text Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYKOgMy\" data-src=\"\/\/codepen.io\/anon\/embed\/eYKOgMy?height=450&amp;theme-id=1&amp;slug-hash=eYKOgMy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYKOgMy\" title=\"CodePen Embed eYKOgMy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/eYKOgMy\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>If you are ok with using a bit of JS (or jQuery), these are some beautiful alerts.<\/p>\n<p>Unlike others, these alerts get stacked underneath each other at the very top of the page.<\/p>\n<p>I personally think it looks great and I like it more than the side notifications, especially for important messages or errors.<\/p>\n<p>There&#8217;s a bit of jQuery involved, but you can easily turn it into Vanilla JS.<\/p>\n<h3 class=\"wp-block-heading\" id=\"13.-colored-css-only-alerts-with-tailwindcss\">13. Colored CSS Only Alerts with TailwindCSS<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKePaeq\" data-src=\"\/\/codepen.io\/anon\/embed\/KKePaeq?height=450&amp;theme-id=1&amp;slug-hash=KKePaeq&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKePaeq\" title=\"CodePen Embed KKePaeq\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKePaeq\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>For those who are into flat design and make use of TailwindCSS, these alerts can be for you.<\/p>\n<p>I personally like the selection of colors, the modern feel, and the simplicity of their design.<\/p>\n<h3 class=\"wp-block-heading\" id=\"14.-gaming-css-closable-alert\">14. Gaming CSS Closable Alert<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poKzROr\" data-src=\"\/\/codepen.io\/anon\/embed\/poKzROr?height=450&amp;theme-id=1&amp;slug-hash=poKzROr&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poKzROr\" title=\"CodePen Embed poKzROr\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/poKzROr\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>For a less serious look and feel this alert is a great candidate.<\/p>\n<p>It&#8217;s big, it&#8217;s very original and it&#8217;s done <strong>entirely with CSS<\/strong>.<\/p>\n<h3 class=\"wp-block-heading\" id=\"15.-bottom-right-tailwind-%2B-alpine-alerts\">15. Bottom Right Tailwind + Alpine Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLEBgPX\" data-src=\"\/\/codepen.io\/anon\/embed\/yLEBgPX?height=450&amp;theme-id=1&amp;slug-hash=yLEBgPX&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLEBgPX\" title=\"CodePen Embed yLEBgPX\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLEBgPX\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>For those who like using the latest trends and make use of TailwindCSS and Alpine.js.<\/p>\n<p>Simple use of alert notifications that get displayed on the bottom right.<\/p>\n<p>Each type of alert has its icon and they replace each other when clicked continuously.<\/p>\n<h3 class=\"wp-block-heading\" id=\"16.-bootstrap-5-alert-message\">16. Bootstrap 5 Alert Message<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNyeRJo\" data-src=\"\/\/codepen.io\/anon\/embed\/WNyeRJo?height=450&amp;theme-id=1&amp;slug-hash=WNyeRJo&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNyeRJo\" title=\"CodePen Embed WNyeRJo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNyeRJo\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Example of a simple alert using <a href=\"https:\/\/getbootstrap.com\/docs\/5.2\/components\/alerts\/\" target=\"_blank\" rel=\"noopener nofollow\">Bootstrap 5<\/a>.<\/p>\n<p>The alert message accepts a title and a body, so it comes in handy for that kind of alert that requires a bit more context.<\/p>\n<h3 class=\"wp-block-heading\" id=\"17.-bootstrap-4-alerts-(css-only)\">17. Bootstrap 4 Alerts (CSS Only)<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOKNyYy\" data-src=\"\/\/codepen.io\/anon\/embed\/jOKNyYy?height=450&amp;theme-id=1&amp;slug-hash=jOKNyYy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOKNyYy\" title=\"CodePen Embed jOKNyYy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/jOKNyYy\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>A great solution for developers using <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/alerts\/\" target=\"_blank\" rel=\"noopener nofollow\">Bootstrap 4<\/a>.<\/p>\n<p>In this case, there&#8217;s no JavaScript involved and the alerts only get animated on page load.<\/p>\n<p>This can come in handy when displaying them server-side after form submission, for example.<\/p>\n<h3 class=\"wp-block-heading\" id=\"18.-alerts-with-icons-%26-text-messages\">18. Alerts With Icons &amp; Text Messages<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExRYZQR\" data-src=\"\/\/codepen.io\/anon\/embed\/ExRYZQR?height=450&amp;theme-id=1&amp;slug-hash=ExRYZQR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExRYZQR\" title=\"CodePen Embed ExRYZQR\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ExRYZQR\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>A very simple implementation of an alert component.<\/p>\n<p>They are made with CSS and the only external component they use is FontAwesome for the icons.<\/p>\n<p>They use a white background for the alert message and add a touch of color on the icon background to define the type of alert it is.<\/p>\n<h3 class=\"wp-block-heading\" id=\"19.-foundation-framework-alert-message\">19. Foundation Framework Alert Message<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYrBgdq\" data-src=\"\/\/codepen.io\/anon\/embed\/vYrBgdq?height=450&amp;theme-id=1&amp;slug-hash=vYrBgdq&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYrBgdq\" title=\"CodePen Embed vYrBgdq\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vYrBgdq\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>If you are working with the <a href=\"https:\/\/get.foundation\/sites\/docs-v5\/components\/alert_boxes.html\" target=\"_blank\" rel=\"noopener nofollow\">Foundation framework<\/a>, then you might want to consider these alerts.<\/p>\n<p>They time out after some time and can get stacked on top of each other when triggered continuously.<\/p>\n<p>They enter from the bottom right with fast slide animation.<\/p>\n<h3 class=\"wp-block-heading\" id=\"20.-bootstrap-3.3-alerts\">20. Bootstrap 3.3 Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzvKNEM\" data-src=\"\/\/codepen.io\/anon\/embed\/YzvKNEM?height=450&amp;theme-id=1&amp;slug-hash=YzvKNEM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzvKNEM\" title=\"CodePen Embed YzvKNEM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzvKNEM\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>For those who are still using <a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/components\/#alerts\" target=\"_blank\" rel=\"noopener nofollow\">Bootstrap 3<\/a>.<\/p>\n<p>These alerts will stack on top of each other with a small and cute animation.<\/p>\n<h3 class=\"wp-block-heading\" id=\"21.-colored-gradient-tailwind-css-alert\">21. Colored Gradient Tailwind CSS Alert<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRGKrGg\" data-src=\"\/\/codepen.io\/anon\/embed\/GRGKrGg?height=450&amp;theme-id=1&amp;slug-hash=GRGKrGg&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRGKrGg\" title=\"CodePen Embed GRGKrGg\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/GRGKrGg\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>A lovely collection of CSS alert examples.<\/p>\n<p>They use <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Tailwind CSS<\/a> framework and some beautiful and subtle gradients and shadows.<\/p>\n<p>Whether you use Tailwind CSS or not, you can take the alert styles and apply them to any other alert to step up their design.<\/p>\n<h3 class=\"wp-block-heading\" id=\"22.-basic-alert-on-vanilla-js-%26-css\">22. Basic Alert on Vanilla JS &amp; CSS<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLEBgqz\" data-src=\"\/\/codepen.io\/anon\/embed\/yLEBgqz?height=450&amp;theme-id=1&amp;slug-hash=yLEBgqz&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLEBgqz\" title=\"CodePen Embed yLEBgqz\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLEBgqz\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Simple alert with no frameworks and vanilla JS.<\/p>\n<p>Nothing too fancy about it, but gets the job done with practically just CSS.<\/p>\n<h3 class=\"wp-block-heading\" id=\"23.-status-alerts\">23. Status Alerts<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGKbgjw\" data-src=\"\/\/codepen.io\/anon\/embed\/bGKbgjw?height=450&amp;theme-id=1&amp;slug-hash=bGKbgjw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGKbgjw\" title=\"CodePen Embed bGKbgjw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/bGKbgjw\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Example of some status alerts that you can use on your website.<\/p>\n<p>They use a bit of JavaScript and FontAwesome for the icons.<\/p>\n<h3 class=\"wp-block-heading\" id=\"24.-scale-effect-alert\">24. Scale Effect Alert<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzvKNjo\" data-src=\"\/\/codepen.io\/anon\/embed\/YzvKNjo?height=450&amp;theme-id=1&amp;slug-hash=YzvKNjo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzvKNjo\" title=\"CodePen Embed YzvKNjo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzvKNjo\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>This alert component makes use of an elastic zoom effect to display the notification.<\/p>\n<p>The notification alert will timeout after some time.<\/p>\n<p>It also uses a progress indicator to show when the alert will disappear.<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Learn more about how to <a href=\"https:\/\/alvarotrigo.com\/blog\/wait-1-second-javascript\/\">create a 1-second timeout in JavaScript<\/a>.<\/p>\n<\/blockquote>\n<h3 class=\"wp-block-heading\" id=\"25.-large-modern-css-alert-components\">25. Large Modern CSS Alert Components<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJELWoM\" data-src=\"\/\/codepen.io\/anon\/embed\/OJELWoM?height=450&amp;theme-id=1&amp;slug-hash=OJELWoM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJELWoM\" title=\"CodePen Embed OJELWoM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/OJELWoM\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Use this CSS code to create some modern alert messages.<\/p>\n<p>It uses FontAwesome to display icons for each kind of alert message.<\/p>\n<h3 class=\"wp-block-heading\" id=\"26.-information-css-only-alert\">26. Information CSS Only Alert<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExRYZde\" data-src=\"\/\/codepen.io\/anon\/embed\/ExRYZde?height=450&amp;theme-id=1&amp;slug-hash=ExRYZde&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExRYZde\" title=\"CodePen Embed ExRYZde\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ExRYZde\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Information kind of alert.<\/p>\n<p>It gets closed when clicking on the X and uses an SVG image for the information icon.<\/p>\n<h3 class=\"wp-block-heading\" id=\"27.-warning-css-alert-message\">27. Warning CSS Alert Message<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poKzKGJ\" data-src=\"\/\/codepen.io\/anon\/embed\/poKzKGJ?height=450&amp;theme-id=1&amp;slug-hash=poKzKGJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poKzKGJ\" title=\"CodePen Embed poKzKGJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/poKzKGJ\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>Warning type of alert.<\/p>\n<p>It gets closed when clicking on the X and uses an SVG image for the warning icon.<\/p>\n<h3 class=\"wp-block-heading\" id=\"28.-model-alert-via-%3Atarget-in-css\">28. Model Alert Via <code>:target<\/code> In CSS<\/h3>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZERzjEB\" data-src=\"\/\/codepen.io\/anon\/embed\/ZERzjEB?height=450&amp;theme-id=1&amp;slug-hash=ZERzjEB&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZERzjEB\" title=\"CodePen Embed ZERzjEB\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<div class=\"wp-block-button\">\n<a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZERzjEB\" target=\"_blank\" title=\"Preview\" rel=\"noopener nofollow\">Preview<\/a>\n<\/div>\n\n<\/div>\n\n<p>A very basic modal alert built entirely on CSS.<\/p>\n<p>The dialog uses the bare minimum style but it still looks modern and totally usable.<\/p>\n<p>The modal comes with a heading and text content and its wrapper uses some box shadow.<\/p>\n<p>It uses a dark overlay when opened that closes the modal when it gets clicked.<\/p>\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n<h3 class=\"wp-block-heading\" id=\"are-css-alerts-the-same-as-javascript-alerts\">Are CSS alerts the same as JavaScript alerts?<\/h3>\n<p>No. CSS alerts are styled HTML elements that look like notifications, while JavaScript <code>alert()<\/code> is a browser dialog controlled by the browser UI. CSS alerts are more customizable and can be inline, banners, or toasts, but they need HTML and sometimes JavaScript for dismissal.<\/p>\n<h3 class=\"wp-block-heading\" id=\"should-i-use-role-alert-on-every-alert\">Should I use <code>role=\"alert\"<\/code> on every alert?<\/h3>\n<p>No. Use <code>role=\"alert\"<\/code> for urgent, time-sensitive messages like form submission failures. For non-critical updates like &#8220;Saved&#8221;, use <code>role=\"status\"<\/code> or <code>aria-live=\"polite\"<\/code>. Overusing <code>role=\"alert\"<\/code> can annoy screen reader users because it interrupts reading.<\/p>\n<h3 class=\"wp-block-heading\" id=\"can-a-dismissible-css-alert-work-without-javascript\">Can a dismissible CSS alert work without JavaScript?<\/h3>\n<p>Yes. You can use a CSS-only pattern like a checkbox toggle to hide the alert when a close label is clicked. It works for simple cases, but it has limitations for accessibility and state management. JavaScript dismissal is usually more reliable for real apps.<\/p>\n<h3 class=\"wp-block-heading\" id=\"how-do-i-style-a-css-error-message-for-a-form-field\">How do I style a CSS error message for a form field?<\/h3>\n<p>A good field error includes clear styling plus an accessible relationship between the input and message. Use <code>aria-describedby<\/code> on the input pointing to the error text ID, and style the message with spacing and readable contrast. Write specific copy like &#8220;Password must be 8+ characters&#8221;.<\/p>\n<h2 class=\"wp-block-heading\" id=\"how-do-i-show-an-alert-in-html%3F\">How do I show an alert in HTML?<\/h2>\n<p>HTML doesn&#8217;t provide a way to show alerts. But you can make use of the <code>alert<\/code> function in JavaScript to do so.<\/p>\n<p>For more information on alerts, check <a href=\"https:\/\/alvarotrigo.com\/blog\/javascript-alert\/\">how to use JavaScript alerts<\/a>.<\/p>\n<p>Here&#8217;s a quick example:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">&lt;button onclick=<span class=\"hljs-string\">\"alert('Test');\"<\/span>&gt;Click here&lt;<span class=\"hljs-regexp\">\/button&gt;\n<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/create-a-slider-with-pure-CSS\/\">Create a Slider With Pure CSS<\/a><\/li>\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">Pure CSS Text Animations<\/a><\/li>\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/html-css-tabs\/\">HTML and CSS tabs<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Explore 28 CSS alerts (success, error, warning, info) with copy-paste HTML\/CSS. Includes alert CSS variants, dismissible styles, and tips.<\/p>\n","protected":false},"author":1,"featured_media":4896,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9],"class_list":["post-4897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4897"}],"version-history":[{"count":3,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4897\/revisions"}],"predecessor-version":[{"id":19697,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4897\/revisions\/19697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4896"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}