Alert UI Components

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-blue-800 rounded-lg">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34874 20.9425 6.80691 19.0678 4.93219C17.1931 3.05746 14.6513 2.00295 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C19.9976 14.121 19.1539 16.1544 17.6542 17.6542C16.1544 19.1539 14.121 19.9976 12 20ZM12 11.5C11.7348 11.5 11.4804 11.6054 11.2929 11.7929C11.1054 11.9804 11 12.2348 11 12.5V15.5C11 15.7652 11.1054 16.0196 11.2929 16.2071C11.4804 16.3946 11.7348 16.5 12 16.5C12.2652 16.5 12.5196 16.3946 12.7071 16.2071C12.8946 16.0196 13 15.7652 13 15.5V12.5C13 12.2348 12.8946 11.9804 12.7071 11.7929C12.5196 11.6054 12.2652 11.5 12 11.5ZM12 7.5C11.7528 7.5 11.5111 7.57331 11.3055 7.71066C11.1 7.84801 10.9398 8.04324 10.8452 8.27165C10.7505 8.50005 10.7258 8.75139 10.774 8.99386C10.8223 9.23634 10.9413 9.45907 11.1161 9.63388C11.2909 9.8087 11.5137 9.92775 11.7561 9.97598C11.9986 10.0242 12.25 9.99946 12.4784 9.90485C12.7068 9.81024 12.902 9.65002 13.0393 9.44446C13.1767 9.2389 13.25 8.99723 13.25 8.75C13.25 8.41848 13.1183 8.10054 12.8839 7.86612C12.6495 7.6317 12.3315 7.5 12 7.5Z" fill="#1890FF"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-blue-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="#D0F2FF"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark blue info alert banner with dismiss button

A horizontal notification banner with a blue background displaying an info icon, the message "This is an Info alert — check it out!", and a close (X) button on the right. It conveys a neutral informational status message across the full width of the container.

Alert generator

Alert from Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-orange-50 border-l-4 border-orange-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-orange-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-orange-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Orange Dismissible Notification Banner

A single-line notification banner with a light peach background, orange left accent border, short text message, and a close (X) icon on the right. It conveys a status or informational message and can be dismissed.

Alert generator

Alert from Artemis Dashboard

<div class="py-8 px-6">
  <div class="p-6 bg-danger-light rounded-end border-4 border-start border-danger">
    <div class="d-flex align-items-center justify-content-between bg-danger-light">
      <h3 class="h6 mb-0 fw-bold text-danger-dark">Example for Banner</h3>
      <button class="btn p-0 text-danger-dark">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Alert from Artemis Dashboard

Bulma

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification is-primary is-light">
    <h3 class="is-size-5 has-text-weight-bold">Example for Banner</h3>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Alert from Artemis Dashboard

