LogoLogo
👉 Get a free ITSM ebook
Feature Bundle Cloud
Feature Bundle Cloud
  • About Feature Bundle
    • Key features of Feature Bundle for Jira Service Management
    • Key benefits of using Feature Bundle for Jira Service Management
    • ITSM use cases
      • Allow customers to fix their mistakes by Editing Requests
      • Improved Jira Ticket Tracking: Amazon delivery use case
      • Save request as a Jira draft service ticket
      • Escalation and Jira queue management
      • Dynamic Banners about maintenance or holiday
      • Additional values on the customer portal - incident management
      • Request additional information
    • 📚 Glossary
    • ITIL VS ITSM
  • USING APP
    • Get started - app configuration 🚀
    • Announcement banners
      • Examples
    • Incident banners
    • Customer Actions
      • Configuration
      • Assets Integration
      • Supported fields
    • Additional fields
    • Request Steps
    • 📚 Featured Articles
    • 💬 FAQ
    • ⭐️ Best Practices
  • SITE ADMINISTRATOR
    • App installation
    • 🔐Security statement
  • 🤝Support
    • Book a free demo 📆
    • Raise a bug 🐞
    • Share your ideas 💡
    • Appsvio website 💻
  • For Solution Partners
    • Partner Portal
    • Our Partners 🫶
Powered by GitBook

Security

  • Privacy Policy
  • Appsvio Trust Center

appsvio.com © 2025 All rights reserved

On this page

Was this helpful?

Export as PDF
  1. USING APP
  2. Announcement banners

Examples

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

PreviousAnnouncement bannersNextIncident banners

Last updated 1 year ago

Was this helpful?

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 to make it write HTML code for you 😊

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

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>
ChatGPT
Adobe Stock