Examples

Preview examples of banners for annoucements on the Jira service desk portal

We prepared some examples of banners in HTML. Feel free to copy them and adjust them to your needs 😊

If you are not an expert in HTML, don't worry! You can use AI as ChatGPT to make it write HTML code for you 😊

You can use images inside your banners. Remember to use only legal content from sites like Adobe Stock.

Banner with image

<table style="border: 3px dotted red; padding: 10px; text-align: left;">
   <tr>
      <td>
         <img src="https://drive.google.com/uc?export=view&id=1KFPbpwcA3UuJ5L0z1QGRBgnef_vTBiXw" style="width: 120px"></src>
      </td>
      <td>
         We have an issue with database located at <a href="#">https:/192.168.0.102</a> Please <b>do not report a new issue</b> about this problem. We are working on it. For more information call our <a href="#">support</a>.
      </td>
   </tr>
</table>

Banner with nice CSS border

<div style="padding: 10px; border: solid 10px; border-image: repeating-linear-gradient( -75deg, yellow, yellow 10px, black 10px, black 20px) 20; background-color: #E8E8E8" >
   <h3 style="color: red">Read this first</h3>
   Our applications can be unstable today due to migration to the new stack. Contact channels in case of any incidents:
   <style>li:before { content: '\27A4'; margin-left: -20px; margin-right: 10px; } </style>
   <ul>
   <li>Slack channel <a href="#">#help_me</a></li>
   <li>Mobile support at +1 111 222 333 </li>
</div>

Banner with an exclamation mark

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Announcement Banner</title>
    <style>
        .announcement-banner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #ffcccc; /* Red background */
            border: 2px solid #ff0000; /* Red border */
            padding: 10px;
            color: #000; /* Black text */
            font-family: Arial, sans-serif;
            font-size: 16px;
            position: relative;
            text-align: center;
        }

        .announcement-banner .icon {
            margin-bottom: 10px; /* Add space between icon and text */
        }

        .bold-text {
            font-weight: bold; /* Make text bold */
        }
    </style>
</head>
<body>
    <div class="announcement-banner">
        <img class="icon" src="https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/exclamation-triangle-fill.svg" alt="Exclamation mark icon" width="24" height="24">
        <p class="bold-text">Scheduled Maintenance Notice:</p>
        <p>Our system will undergo maintenance on 26th May from 10AM to 2PM. During this period, access to certain features may be limited. We apologize for any inconvenience.</p>
    </div>
</body>
</html>

PreviousAnnouncement banners NextIncident banners

Last updated 7 months ago

<table style="border: 3px dotted red; padding: 10px; text-align: left;"> <tr> <td> <img src="https://drive.google.com/uc?export=view&id=1KFPbpwcA3UuJ5L0z1QGRBgnef_vTBiXw" style="width: 120px"></src> </td> <td> We have an issue with database located at <a href="#">https:/192.168.0.102</a> Please <b>do not report a new issue</b> about this problem. We are working on it. For more information call our <a href="#">support</a>. </td> </tr> </table>

<div style="padding: 10px; border: solid 10px; border-image: repeating-linear-gradient( -75deg, yellow, yellow 10px, black 10px, black 20px) 20; background-color: #E8E8E8" > <h3 style="color: red">Read this first</h3> Our applications can be unstable today due to migration to the new stack. Contact channels in case of any incidents: <style>li:before { content: '\27A4'; margin-left: -20px; margin-right: 10px; } </style> <ul> <li>Slack channel <a href="#">#help_me</a></li> <li>Mobile support at +1 111 222 333 </li> </div>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Announcement Banner</title> <style> .announcement-banner { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #ffcccc; /* Red background */ border: 2px solid #ff0000; /* Red border */ padding: 10px; color: #000; /* Black text */ font-family: Arial, sans-serif; font-size: 16px; position: relative; text-align: center; } .announcement-banner .icon { margin-bottom: 10px; /* Add space between icon and text */ } .bold-text { font-weight: bold; /* Make text bold */ } </style> </head> <body> <div class="announcement-banner"> <img class="icon" src="https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/exclamation-triangle-fill.svg" alt="Exclamation mark icon" width="24" height="24"> <p class="bold-text">Scheduled Maintenance Notice:</p> <p>Our system will undergo maintenance on 26th May from 10AM to 2PM. During this period, access to certain features may be limited. We apologize for any inconvenience.</p> </div> </body> </html>