Material-UI

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.error[50],
            borderLeft: 4,
            borderColor: theme.palette.error[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.error[800]
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93341 8.00008L13.1334 3.80008C13.4001 3.53341 13.4001 3.13341 13.1334 2.86675C12.8667 2.60008 12.4667 2.60008 12.2001 2.86675L8.00008 7.06675L3.80008 2.86675C3.53341 2.60008 3.13341 2.60008 2.86675 2.86675C2.60008 3.13341 2.60008 3.53341 2.86675 3.80008L7.06675 8.00008L2.86675 12.2001C2.73341 12.3334 2.66675 12.4667 2.66675 12.6667C2.66675 13.0667 2.93341 13.3334 3.33341 13.3334C3.53341 13.3334 3.66675 13.2667 3.80008 13.1334L8.00008 8.93341L12.2001 13.1334C12.3334 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13.0001 13.2667 13.1334 13.1334C13.4001 12.8667 13.4001 12.4667 13.1334 12.2001L8.93341 8.00008Z" fill="#5D221B"/></svg>,
        ...props.content
    }

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Alert from Flex

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-yellow-100 border border-yellow-200 rounded-md">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg class="relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 10.6667C7.86814 10.6667 7.73925 10.7058 7.62962 10.779C7.51999 10.8523 7.43454 10.9564 7.38408 11.0782C7.33362 11.2 7.32042 11.3341 7.34614 11.4634C7.37187 11.5927 7.43536 11.7115 7.52859 11.8047C7.62183 11.898 7.74062 11.9615 7.86994 11.9872C7.99926 12.0129 8.1333 11.9997 8.25512 11.9493C8.37694 11.8988 8.48106 11.8133 8.55431 11.7037C8.62757 11.5941 8.66667 11.4652 8.66667 11.3333C8.66667 11.1565 8.59643 10.987 8.4714 10.8619C8.34638 10.7369 8.17681 10.6667 8 10.6667ZM15.1133 11.6467L9.74667 2.31334C9.5732 2.00235 9.31986 1.74331 9.01279 1.56298C8.70573 1.38266 8.35609 1.28758 8 1.28758C7.6439 1.28758 7.29426 1.38266 6.9872 1.56298C6.68014 1.74331 6.42679 2.00235 6.25333 2.31334L0.919999 11.6467C0.740529 11.9493 0.644094 12.294 0.640428 12.6459C0.636763 12.9977 0.725997 13.3444 0.899123 13.6507C1.07225 13.9571 1.32314 14.2123 1.62645 14.3907C1.92977 14.5691 2.27479 14.6643 2.62667 14.6667H13.3733C13.728 14.6702 14.0773 14.5793 14.3853 14.4033C14.6933 14.2273 14.9489 13.9726 15.126 13.6652C15.3031 13.3579 15.3952 13.0089 15.393 12.6542C15.3908 12.2995 15.2943 11.9518 15.1133 11.6467ZM13.96 12.98C13.9016 13.084 13.8163 13.1704 13.7131 13.2302C13.6099 13.29 13.4926 13.321 13.3733 13.32H2.62667C2.50741 13.321 2.39006 13.29 2.28688 13.2302C2.18369 13.1704 2.09843 13.084 2.04 12.98C1.98149 12.8787 1.95068 12.7637 1.95068 12.6467C1.95068 12.5296 1.98149 12.4147 2.04 12.3133L7.37333 2.98C7.42928 2.8708 7.51427 2.77916 7.61896 2.71516C7.72365 2.65117 7.84397 2.61731 7.96667 2.61731C8.08936 2.61731 8.20968 2.65117 8.31437 2.71516C8.41906 2.77916 8.50405 2.8708 8.56 2.98L13.9267 12.3133C13.9928 12.4132 14.0308 12.5291 14.0367 12.6488C14.0425 12.7684 14.0161 12.8875 13.96 12.9933V12.98ZM8 5.33334C7.82319 5.33334 7.65362 5.40357 7.52859 5.5286C7.40357 5.65362 7.33333 5.82319 7.33333 6V8.66667C7.33333 8.84348 7.40357 9.01305 7.52859 9.13807C7.65362 9.2631 7.82319 9.33334 8 9.33334C8.17681 9.33334 8.34638 9.2631 8.4714 9.13807C8.59643 9.01305 8.66667 8.84348 8.66667 8.66667V6C8.66667 5.82319 8.59643 5.65362 8.4714 5.5286C8.34638 5.40357 8.17681 5.33334 8 5.33334Z" fill="#F59E0B"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="mb-2 font-medium text-sm text-yellow-900">Attention alert example</h3>
              <p class="font-medium text-sm text-yellow-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ultrices lectus, eget auctor est vulputate vel.</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.94001 8L13.14 3.80667C13.2655 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2655 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4891 2.66394 12.3189 2.73447 12.1933 2.86L8.00001 7.06L3.80668 2.86C3.68114 2.73447 3.51088 2.66394 3.33334 2.66394C3.15581 2.66394 2.98555 2.73447 2.86001 2.86C2.73447 2.98554 2.66395 3.1558 2.66395 3.33333C2.66395 3.51087 2.73447 3.68113 2.86001 3.80667L7.06001 8L2.86001 12.1933C2.79752 12.2553 2.74793 12.329 2.71408 12.4103C2.68024 12.4915 2.66281 12.5787 2.66281 12.6667C2.66281 12.7547 2.68024 12.8418 2.71408 12.9231C2.74793 13.0043 2.79752 13.078 2.86001 13.14C2.92199 13.2025 2.99572 13.2521 3.07696 13.2859C3.1582 13.3198 3.24534 13.3372 3.33334 13.3372C3.42135 13.3372 3.50849 13.3198 3.58973 13.2859C3.67097 13.2521 3.7447 13.2025 3.80668 13.14L8.00001 8.94L12.1933 13.14C12.2553 13.2025 12.3291 13.2521 12.4103 13.2859C12.4915 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8418 13.3198 12.9231 13.2859C13.0043 13.2521 13.078 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.2859 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.2859 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94001 8Z" fill="#784D05"></path>
            </svg>
          </a>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Attention alert banner with warning icon and dismiss button

