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
7d16b8d6c1c16c4b8e2facaba5aeaf96b9f7f7df7a1e4d8b5a9537602d6612d59047a145c4845c4f8176ce5f7a8b0df0e032a2711fc1bf08e60d2f3c19ba0c061401e756b638882af34b5f247a66bfe5e29f2c3ccb80a57fbd9be64a2851c500f05eb7a1c6317a795330f7dba44ac8ced943d0d61880d5810767962cfe7c73febdc3322e13ac75f15be3ecbf9eec6e9ef93c8a426a6e9524162fe3a9fd5c93b7375272143adcd814c926b6690aa3752b2a86c82790897c07db656a75e98f80b505f5dc96b26a1a7b2a8fc11d226c6d3dad3883eb89bf2fd75c8e9ff3230984d31dc9c5ae1b9d4495f68f88e441f934aa780b65c1ca98f238e6163c1376f24f314158fb8d13107a4628eb9e8b3cdd04b379c6344ea7fea30718ee89d81307ffe0cf01e77fc07876994293b676cbb21d110b54b93f60f9a3de177d9248e7e00e7d721e848c97e658a4449e6e94599b38b51e06a67462f8ac46429a6f2a008a05c4a1683174e04d177400389d99ee124e371ec14ac38d005e7bf78837580249b3e5cb2bd529b69dcdd406f87079e7d0b8cbb666ef62de61ad9ca186ef43b57cef6601631c6d0a633586bb2fc4621afc031a2a7f03469136753b283c3be91ae4e6c4bb25fb288305571c4f8a4d60e6cef56b02473f585868aff345b10545b1bc38da04960954fbe47a6a877d02a0357529765a959252d3e796f407a90f28f8dcf135477bd739eac3fd8cbb3a3ef630f00b5497590794ebad7791873a6a10af0c3e95fdff58557ea21fd93c8eb383328762412dcba792e59f36e79518614379b24a8ea67de6b20ae22c62efd7446436c4baab0890a03dec0b2fa1465d952740f28098532de14c13940f52d70be443cd5f24940b6dfb0e31c7fa3d6b98d8399016bfd6bb6db6ea115f7db8d635123279fd72a39676a2654ba9ce1a26aa9a63c5cda7d3b07baf773c9b4f114f8750299425d7f994c0d12e12109728d2b37deb04331697dbadb183d0ca538e0fedf146d9e68a95af5469a652a8ebce3375e28e9a654a880ae24813937f7a279afec5dbd40bdb7744bde92aaf3d3dfb4212a6e161b08ecb66a9d1b814be074b947e8bf50bf9e4ed174d210953b5c35c62c6b5eda166423fa1805621184723316170b9261933d8f16b6f7dc8f5ad4d6aa0781f9411235c53be902507d2e9169ebd548497af7657a8250a7d865ef0dd161f2aa1dac2bfdcbe9ea3a57ae9c7aeb8b9af8c2666757dbaa40a9e16026b24e0d9c99c1b0dbd837081c3c4f8a68f71fb0507b7e02f8b190f83112334fe4af592184b54fac8c36d7e864c5b6563c921df4404b4e31697482d5ddc0b90da64b006d16008d9b753104d68ce28c944a7f62a78111856d3930725343cc2dfc511e38a5de18d64862ae9d220be2e0114062f9fc896469073950cd6ec657e49c68374824c72d45120373b1196767c7e02559ee63bbe53377421e9bf372d71eee030c100a8ccf6ccb000024c6cef06421819c36a188ea21b47931f7e68ddec7cf2a75bd1629c26b7c92683094c47de32fa9b29a1c4986c0a8aeb2dd77926472b219add6bd24555796ceb23d1fe926bed5a8d4963d61e6ef46e3f2ae6f6a76e036ac36fdb023988b23212cad9dbbaac4dc2024557df9edb5a4385c7ba82c2b3ca8e4b08d33d3824d1d23b02138b283f91ad46259f9468653c8bb378f430ced4dfe6ee7608baab090f2d6a983503e24a402f2198d98f42de0b2644dbfa8676bd4acfce5a1eb309cced7375d8fc0d38676a9e2b106b50464e3726b80fc31f38b902d97248f9ec41583023db97f639ff882e35f900d7d7b493138198073d896d8b13a194afb5b3b474508584ea402b8e87688d91f7c42dc72f8225dcacbe08419b78f9ac955d1909f47a45d7d138beb9b8760f9790899bb7197776f2386f288b094b2b292e226a7ca00b7f184c21c1c4a4b97e4afb599144d8351973a855301de7907bc6bb041ace0f1989a4cd8209d42c0206532deaa2a8109d398f2e920758269f5eae65c84e828aa1772174001938a7bae52bac08fa93c335a9aeca32786503572fa556191bf2f9947283fc91968d285a7788c3dd3628dbc5b4983ba93aa853a722f0184fd4559fef236f9bf2d41d6b123786fe96ded95e890191f186788bbb4c3f2c86edf87a9eba7efa69e77f0d0179dcbf878fe8c3856c4ffb4001fd247f62051c12131e9f58adf349e3e74a61a109fb0ff493221d2c27e0c10f346ae67a50000b32e5a40c4004abd88d0967b7518ee51374caae0ece492e09af9fbd11be3c57fd2555b4bf980412227240b3a3f4aebafe7c1ee53bf5109ca203b9766f800b2b756d6e7fbd0628939de7977f36ea0abbc6cd59f6b121f748899592

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
731602f24b5b98e989eab48e3ac9c23696409eedea50f9e835f53877f5eac18adba3f01c87a9c5809e0c26e21cd0c9ddbff63bb3d98e63c0e6d0e7678ac3eff84a7d70bc538f6c9e997ee346dd6102a31b5651d163612185a322bcea2f41332ef58f9000c6e23178bf263ba1e8a7252f8551c01a574faf47bbad1d3567a4e0f1c0d6c7543796a17401d959b074fa52de8e768e32ad877bc4690edac95ad81a6adffefee678f6e6c1242989cd924ce56d3bf44bd738379136de563afcaa169d21495d88a63cff08696412d751c9048f4325e526ad7cc832b877090e21dc92d4651daca5fc2f8500e41dd448c5122fee5aee726de62b061a7582cdafc0517cf0a959af60b9410eb1409ab8bd49c2ead36c14f0104559bfc478ff9ccf2864dc01bc65713820efcbe8519b3deb91fdcf22d9b638b69764ba5fabcfe0633c52a265375885cff1cea0ad632027ae58a0cf3e1d89500cbc3879e3b1479dff164cd38b60983117dcb6a472ca69861bc2070ecd2b94095e6985d334d2e2fdc3606d3a188c124a9f66f528c517c6a5ab7b341df3db4d1055c60a0bb67a81e5ba6a25699719159205e143da5bfa86b0b011bdd0d6f9c4a06caaf6a669ff5e8b79718d6d8adec6f349a550769de2e85144a579b0abb6f04436e359c5bf8d507e57f1c4c6b08097866797899a3c072bbd943349c7039b9696de7dad5fa935be73a27b26f950cf96d226bb46a24bb49c6b0eed8b204fb0704174b42ecb543c454b76561ee8c8ed0689953d24dbae7105c54a523fb498f7ce230fac2f840c456bed3c5e0a2c93890c216288e4e788e2dcb07f98f2b740aab5f642a64b6c448bbc9ee2f1ae11cdd6ca852c7b8ed78159960a3c77c242f87fa9cf3a7718062f8cdf39f73fb651b6b6a78618d519c12144c8b236a75042b4f3c6328a53c51dfdd6189d1f835c3f9c4c51e453172972eab41cdbd6f776d93955888d7192ab04a565267367b629a1bbeda44bd87e8846809d1d02bdbcb93b0bfcabd350f830058e824c58a23a1dd04b4f1725a87939a036c10aa93bb064629ae2efd387631590e0c9bc3d0c46b722a611d347fdecaf02aadeb78a6f23336a9c947622d5dbb5033bbec1211732b196b613e752a27a6539deb0bd3aa13faa24004e38a27a46a11ddbd416c3d3a772d14dcf8ba8a956d6823b3fa59a4ce7f8363f3d2283b7de9d88144977764fc16bed7e3fb6ad4cd4693b3f364ba35e47c9d05431dc8ff55bb038b922335939153fa715ec65eca3f19164d0a8be6b7f7cb71d71c894abf1db326437aaa8776531cb532b04082dfa7fa91135d61f5422e106365775195900b8d58ff39eb122ff09640e79f0c92d2141e79d5d96498a01e1b6976a58821549f497f9e70be5969dd11c34e1edca80759c96a8202ce1be35e77052f6d45c3d4f3411b16e1b7f8ac9c7e6d82cd8c733498ed59aec433c8c351606af2c31dbd818bf8fac3ffe24cf5388f6e20da3eccf1add6c6116cc240e7d145f61972b43361034b03495f7316e84025d2b291134369f8267407b81cac3279cd8df4b1a518fee5ccd646ec23ced89153cdae84b3b0dee6d5a062e93d44ddc18e09daa328718c40d484561f1b4ea9fd1e588a8c7e1fe7f8c61ae397a599b3446219c6dfce187806ebeafa16bc1d2fafed2cf1e75eb6e19eb7ed976546331d43765578b31c6a8fdba2532e665fd2f241aebab941cb6e92b3cbee52fefa3ea35d71ebceefe6d6bfa1607e1a8455f08d7e1d5427e063c87fe6efd76a13411a1b48a00696d09a82d151c54dac3d6baad32178fd24fa0d3c02834036b5a41fad436f8796f0fc859376ae5a97841dee49021777c82c751dcedecbc365ca7f23da52824b854bbeca46af71dc78ff6bb31f101ac9b36f77f5aadeee7187bd5f525aaefaafef08e47f5cbcf4285ee953b56b76933cb11ce265963d8638b904da5fcae9663b2e74e5c3579c18ec3da339c6fd06b842278f14eeb430343f490785322e6ca597a24ad2384b8fec4d319ecbee2dceb1c3f56ae962f2b537e7f78eb38d13dcc0404b9cce7b4f9ef037aef638659e82efb2e26e457a5ae46a5a29541d1ce481c5fb3616479dfe95ebc46f68b08794b622ee28b57b6949a8d7751b7efac6cc63830875e7814cb3650c3aaf18a1017d32919b860ea7ab3fc514b69356875da670e7434aeafab1fbe21d7ede7236dfe36185b1a91b2b5bcb3d56fa82de168b799cf172f89f26eaa521651c968b358bb818791240b1aaf8ac4d06f2d081a2e142167d34fc22573b4ef52bbfc2a05016f6a9b13b82fcc1c81c6cef9641e44289d36358d9fcb3a4e093f17704bda5c6570249fb7adfef7951f49339ba0aa6d8add229633e86eff194c0e55666f1a38f48ae0294f1ab1d17174b984de41211b58387cc68b31f44876

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

