Status indicators

Communicate outage information from Statuspage in realtime anywhere in your help center.

By default, system status information will be presented within a link which, when clicked, takes the visitor to your Statuspage. These patterns can be used anywhere in the help center.

System status in a link
View code
3595f3d6a2b47c55fe2e4adc7eed7562a23e6b01680247e41e4526e874d2448431dee269a01a0ad9ef1df5b014b6a1e97aa05cb14e395f3ff420fb829b09e25729c0655b15932e8aaec5c31ea345d0211760bd4393a41165cb9ccd559d0f370b37bc8a1420ca1b97ec8ecc7030739bc12334d0eb8011924b8cdbc766894d4463b54d0259e0a2bff33e1bed235b41357e36449a29acc10e610ec4dc4804dc5ba0b24f628c974bbd5830f629c0c2f426f3674eba809fa866993cfb594cc954ae281d1dbc07abea9a35264b5cffe6ad20c4c32e3a69d878c79495cdb1e713e4a2f1c703296a1415c4318616e6daa0b9cfa4ea8c6fc1bf323f0bbf4fc920c25c8b63c3d6eca173063946072b64b1a55790e123ef4ce437cd772f3bbf733704169feff027151a6cef825d978402be99298579b12d06386f54a18fde788c0e2646eae54b7f3544d46fa1e82740074efd614aff93e30bd1f48f3a8b7114e1b3011771a55093c0c58eeb9f2eb4a8eba5172aa1138a3357dc3c1a693bb239bc94347e3610f8788fabbee83e68a872356ecb62dc142131d633bb416861a5ad65395ed44023499b7da2906528027e9acb6fb4b131171f8a07265efbf7c4b1e10b3d5324df86a70838c820e075a4062b8fe2f6315e36ebef213f966acb50c5b39e47ef9efdd3a6a2109bfc7e4248d3bf9547b70be7c61b0147a5f45c05db8e0d299651a044809e7a2a3899264b5054a44135a3c6e9853c628e8851c70edb2b7ef67bac5d1103058d45853497c1e3acc23261aa6d9675794804824403f43bd38d51bb577cf553abbf44dd9f3bb1600f242179c8a3c0e7e7f1a3ddac61c45d60b6beafbe9bf66804fadc705426e52029129ac24007355577c36e36e69166a13a49a112da3d02f9f20030beada3da007d8aca4bf2aff161966c926a4acb866b260ca827bff0f54c5f80edcd710d2acb63352bbab7d32869355dd7bdaa5ffb2d61b416d4e86b4c71af193524dfe4bedc18921ca181a0ecdae397aa9485e9acf8951df0f7e4e9c921d42ee0756c11e0df12ae8122da6cf4565af989a5cc5d06b5f02a2248758d174538dc59870b203890625ecf49625b1a7bc04438394645a48e94c7ef12ccd042600e77e9eeafcea9d8f328f6653e606441905a75ae50ef3c3d6a7eeda6619eb7217d6273178bc8efbe6aa853e2a5a603a260b8da01aa1386d88924731c9fcb1c2bed4da134ff04cb6a3632b1eeb61dd94acfa5cedbee3b3e60f53f19569c04e83545101b71e76d833925a4ea48e48a09db3e295d54c1b220afdc27a9c0562fece9551dd6566baea00b5a68a89bb881a7ddc609183fae7160e9e5dd65aed563309d02328d2c626ff91b8e30ddc3fcf83bfe51bf79a48daba14dc5bc5e1c68c388a132187619c8a62537af66297dde8f9a78e1617cbdeb72a9d7256c8af9df2d4ada69212397ca2d9b3ef646fd608f5dbd6dd499ecf98fce18aebd8c1f95a2e611f1a30efc6e0e4df1cacdef3bb855c62ab2318ff6a678cc973c97730888415fba00f29a2635342e26667297b50c712584bcabb815478f492c6f4006a5aa52db5d4d68fa66ed575cd0efa3453d400b3bdacd834978400c34ccfde478ccea583a022e0c86abb35555991f1e463e27e1490c4a689073107ad67d9fd66650c92dd935ded6192df7cc8f9493e4cd5d4f91bb7d7fe573ff2590e292ba741122f731d198d600cddae063f8e512d7f16da81e70514f2e6a7041b6a924efe18fdd8cc3a8099a41a4b08802024ce5e68ff9476c20da0338bcfa8175ac46be3371288897507374686568e86c6592c723bf1e27bdae2779e515c8e576d9ecf130dac77cf07235f166423b4934f06e34fb519a64a9bed23191afcffed51b5834066c54bdc600dc092addfb4944c453fd60b0210e6ecafbe5cc6a727b4ece92e13c9a40b0080b37840f3ed11bb02065e1303d8ef4b05ace916f150948879163788b2d17e18b63798b0484f67713061772949187f9c06fb375dfa6125b22436a8444453e14bd8e90e47e69bab8c6cd3a7c2c2ff24b4dea93326de862bae38c643dbf1320ce4931b18afe98ad6b7ad8aefe7cfbcab089854cc515a23f5ee3c49e011ce746e2b5cecf63412bb112edddabb3476639c9cd34f25dc7ccd310562f534a8b43af8e4e139d7798ba3234a79bba38e4fb2253faf912c233afcdbb0461d307ede9a5fe214bad47554802dc4996a6a9651a7df548bb47e9ec6bae3f6bbbf9341019adaa674f131b6ea98c5036474403acec8d609078237aa27e951503512f2aab57f1d03c6622a47c0cdc18245453aa2c7ed583566195847cb5ffee72c06ba22a6032352eabfe5b278aa1cbf3b03e177d5038082b612f62

