Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root


1 badge earned


Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!


Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.


Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!


Statuspage custom component grid layout by group (table)

I am wondering how I could create a grid layout for my components grouped by region where each group is a region and has the same components for each region/group. I am looking for something like this:

I am going to say I am no css/js/html expert, although I do understand it at a level enough to write/modify code, the way to modify with custom css/html/js provided in the status page is utterly and completely lost on me. I don't even know where to begin. I have looked at the following (only 2 questions with similar answer, the snippets page is of little help either -


Similar topics -


Would really appreciate a way to get started with how to create this grid view of components dynamically.

1 answer

0 votes
Mark Campbell-Vincent
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
Nov 10, 2020

Hi @alexander_fichel -

Thanks for reaching out! We don't have any examples of these type of layouts from a code perspective since we recommend our customers have a front end developer on their side handle heavy customizations.


One thing I will say is you'll need to leverage CSS border and padding properties to accomplish the grid layout. You or your front end developer will need to add a few div class containers in the "Custom Header HTML" section we provide to change your elements to the preferred grid layout. Once you add the div class containers, you can use the "Custom CSS" section to add the border and padding properties for your div classes.


Hope this helps.

Suggest an answer

Log in or Sign up to answer
AUG Leaders

Atlassian Community Events