A full-width yellow-toned alert banner displaying a bold heading 'Attention alert example', supporting body text, a warning triangle icon, and a close (X) control at the right edge. It conveys a cautionary status message in a single horizontal row.

Alert generator

Alert from Dashy

Dashy

<section class="py-4 overflow-hidden" :class="{'hidden': !open }" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <svg class="relative top-0.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 10H10.75C10.75 9.58579 10.4142 9.25 10 9.25V10ZM10 13.3333H9.25C9.25 13.7475 9.58579 14.0833 10 14.0833V13.3333ZM10.8333 14.0833C11.2475 14.0833 11.5833 13.7475 11.5833 13.3333C11.5833 12.9191 11.2475 12.5833 10.8333 12.5833V14.0833ZM9.16667 9.25C8.75245 9.25 8.41667 9.58579 8.41667 10C8.41667 10.4142 8.75245 10.75 9.16667 10.75V9.25ZM10 5.91667C9.58579 5.91667 9.25 6.25245 9.25 6.66667C9.25 7.08088 9.58579 7.41667 10 7.41667V5.91667ZM10.0083 7.41667C10.4225 7.41667 10.7583 7.08088 10.7583 6.66667C10.7583 6.25245 10.4225 5.91667 10.0083 5.91667V7.41667ZM9.25 10V13.3333H10.75V10H9.25ZM10 14.0833H10.8333V12.5833H10V14.0833ZM10 9.25H9.16667V10.75H10V9.25ZM16.75 10C16.75 13.7279 13.7279 16.75 10 16.75V18.25C14.5563 18.25 18.25 14.5563 18.25 10H16.75ZM10 16.75C6.27208 16.75 3.25 13.7279 3.25 10H1.75C1.75 14.5563 5.44365 18.25 10 18.25V16.75ZM3.25 10C3.25 6.27208 6.27208 3.25 10 3.25V1.75C5.44365 1.75 1.75 5.44365 1.75 10H3.25ZM10 3.25C13.7279 3.25 16.75 6.27208 16.75 10H18.25C18.25 5.44365 14.5563 1.75 10 1.75V3.25ZM10 7.41667H10.0083V5.91667H10V7.41667Z" fill="#B8C1CC"></path>
              </svg>
            </div>
            <div class="flex-1 p-1.5">
              <p class="font-medium">
                <span class="text-transparent bg-clip-text bg-gradient-purple-left">Register now for September office hours:</span>
                <span>WME updates and new features!</span>
              </p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <button x-on:click="open = false" class="relative top-1 text-neutral-300 hover:text-neutral-400">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L3.46967 11.4697ZM12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L12.5303 4.53033ZM4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L4.53033 3.46967ZM11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L11.4697 12.5303ZM4.53033 12.5303L12.5303 4.53033L11.4697 3.46967L3.46967 11.4697L4.53033 12.5303ZM3.46967 4.53033L11.4697 12.5303L12.5303 11.4697L4.53033 3.46967L3.46967 4.53033Z" fill="currentColor"></path>
            </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Announcement Banner with Info Icon and Dismiss Control

A single-line notification banner on a light background with an info icon, a gradient-colored promotional message about September office hours and WME updates, and a close button on the right. It conveys a status or announcement message in a contained card.

Alert generator

Alert from Vendia

Vendia