The pattern below presents system status information in a simple clickable badge could be placed discretely on internal pages. Using conditional logic in the micro-template you can choose to have the badge only appear for certain statuses.

System status in a badge
View code
84de110967f3633e9ad23cc39ceb2a43665e4a05c1d871896e2ffe5729ad5863f2825a74afaca0e66c94e5be5bf73f9fde5daa1132545567d7407a5c12b120e968d324f993c24557d3750c6797b49b70afbdd37ddef997fe8cd95e238b2fae452a939d0e6db9c23660802a029afea6f6e208ab08c617d2595eb1c8797338ea1518f5ca363d137e13794dd9c37a7dcc2f53c5148887666bec81b227fdd5ad432f9f0c54392434cfb3041a7b2a28e5d6f582c656c9738a56f2ea3a3de68041512498c4d27ee1b6730a064a5b9783ce57885cf8b0f7185cfad996c104a1a762cf376db45055595697c30e2dba49a748ab31ac5d1b4c4f137cc2b3fb57c4ed1a8910facfafb28a924bf06f09c4a3047b43a8d4d25491462296da7e795ffc2d1813692ed4626b3db932708cf91ace23720a6a66b8a0edac14b23a080c22d28d687c19c549f822ce62845fed393e6ada77aa36f0eb262c0c9b3669e7a7cfab189e204a82fc0f51dbddbaa1adc4ddec9eb1584b84529af4f5eafb58d1b74d6515f512dedd23929d0b49b071160a313a8d2f81c3767b307bc77f780f7ad1149dd10415a10b68dea73f9327e6382823513328ad00a5aefccb7ff2d79e79e938fe3a321b6022b817978596bd219cf953bd558ada5913ab2e14ed7f5524c93ee3a81438db9d5610b1ae9b009656931c48a3800cb31c06b82605694e3dde261dddb8fd37970ecc1dcbdfbb5feee1baa77ba8eeec29a711d9dd588463dbcc9afcfef8ea3f3be30ed102664bcbb7a81421f33334b4c23605d8303ded35b6b184d3187f19448534cd2184a60a2e5448aad4409eaae216a7fecca93000249715a93b8c3238e71699daaaad2b00d289a435c0ecaa6e18c4be069114443605ec3ee0d675b716afd864ed0a7253104c6d4ed64deedc36fbb99f90fad99f890320bc574febedc62f2587c39dc975b5c4d875b45dcb0543b870306f90420311363ee7542b3c6d25bd21cd739b9930178f496b4bde5e6c01c40c78807896a27a1cebad426a8395ae7c0fa4d0d2861cb6d99a4f6a97bd8fd6c45214a296e0b7b10bae3ca77c7f743a6fa5a8a0eec03633f1a3503992bfc5be0d9bced879519958591c874bc9767612f12f4c2e12e2d5ec06f662d8164b7ee3c05858b98993a3de413954d4bee706fabff4684dca136cca02c4a78788696d9af1e66d2bc380a9596f66389057bda76ed24cde1022195544277eae11758c438e0e69bac1e05168eb138bf1df0bb9ef5947e8601d0d45d38979779229aec0be8823055d16391276f2db4a7577e1f4cc0e1805e467680b09e4aa41f4eb3515b493591737179440f00bec0b6f87794f69081712961bb743ea2b76af167bb4df71e520fb255b4420f6449406608151bb74831e68da70fee57ba328d2f2c968fa2f1d82464a64cab4a60f6a800ed85d7931e65b4582a380e8f7793253c621087422f60af714425b5050331b8835cee534978e5047f5088f34067a383844053a30f6db85f83b9c06f53cb8f8ddd21649cdc7bfdab5964832f9fc3df35c6bfd7271c5913b81f6bacf783820890378d03223a9b0bb066fd3ff614b409bd0fe6b741329afc7e8a7b6ecb4e86ae9bb7aebf6cd6f320af360bc6eb13597c16d28b0dc26cf4234db9df1d761e04ceda810f1773346957a6e8113c79be3f16bfe9db1cd3ca58ba5dd59aa6a80c68ce8980ac0f11940a62d3a0d208c24a51371a2761c8d376f984fdc94343d9b9c06123afa7e1820c0fad6081c7428514d3d47e7ccce46b366b5a20631dff54c6d1027613e12ca27d6fa5f6f78eef8aa0b34f607bf0c6c8cca0160d54947b4abcb4eae3eabf1e2f73f103f774e8929586ad81e2198900ed0734b03b1479741223a6ec1db73b6866875de2d1383fae71ec5373027f9b8c624a1c014089feccd1a1e565b7296057d381cca29019cc7ea07b357fe8f1531c0031e49cd6299259d31366e093315baba6d12092caac13f6a7c3bb5ee76399e0f51faee272d61ea950922db3894b284d6c5df290e63eae0ec92747566c197dd60fc9c352a909f61ae066c9f8536affe92518809ba08e8ac2e8f844b2141fbcdf67b7bc06a05a9d47193ec94160db04c2723dab65cf1f08d3a9a734c398d9a55e461b5155bcafd83375f1cb3c5b471e70fb349340f023a859f6116853e4aee31e2b6cfd059c3dc1036e2eb191a5bf7d79ed84b4d2279724be4273e0fa5caf55410584fd7c531c6ac6dafc3082b39e0a43007ff43e7d9882ae8d42ae9db5feb298d59648c9c5d774fc3f523bfebe11a5af728e48c4e288860fc0f752761501dc9fef52f1637e5036228e3d6b36f876e81f6c70bbfbedcbfc5d00ec2e05ebffe6e6c6f4aac50eb5fcac9865e6ee39eaf160c9ed06f94ea6b40936d6a975d3bc809127cd4563ad02e