System status in a notification
View code
f972a71be18918480c0e7eef0fc5bf2e5b117fd313df698d7f4ec614fd3008cd623d88f3188168c83d35e69f9341145b1eb2412fc60511b766864965a02e2749f29a0edffb200012fb1d9a38f39d0e70788c2497e88c57f5ab53a3c1790d8279397f7675e417c8297ebef78e379d7a4f581f139429f1ccfafa83521ee1d474fbf2e19841c2faef48fc1e1f918ffc3366ca11e00d41d4e9634040fa26a0ae72eedbd4b794949f2c348177671036f978fe178d162fe0241fd0e8198d2c52388226322cd6eecdc6177e5cd3e3ddb8410e5bcec395f2b66d7f74c4ec292395b1c820ba254a5a3f81d9ae81d312e58064e978b75e57f0fa7f6404f82b55ad570c727eea06f4351818d2c919ab468019a15d880b33338219c70553610bdc7b557d967405f03ca70994987ce4795f3a3154f21d13cd1f08691f7b499e4a73d16ee27ad523f3a34061625c444698b4f4356cfe68c2bd588514def7b6da8b4666bca1ba8706eb151c730420f8ef55a806d702cd06a7c37ec5fde804b54e58b9dab56d566d28f854e29b7843ecf03bffd8f62b0072b973c91468244fc22be80354a40eb4264455d716283bf18049de9b57c17e1d8845b5530abea00f6dbab746af3a3518a1e7215e2bb3e9dc56644da7983d54202e202f23d7636ac8123c3fa91f785a866565aa7b7a325f46cc4d70dd41bff33d3752d83db84066823d2106b5170086fd1a7f4a4a8d8f4cbedd41109d7b813f49fdaa990bbe6f314a0e16f7490685a8bae2551894715ee469bc8539bf07d1fbd830b9b778c5b14b7283bc296120446d0a54af17acea52b9721b22583ed16ba7afce2ea3e78556acdb02d968404b84bbe4e156144866a9600ac3b232f57c665ea49d945b213d9b7409690ec489c1f44d6d048a9cc4eac27d24301e651b1939c6393f4d9430862ae5b74006ecd041440cfe580976d9da08c32f6e190b25b0defee9d67319b42b095d9120d8a9b572f08740cb4f6d54c83ca462fe01ecad7b2ba27c92f135758f6f2fd992d3b86f725ffead5f78c07e9e7acb17e6463f7a1ff216bc0e72e6513b5c9e1eedf4636843d96723732f4c03da838ed4c1e2fec4de80d1483e5eb465fda1200cbca9fc5639a4a7915d58a1c44a1e75092f615cbbc997674cfef9e07341f539c043ad39e7f947fe8e0ef17f6a895a906fd302b4a8a74e123d4da066082ab5932e3b2a7246f6efbb5938ce6374b515c43d46b3b987c5e21f9038e8f208f7f89a3f8ddb9984784c38bcd522b29199b4fb60b154e155227ad601f8eb9e9d074ba1c651011282241e142101d0e576fa895e8b91fe8bcf6405ff731bbc651f3b5a486e3959769d39b07b3c74cb29a4122b7f7fd131b2b5ae4f7902369464d2797c4494045fc760a2a680d265275931aef3e8e4646cfd7e696385cee5f952a6814ab6ee4016ba5c05a2c784d299e0ea6383910ab44b4a3724581441b4a0040cc60a1f0a201a45cd5aae64ab95da8aaea4cf28cd6419817a5c4442486f3f55caced7fc478eb5d573d725415b3aa4d7cee7cbe1b8a316f20eed0d0ccdd91a952d3b1bd52b46ab012c5162d6fc7c231adb52f28b495c532df0cf777974168b95cb363d0963f48cc59732fd4a6c7f13fa0f86225227b62b9039f3ff2340087555df47450b41f62d388dbb28a05f75d17a3f1db3d8b0d0ae1fdf9612f42f45254c64dbb61df8a08a4968ffd9d6a5f5e7655df8b43ce7bc1cc9a2e198bf9f86d6ef2939c478fd511986fc47fd65537dbb47df7f9e19637dcbea53880b14effffc4c087c8b19a02d15781c201d9c79e2e6bdbdf6a2aae28b6601b3ec4b0fd4440cd39caa8d916579a41d9a23977cab76dc60e14b49168b54b8fc0ee22dd362569ceae939c778e0f4d58e04ebeee39fa355fca69bd67e2f89dbb2c8a641fb4d847474d80dca97e4269273a716b4ef10632b4324ba69385c9d3b28f679f5e2c1083bc1bf507280eb87762c07e086d9b1d01857dcae04d59f3056c5e5ab8b01f253efe269d3c4f609bdfc262498209bbfe0e67853f596180c6e07149df53047751b4e0cda96ec18dbe9c2ddd3c19daa9445eebe2ad2f844773f6acd899352f2be06bc8be5249fb7d3ad4817ad269d381d8cf540df3179b6f8681db72c80efbd78612279222efe274eb572c6d0a6d8c35fab188cdcbc6a32a04139469f459e7d4bce7e642865cd72bc17fb28711db7c8159fb1f8e783bf128915e17037480ba713d8d46a8ccd6437ae8e1b83313ec065b45de68455f94943e18a76949fa5185e668cce0606ecd3c09ef188bcf0d4cfa9df1df9efb062845ccc1b91da4adb24b37a20a134310ff2c39db13a39894404307821826af82ef3913709b5253b1fba9b2dc328a9488f95124e8d53546695c8ba2e93d0b463c8892a6b7b7cecb773a642223c28f137128956d88273cd32d2873c7ab21d30a7d323ca558e989db47af419d73fd485902a58a0e27247d6605ecfe786733d2c90d4b408c958449a91d44be7c61d77a5b347a94b33f07e7636376bb9e769161fdfa15c94d4770c8c4e9691ec538495d747012b027754a4e0a3662b401b531bf356b94e7d16e88e7261998bc63c1a3c1f85a2d5c14a52d0d6126f684b3a149e564e35148cd58b61ae77c052130b4ea19949a3b5ae1d4e898fcd030ff1807c49327e1ac693ae431889f9b7b9170fe200beb5c507f1115bcecbf235a9dad925fb2d591346bee20e7c325d76c70083f10e3f0d80a842df089d8723102dee9efd06946607860402d873df383009beddb7e080fbe59d24b613a25ef95a4eb3fe19573dc2d4583757e0486709eed68937d96db02847b59a031f03b7d4a31104b48990d12d26a53d09bcbed5a834a4edb1d589174969fda653ef59127bc33875529403e1f6a03eaa78b2cff372b2b498e0db53ffab0a81c926925c06469ce8853d2520e65c60f3852332d96fca8ce156288f5b5367f44864f07b6319fc89584dd14be4aac5bb378d9fcd2ae46e70ac7e439923227120f5825212e5ee422d3c32868b2313326649f53e1338ca654b3f4bdbc649be2da2286c59a6ecbe04b774d94af5864ef07eacd34f44304186a16b336376c37f5e458e6bc0e44bca7ae9e3e40a49b32c01cf5d33ace3972a085555dde06114ec37d721e8036c44bef819f390d0d97cbd191aaaa32ccc9faa79e858446d8b6c6d373eab015627266d9941af485c6b57ed553ebffb2189fcc888a518e4d1f48f320f750897db1429fbb2aba51128a95d06ca442d712a5097570448f549a53d76aae1580cc007aec4012634741d5e3f77d52632460dd5c4db6ae3d4ae4f1fd8ad03de9177b02961641283c27ec95e079975a99603e2ee6f4b686860c9c049e32fb7e882f7e5de6244becc6e39c3efe98244de143364694c3ddda4985e130c379a9e5770898605aefb5c306876b1407cc1dfd627a9c1fb965743462c9c6bd1c9ac5e60459c1af757bdee66383b63a38eba80e22a418f345302fe83609da3881eee7b1a405a47cee4658b721c0733bb719e0717170da039926aa21bc5774c391bcc864f41d6cd41321830425a6534d068f8187d264c2ddd1024b640ca81f735c0acf8d6f1e819eded8058342fbb52abbd73c9f817dbd89e715a28b3d30f5d4ab4d8b96e210edab811816f72a458b62231c0a3d4b845ae7f05f2b4c204a0642595b98a52a71ccf73788781d990120246cb62fd72ba7d02f83d2b85aa38f77a62eb7ddcf1956f5c7986992f49ffd4e620146ebc652e442efe236430f0e2a21a677f07f52e6dbe9cc29555c485679e55ad5b62e6e00423b3d0265820b26925cf3697e227bd4e4cf384711545dcc058e462a4c1e7fb4138cf1969fc89c5af0f0a7f123ccacaaad5976d20f48a1c564893c98f54b5ba938674a2f5a59ca97a15b758f50cdcf34f3428626fc2b2676edcce55bd01c155975533d29593bde7b37fd1b07af955d64ccb13af0c45846f4f8ce8c7ca6eaab946eceb922907f3c9a3ab21d6011f74aa4d4b134fab029accfa5489734b4454a7baa0fe695e478c0ebae7fb25919ddda03e0a8429090f8b637ca975693146f198a384373b9216161bfe8f4e36c02eea8359065e1e5ec796a4e9d9f46a6842f5123738a735d5e369dae4c86b573dc627a928e7426663dd54230c39d9c2abca4e9da7839dcb1a72911a80979110088c781da70ef5f49e2b942940f442b90a

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