On this page

Examples

Sharing news and announcements on a Portal is easy with a well-designed Jira Service Desk banner. These examples show how to keep a customer self service portal informative without needing to be an HTML expert - tools like ChatGPT can even handle the coding part. Professional, legal images from sites like Adobe Stock can also be added to make the message clear.

These designs work for the customer-facing views in Jira Service Management and require the Feature Bundle app to be active.

Looking for practical ideas?

Seeing a design is helpful, but understanding the strategy behind it is even better. The use cases section explores how various teams use banners to solve real-world communication challenges.

Explore Use cases

Layout inspirations

Critical alerts

For high-priority incidents, a bold background color like red or orange immediately draws attention. Including a link to a status page allows users to track the resolution progress without opening a new ticket.

Best for: Server downtime, security alerts, or major service interruptions.
Style tip: Use high-contrast text to ensure readability on bright backgrounds.

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Announcement Banner</title>
7
    <style>
8
        .announcement-banner {
9
            display: flex;
10
            flex-direction: column;
11
            align-items: center;
12
            justify-content: center;
13
            background-color: #ffcccc; /* Red background */
14
            border: 2px solid #ff0000; /* Red border */
15
            padding: 10px;
16
            color: #000; /* Black text */
17
            font-family: Arial, sans-serif;
18
            font-size: 16px;
19
            position: relative;
20
            text-align: center;
21
        }
22

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

27
        .bold-text {
28
            font-weight: bold; /* Make text bold */
29
        }
30
    </style>
31
</head>
32
<body>
33
    <div class="announcement-banner">
34
        <img class="icon" src="https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/exclamation-triangle-fill.svg" alt="Exclamation mark icon" width="24" height="24">
35
        <p class="bold-text">Service Interruption: Connectivity Issues</p>
36
        <p>A technical incident is currently affecting access to certain cloud applications. The engineering team is working on a resolution as part of active incident management in Jira. Please check the linked status page for live updates and estimated recovery times.</p>
37
    </div>
38
</body>
39
</html>

Announcement banner for Jira Service Management example one

Scheduled maintenance

A more neutral tone, such as blue or yellow, works well for upcoming changes. This keeps the Jira portal informative without causing unnecessary alarm.

Best for: Weekend maintenance windows or planned software updates.
Style tip: Include specific start and end times to manage user expectations.

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

Announcement banner for Jira Service Management example two

Information & resource Links

Banners can also act as navigation shortcuts. A clean design with a simple icon can guide users toward new documentation or a specific request type in the jira service management app.

Best for: New policy announcements, onboarding guides, or feedback surveys.
Style tip: Use a call-to-action button or a clear hyperlink to drive engagement.

1
<table style="border: 3px dotted red; padding: 10px; text-align: left;">
2
   <tr>
3
      <td>
4
         <img src="https://drive.google.com/uc?export=view&id=1KFPbpwcA3UuJ5L0z1QGRBgnef_vTBiXw" style="width: 120px"></src>
5
      </td>
6
      <td>
7
         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>.
8
      </td>
9
   </tr>
10
</table>