A notification bar could be used to highlight important outage information.

System status in a notification
View code
83eed6edf163c6bff3bfd4c7150f93cc86b726fb56747cc56a0a06db2f4eb9d56347549ad49ee7fd8914bc2e77ed59f4404a5dc1d805777048827964df447dec98714e84042338e18a1828476586527a8ed4e451c3aeea4f0e84000b886e4f9f58fe4f98a62b34a53552001bfb49f0069d87296144173f5fa7673d6036503130246891e33a5794cd84eeda602b9499a65e8ee438256f91ed8f46c9aae326a133e0d1ea088876412ace3c0a2e2e48a891509c21ce29b632a5e5c74d60373303a81ebefb86f48f9095b8fd0c1febb1d8b8c5e4a8fd1318f86479735a3f8d4931e116c0ac2a1b7d85ae23eceddf3bc0562928d6cfd538b4e2825bcccb782e18cdadc744791e4396b663b7af7c2ef618948540e5c8622495c3b05cc6c8f5486210d843c4b454a71bf1e7e14754b96b9da1493c04aa1be3c7343ff134956df8723574cd6a9dec73a85a1e62dad16d7b59ac808242465f1c7832c9a9a401302b201f25eccd4a1ba6846131cb4cd16461796d776a6ccbb040e6376018c55877d0aa924c4520444d017a2c964ca0e3f27ce1554a6e85b7c1a66840a82326c391e976758c7620edb1dd0dd781c0fbc14d5af46450d2448a5e363c1f0a09e52e4bb008c2e6fb8f4bdbf4ea9a920949ca96a1b16255bfa5b7677b172e3ad4990bbc87fcb8f04cac721fff996b7f26e918daeab2c93db7bdd87419da3b0d347a8ba14aae0a0563643ae31de12ed94f62ebde1fbe80d995688b0bb06ef154b54680d533bae117e1f77bf2f66130ad5c571c4d82bd17cb3cbfa40e7385f9fac453c17e76d65b4c2e0ae144194ddaf86c1066497bfad768e02a47845c5bcc94685169896ecca7899d27096ba3c3992b73d3a42df74ba4be82976a65d2418ced5f906703d75fafad41905d8901a17f75ab2cc3e96d0b3d73bedaba71ce04ecf50cf8f2c13e5780c043f4b2b939fca3599ca6b56d7bc75327444e8b34e1a307f3994c77a37a007c6a1b486008f780b1b636bd60460404fe94f3b871b50b668e20933fc4b7ac97ee0d3c9752c43d584decff28c1216354577be2d84e7d559dd571467fcb190dad787aece2886e9ee6c6d008b4cd85ce4abc03c9359d3566ada7e762c7d5c4239763152d5cc2c4eef6cf37300f696c0a4adee406727b6d69d8acf9fc7dfa95d605e54512ba548ddb603e61afd4441c85f0005520fb7e6deebd6a5e6c3d5750960d8565fe00bdbaa5074a50d085e0a3e7701faf906628f380808d2b5efe3328cd6acb052ead19aaf0e8007b6f4bd0827fe9af0f8e81059e364778028a3985752080e17584da7ac48cdb1c300f60e7d9acb0c10f4e7fe8ce2b0d8e2d8ce68faed0e1926524dbd3b4b8428476d6564d6a59a24a447bacb2ea1e09352a9c733d565b00e21a49e87a921216f40adc0cad0c6125c2aa013a6170c410f07175ba70502011eeb462b221a9f029ab7aa415aa3de6eb5e9a61b270112800074d858237edd433d50d3171827296dffe77c9a8b48fae7ddd9bfc7f3c6b775c8acc423518871cf39d0d5df6527b7376ea9cc30dea82242e4059336e24b4bdffd975984653b605afafe4a3ec77ed43c832184efc45b7c396557c5869f543bfdab92c11e02de5ab4b4cecea2452086cf6e693406dab710ddbe0a6a25d9b11180711c20cae6897c490cc29542a462f0951376c1fd44da4c21a4741ee49f2155839e90916c7331929ad8a699c4e39848e7075512b0845322f37bcb972e5b278c7ac860320f9c11bbd50c654205481ac5fd7b035e9e17421d6a56e8f017be9ee18c11279a42f7532327e9bab4c543a9c19e2f606986594b078c13cd6d1009a78e2cdf702822c4de7d1794cc7d78cdb57f88ffbc305a87c9b332b690a3bdf705cedaebf0c685a58b7a8725ebdacb996dc43271cc391445dc0129129ed7b415065ba23c712ebb105acceb7eb5e60322fa6d2f5c22fe56944c503b7577c5a5b0b14da78629a05e27a3353c044f377694bdf2e311e5392c57697570796a9dc5a34699fa02f5516885fae89b09d814853c7f527679872f8873d66306ca6f6a1e7b8a78e7ce4379f757eb335d311d94eef2ed2d6cfa1a7667add1f1364cac5299c455bd1c67f1caadc90ae5b15eb5882908ece9bad36c95fe54c150cc88bf42dbcd8d4986cbba959d6347fe382356ee958388e2468105e5cab7cc6f4aefd0a54778286828957ac6afac9a02494dbca52095ee53c31c88693ff42d0780a615ab4e5845e3a39e51e662e7d5f45847234889f956efcc834a13bbc8b4cbf33cbb3ff58c291974319b0728f8e8aa41286956b63250def4a10bf457964cd261147590f2b46cd5fa52244eb614f200d229544c30b282f87d101076e7db086d05d0e836638219c9e81c20f97e81093b531ef59328956117cb63d2370d7c6990277b4ce6ad61cdffe20ba596d96b65ad51770119b86e46252e66f5b0d85385483ce80e18302e968236dd55986334bdd938697c672271e6c483b0b2a757ae0fd0eae60fbf29ba3d8cfc95005d1a0962a8d0d6f56272fdbb339750894c869a57fe42dcc25e737854fb8a573b1bd6c9ee5a891b36e07470cb1d789ddd3828e2fe5a2a66cba9331c5de516df343f4271b203488fe973e94f71ce7e97ac5d3fcde3f7a87249cfb8911bbc6bb271a4d291b9f5cf7f38501334ef2c783d99790cec8bdfb8e4e89ffe67e7607e589bbea0ca085511a72f0f7cbe99bde97f3aa65c8c1d579ada2c35a830cc861505b47170d0851e8b8ef34f822c47efb6e860a408be294035a50289fb432a46a60f1c28720f12ff2061172501fcbfe90341a5eb216d3a67068f03f7ea94b141db61d52053a0f0f915c453c4896793417899932bccbaa62e6ad2dc49750fc5eef40ac41fff9cb2eecad08329a551abc6c4f60f5db9f028238421f2e0d949c3c4b0134789a392e0d4b659b9e586b1659b1e882a5fe815cb93ab7b4d2f450e5245a9f26200808dce93b5f12c55e785ff925f92e1ec7a64ec30cdac8eb73d8d6790df031de816399a5838be1475eb44b88d3eccbbd1fe69377715ffba1292e78e462c45f48a3434d87cdbf1bb144c19c66274fe94b399c1ce10e179388ca148b92d5a6dfe9011319d6d0440d6339db1c32f99090ac12594e06cdf7bc01b4e1246453c4efa8dd4695d85b8559b27c86561c4b3a3e9ac66c9e36baf8b9afcd3bed5887f19b5b3efd296e32db1d862efc9f0cb3d73ad8b9607d0833bcf2be6793ccb6bb7111627bbc86507dc79b147ed1e8485cfc74b944813097cc323eea1001b84030fbc5253cdf6c9db04d27993113de72d19036df8d280e3bd4b1881f2261e5b67c4849c33766d69f80ae6f96f4cccd9eae0c2611a528c4b15f266586a6573a96d3996f66bbed55968616626184b52e86087e388fc157b2556bace4ee3350d570b2ef2111591c54f1bb97006ea55874b33805b20b7a60ce4fd547eafaaa8d4028be1ef026deafd9194993f678d11e47d42af43de62196aa76b9d4794b8f30fdf03ec1f20e098bdeee564c1e21db18846763702e36b31ec02adf6a76b67387f820fc6865469277fadbe9743ef7e007e701438df552b628966f0cf4e157de6e01e6634d90dff431341d268ae1a1ac58fb5a400718da3e448de558a6d27867c4a0051296621cb5b7bc516368ec312ee85753e7944685a73e32fa50a07632b4ee6d7895de0d222c437a8208c6716bd875489382c83f6acb5f0ff681bce33d4654c3d54ca1a660a37b64bea82565be9d76c52865e6fcf633f71cbf14c47b1f4096330d38f29eb77ab114cf025f37eca41d3e6876cd40b761728adcc390b821132673e5fe345c411faee4c4fd5ba0b74f949f8a3258761219fe8a2a2036c5a017471523c684e8fc571d7d2e1f9174bd33fb147aea37f4fa7cfcc94d96c04fb5deee9a1cc7531788e6ee829d237879216eb0023ea65d27fa598770c3957f3008f6f08eb71291c73883bc39f64f831dc0fdb903b1a2effe7daa829d55177e786e328a556c6afb706e1ba09c45f7e3ed12ef990460614aa80cc03719fe4a18d4d39ce6369251bf176512e5612f4d3c5954c276498ecf05e677138f5f67faa07fd4054e921ff51f9af4db8c9a5e2a5d8cee65e71c1304b9293274698ae926cd05e88d7aba0d59170c3fef0e1e6abc599d763c0ecc6ade648a6724ded6386955eae1a7fc61dfbfb0d29991b2dfc97fa2c372

The status indicator patterns are custom micro-templates that you can use with our System Status extension.

To automatically display live status information from Statuspage anywhere in your help center simply copy-and-paste the code of your chosen pattern into a page template. The status indicator itself will appear wherever you place the element with the data-element="system-status attribute:

<div data-element="system-status" data-template="system-status"></div>

The System Status extension is included for free with all of our themes but must be installed before it can be used. For installation and detailed usage information, refer to the System Status extension page.

Related patterns