<section>
  <div class="py-4 bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-center">
        <p class="mr-5 font-medium">This announcement bar can be used to inform visitors of something important.</p>
        <a class="inline-block py-1 px-2 text-sm text-white hover:text-black bg-black hover:bg-white rounded-full transition duration-200" href="#">Dismiss</a>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Gradient announcement bar with dismiss button

A full-width horizontal announcement bar with a yellow-to-blue gradient background, centered message text, and a black pill-shaped Dismiss button on the right. It is used to inform visitors of a site-wide message and can be closed.

Alert generator

Alert from Consulty

Consulty

<div class="fixed top-0 left-0 z-30 w-full" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="w-full py-4 px-5 bg-orange-400 relative" style="background-image: url('consulty-assets/alerts/shapes-background1.png')">
        <p class="tracking-tight text-white text-sm font-medium text-center w-56 sm:w-auto mx-auto">
            <span>A quick announcement goes here.</span>
            <a href="#" class="underline">Add your quick alert here</a>
        </p>
        <div class="absolute right-5 top-1/2 transform -translate-y-1/2">
            <a href="#" x-on:click.prevent="open = false">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M4 12L12 4M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
    </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Orange Announcement Bar with Underlined Link and Close Button

A full-width orange top banner displaying a short announcement message with an underlined inline link and a dismiss (close) icon on the right. The banner uses a subtle patterned background and sits above a plain light gray content area.

Alert generator

Alert from Vendia

Bulma

Vendia

<section>
  <div class="has-background-gradient-primary">
    <div class="section py-4">
      <div class="container">
        <div class="is-flex is-justify-content-center is-align-items-center">
          <p class="mr-5 has-text-weight-medium has-text-dark">This announcement bar can be used to inform visitors of something important.</p>
          <a class="button is-small is-rounded is-dark px-3" href="#">Dismiss</a>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Alert from Consulty

Consulty

<div class="position-fixed top-0 start-0 w-100">
  <div class="py-4 px-12 px-sm-20 bg-primary position-relative overflow-hidden" style="background-image: url('consulty-assets/alerts/shapes-background1.png')">
    <p class="text-white fs-9 fw-medium text-center mb-0"><span>A quick announcement goes here.</span><a class="btn-link p-0 text-white" href="#">Add your quick alert here</a></p>
    <div class="position-absolute end-0 me-5 top-50 translate-middle-y"><a class="btn p-0" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4 12L12 4M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a></div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Alert from Vendia

Vendia

<section>
  <div class="py-4 bg-primary bg-gradient">
    <div class="container">
      <div class="d-flex align-items-center justify-content-center">
        <p class="me-5 fw-medium mb-0">This announcement bar can be used to inform visitors of something important.</p>
        <a class="btn btn-sm py-1 px-2 btn-dark rounded-pill" href="#">Dismiss</a>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Alert from Sirius Dashboard

Sirius Dashboard

<section>
  <div class="alert alert-primary alert-dismissible fade show py-10 px-10 px-lg-20" role="alert">
    <p class="alert-heading fw-bold mb-4">Cookies! &#x1F36A;</p>
    <div class="row">
      <div class="col-12 col-lg-7 mb-5 mb-lg-0">
        <p class="mb-0 mw-2xl">This site uses functional and analytical cookies to offer you an optimal visitor experience. This also enables us to record and analyze visitor behaviour and thereby improve our site and display relevant advertisements. By clicking on accpet you agree with this.</p>
      </div>
      <div class="col-12 col-lg-5">
        <div class="mw-md ms-lg-auto d-flex align-items-center">
          <button class="btn me-2 btn-outline-light" type="button"><span class="me-3">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.375 8.06219L1.875 8.06221" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M10.125 8.06221L7.875 8.06219" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M3.375 3.93724L1.875 3.93716" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M10.125 3.93716L4.875 3.93724" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M4.875 2.81219V5.0622" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7.875 9.18719V6.93719" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span><span>Manage cookies</span></button>
          <button class="btn btn-danger" type="button"><span class="me-3">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.125 3.37524L4.875 8.62501L2.25 6.00024" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span><span>Accept cookies</span></button>
        </div>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Alert from Sirius Dashboard