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 e8a824bd1f680271092443b9187bd64ea4f9580f7a4c38fdc28bd3f033bf25c39dfd8c17952067b13a47181ac00d6bd7d9ee11df776ad8bd568b6957c02bd738016180d48625ee123a16bb207f65735344bef6695f5923806f7c64e881b8bb32aa90e88383277904c2478c74e7ea380207e31b1f07acf51b817ad2fa0250c7550615b583b400173e43c9e032883bba73d5f4812f22bfd0e15bcd48f7151ed9ad18c0c419554e69b344e8f44a5c93529e3de5e44f491f0952500970b7aa8c6230424f79bab936f3117ea7ac907090aa9d61993f3d75190359210325259fe59136381da14e5672ab6129e812d4de129d467e61a4752023629c8590e7f722d1bce2a44f828a5ccda32daa45fdd913f0b531d2d239a11ef037ce02014b9619239c185f153f4927d4687405fb263d25fa08621bf1c723149ea6a404ffdb669c86bfa884c1293851c70f6f61ce3059c533425c1faa59f6c6d3a2a2d367c6338a6aeddace844a1a983da2c05cb747c0c45f3914e05e66921271a588d357619598250f40309e2c420ec6ef2a14e3241a917d33905a168caae93076461c48fb6b255a087701767f5379c1b1e689af6e669ba3f6a8ab71545fff43e01ff731478dcbfa87c4034110ccb98b933fbfeec975f5054baf3ec38bea6d2eb30cf7857d99aafbcf4cf2d7981f3dacc689edcf1a1140882cc3332f6815fb2718eb493d0449d211fb9a0e38b5875d8f573be788e4be94fcf9d907289a39c2fe8aab9bffa7b4dd081d44b15656fd9ca45bd942de3175ad63210eda1bd0627d41446087b00eef69ce221d07a684af54905b997462768ef6f5c1262f8ebe622e7d6705fe354180879aff03f1d9966e932831ff4ea6dbb95bf5584df0fccafc1fac9ee58e2f886e45125196e4ea5fcf2a07be61fca35d8c742edf0e54e2bdeeb946fcfe1ace871a3d10d82ec34bc73a48b8e2939fc09312fc4179185def8df9fa6845789d5991502e201899c4b6d505b903bad38116fafad6b0241a6dac1559f03f47d7918706a8d16ca3db52e00ec5084166a9ec02ca4856448511aa4a07ae4e46a7768fce07049da69fb621de7a8913863c364b0b2d339303650d13b21e11aff12e94f7b3e73831befc6dc1ae3b2a828c633e1463e1756fffb527f108e48ca16b0e9f7913948a8e3aa2e1ab7a2e67b326ccdae1b68d22ef173a16c1859d12beb403cbae904c57c66e158f237a3d3d87e4f79578c25b7afde2e2512b839a2aa86b8da42c8ea05ad5ef06bd24d732fbb3b423c03ea1081170b52280cc4071adb2291c736493f94e69545c773e25a45ce99230eebca8ae10e8394e5ba7cec96ceb89724d74fd81f021751fde97b0282284fef67057039ea556e5763b01693b6e1e56d2728993e58b2fdfd4e8e4a53d4b054efd39c49230ff2802e7ca0c93e190dbabeebce8ff78132e74937ca69c22bf5dd0eebc1301229ffeba3e03097cec26e49a1a10fa3e269aeb207e4710a7232d825dc79bb18c87ac0505b3650ead7fb69ae383dde5b1e3728e9b659db58894c74bf358e3cd4097a410300168f2316693f352c11a7bf9c0af28f3e038030ae6bbf3ed3db7283d8d3f446347a46b34bc3759ebfad8999bd4df6d4025c9907eacfe232386d96c97dd206d54afa67c6959cf4308098cd7068833c1a03206eb3a85720a8cdfb59734f164b095e503a0541d5ff3c8b050160d3b508431479ea968d24330dcfcceee8442bd2dd46619488cad5f89c79d30a11a0291079ddfebb862ce5531f72db7a1253cdc2f96257a0faac05a97799f23b8d26747b0fd0687b435ffcdf1340f50134c305666a35a1d5c4ca2a109adc93006c5a23d9cdba12715bdbf02f653d7a0574d659483c9569b6a016fd342242999152f4ab3727f93fcd19ef28a5560620470273c2f4fc21dc75b6898c35870c91784d38c35f521368a3213caffb039b10b5c8543b5fffdc9d2f2cdd85ae8b9ab39a928cfde2cca0e2c24a8e94f2fbbafc38dae15abc42a53f8c23585ec0f4b03e8ac3acda8dadb1e931e7b7a1ade45b5f6680dede8c7e0c183e2a4a49397c03b168cc169a4fa73f8d7d5dfa08beef2a1703caf23bb39d969db1b13600e4ea569489d0ed38e3c4b5c04726f06570de5b77d1dd2e05a1822a9367ed87c2281e903cf72f4150e377525546416d9ae97b20a48cdd87212d8f2ca8f5847d84f3d47ddeb1e82ba0192b9345e972fc235f57654e516bbd5d1de8308937d20f02c3637eaccb27fedb2b1dcca578337afc51cd8a88fabc23f1ecac7ab23cb41052e727dce274fa817b2a3bd40529fecccec1247e05ac6985c9bc45ba7c23cb8862418ed81ad099d3b79c3feb3dd9fbc7b881720c6b1d0fc7abf6cce0952
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 974f4024ce5724cfb33eff68fe99f8427b41f1f007825cceb14cd73ca18549d66db5329f13227475bb876bf085f79a2c303c0eb8d42da9108371530410de0e66e3fa6d952affcbe0e02f6edb41d79a874cdde288e9b7f686bfd336cefc52170d04318b00afb9a413ef45a70bdf0bfaa56716b4f4fdf5b87c6f1fdc8e61d0b1c527ed4c5db766c78f83103a9d93fafb946ac7883f929c5c4f0d79f06e88bcc86cc7accea93b05e5bebc7c9674f74781275ec11279be3ee512884c638a25f99e205f83c011eb8e4f6873a5a9caf8249f4d580443ba969efbc5928c8170b951940bd74a20949998be89e44a166f3096e004db9ca5e2a2ed2f02a25813b03e23d7b9c55ab7cc7649e342b2d85d05029d11286361716ffa4149b8426e5d4d5020f8704cc41c74b196a233a9dac7f6dd4f5a46c8320314c3f8b02f1dff56f80aac8fa299a1d8dc856ae57685ffa5fe411611ce7c0ecebe6a95bbc1faadf1a34211ed810b5995247747ffe665c856239788bf699e246d779dd1bde8783a71983c5d5336489200aedc926bf9f541bcd32f43b853e1a540e15ee14bbff7087da31e2a94b75bc324a2b187cd3d9b5f55fec256402b06d0935e179c39b48f50926aff57b022f8bfe3899353404ac5d248e70d46bd9d20386d143cf39fa71172cd766dc9af49895ec5dd95f884bc8b9c91d73e72ba315ad975798918437a1b6c3b215125d8323f3f256cfe106e7527d15aeb00adc736fea6f6178cf42b2c7fc12e5a2d942c493eca1ecdae38f9b14c41c33936c0ffae352627f1bd6d241abb47af2941b7a975fe5dc0c6e5d84b42bad10f750c75500e98fc6f3997b56fe5e4b454e8f0d0a0c17f320bb2c5adc844629ff09df3068080e497d1ba0558e958bb30fe8ae68594c2ac20ac58c0793cefe23437268544f8d6f82d36f59cc624da2d70c453907e803dc563a1a134feac314243524b0055fd496a3110fdb7c6ad08d23233aa1fdf02e8ac95f58f12d66eed0927d05aa3f4a5e68a999a2c14b0e7e138668675b0e2b49357ed82d9806a518a01394caf07f716304c79098cf7ebeb08e2619658aa13fe8f4b441aeb6e52c12268e7317f728f56999b1a8a4a26d5b61b54bb0660076e3939c44408f73091bb60ebcd5832f6ba000616c60ace3ac399a023d21a4d20c39c106870d57e905c16d092245db72c8b55d6b034a4df7c2aa4f243982923863de4f1eeaa2d953c51955cb62dcc75827c4ad668eb9918c2c6a5c1c3219197b4ff984b3ce954cd58134c949def962bb950ac7849821632667848e1e996c913a2a832f9ada4be54f7bc8562475fccc0c4dc39f411b48f4f4ecdc3dbcc277aeaf3876b7cf8d22688b27ff1b4519c46ddd2d6de10212342eb14406c3ec0a6549bf35a15011cb0610f4c239dda5263b54e8eac5b9c88a1950007482be3a07e8996ea018d5d30ebec3ec57b0acd1b3ae3e38395b712dd9b4a612fad39dfb2b5650c53f1ba61aa4cd987583182c039a8f3e920731b94a42e50c5a07280eda43d652d41723c1fd7ef1f157106eb31f62e78bca862bdaed47d4fcf34bb55472a3d8a18d9898bcbe3678572b399eacbfd3000d29519435f450736c22801cb2f61a162306f8ec5bdbac9764c5658a6a6a48b62217ff391fddd4784e05be88b766d665cd1d5a0f5e681f85021a34324db63abc907f4d7dbc166a1f7513121ca74ef8caf3c74a6524bd1d6bd3caa7d28f0474063eb7bbfda4fc244388d08827045fe11afa1686e34b9cad1e812226727d42778a38688d514638fb2d7be0fb40efd4390c3077ffe33c0b05a083aff06d4d5022b2706ba096c99f0ec86e276946cddd8094365b3b57941c0404d8104f7e3110420e7147ad3eafd633480e19c2e43232a182606b3beccfbfbd086da67bb5bffa50bf20e682ae685446eae0ab0023d11873ff84b4143607100b3ecae7c8b542054274be1d6ec841a1100ca83a8f6561d1afa7d1ad458135df5510336d704e0563bb87519351cecdbe472934bd1cafc1f35a5454197dbaa88d63dd770125c47480d744cbea9e7b36d41a7135280378179552a674d69cc06de7d318b6252c20b7f6d4cea73048f4571332b6a0034462951ca494485754cff64960feaac0c7d9e7bf8e4a845cfceabf66709c4554b78bb60fca6a4403b307fedb38e82d3220901bd3dbfaccdecc46aae0b6b0fffa8c616fb2e8432e096c46d8a7067055ad65abbf237103602800e1a5a8018fe9f5329a2e4639cf9e335aadbbfeb57f794a36fa4cf114ac22122ed73d3f97b18abfb22d31e3fcb1dd8db6c975c7c2865365e8c919a45858b30889391fb043f5797dc425ab7aae2720f4246a4595966d8f3059615d7460eb8d4fb8c17d4772dff2cf53ae0af20dbdedd3c30cc7108621af261120c33dc8b2c3cb044d558
A notification bar could be used to highlight important outage information.
System status in a notification
View code a60834e87f280da21c957e77cd89cd3d6380f63906354e7af101f28302fa3af81b3e8bbf3e1dbd348f22efaf1d322c7ef6ae7761a8e8caa6a3728af1c94340651dc303ed97bfc0cba2c719c276f31773f5c254f80e1d081112dd4ae4a2ca72c799fc39273a8aba8fb762a2d8cef58be695ced7d2686eac98b41ad490d9ecff165bdc4c9278c16ff2f3c23a8dbe58918a8587958f402364ebf60681f0b1c7901d6390d458beaeaae2899106b863db2ec0d9df166525e4f6c91f13cc48c5e5f145af72d88cfe5c3612bb6602f63b545e19e27538f08d1bd0a4bb19edd370a1ecd80b2453b2342f709d3f144e105668faba4a88bf3d955dcfe7189a2582fc775e0be262f5a5618ecfc1d1fc6421665e8aabec015a2f458a7669b1cf9ec6d1962b0b261d7c9c1680156a6f64d4990ae568520a65463642763544bf4bd19d3e404345ddcf2d22cf06d5f4bc44a8edbf20d0ae1fbbebe0c1ee25554d373cc75b3c78029c221e191a2baa1be16a6c3a03357c5bfa848bf440462d7eb1c242022562cdc0b929fed0947b15a6f2975db18629743a9def568a251d6661fda92676e3a1f4a3f97738eed9aded53b1873562a25368e8f54b36d179675d78a5fe8d95c9c3b4d6daf16872fd63e36f4a479303b5af77a21333bca86fb53f92886f2d2374673609aa2873f7f3217baed25f01e1b855836f3cdf17eda7466f485244bca437e86cb55fb24e70f90ae04825d674fdb2beac5e06d69b6ab9516d096d3d75808f2f1a290eaf3a91a900f63f534a7492eb4542b7d25a3f6236d5d8604f70bea216b88df3ad1df43f08c4836548298f8c508ba1e7e92d2831ff028b583cd0de72d601d555b52ad85c47a1200f8b08ae4d3c226cbe48d1de202f0c40c37911996f5b5444eec9604f498707a23284705aa7666ea919240c788a06de541cc891ded1bed32dbe344ee37fb44b406c5dbf5e5d304cbd12aea8e9136958e6c75417ebb18fb290635ed848d10919974ba1257a5353e44e09de74d61323ed363e41dfcf9bdc94dbac319e2f4085bf3873b089e17a30411f7862e1a9e51ec33e5115196535bec546e0aee4fa317675eef7a2db5fa30c59d785cbe39289ea4b509f8f1c038c43ac653831b827adac64edb66bd0f3638a08d71c28d1720cad3727761d85922a0fc0257f5513bc5ffc03d49b1db4fb8f7efc471ba613d088529c3d85092820b469b31c03bb7ded6ad2acd12afe3fb605383507c929a5da40b4128a35b7103937fb5b9ab3311d6ac47e46d6515a9e6989e964c2f98d490bb9c280079fb57e0ec88f70487e939460d7cb567320c9cd5abab706d020ebf5acd69cec10e667ef730cf8cbedae3875bd5e325b35b1968b8a055a90412b9f08ec98f3d1d91f9b69c0a4d0c94f478fae914e2259141d8d17d9be710e748f125eac3011a4c33f0e29e8feb407a3fcc514096321646b3d0f02410e23c29d248f0b53cec37824f40afa835f12cc78799110d975cc2558c7fb8e061cd74d4da5593b244c42a37d98bd14828e4036ef3e830c6834e175e553b3f78f9df733b0ea6a07b127340722b364cda9b60d8c9703318a9291038754bf421b244984cf88cd0809b942cab9569cc951e11624de882c828239687ea4db1c8617a0708b357ff6f79c4b9a7a4cd08a66b76ff7d5841be440b20f2c97fe827d6bfee604a3bf9a46e89dd85816e77e2f0a08576a39d1dd5e23ac8709b0d841a1394dcc526b0c268e371649cc0a0c541fd791292e0984ca235145aa9818ca97853f266aef008c1ec198cf343695c136933ab14a27a1077be30415c7c77813e98e95c4f3ec363e982c9f31f3b72777097af0a41f17fbd45f8e899d3f7a76db3fd69329b3b2d3c6eb6daecb3b7322524513c3b707b21d1d9d8f320bc1a68f3385b23fdb1b5e6c1b22263f9605f8c53f2a7b65a021d6f254b507bafa007ccfa118704104ee71ba15926c0211d5479918ec31f8d5ed185a12cd8fb2dd480bdd418eeafdd03b5ec300671e8d88b848137426c930fabf3ffda7c1d77c294b9239bb1d24c8278f7112a4e13ffc5b07b3958b1582045840300ea098f5243aae8fbcbc24d2a25a404f4e6c552f92857ea9855da65970ee55ec0b9a3f368a0bf55afbf614e0b64f28740d7b8ae15b3f494afd6e2cd1f75a1392f410b520a73b1d34a5440eea13a70f8553d1122c95eac2d908917c1a5c01c10e8f90bf475a9a2133b147be1ed462bd9bc5b776fd864af5b6709ff0f238623ba8c8cf25fc8834d32262cf61d1e40b3081e61951a4495220dc3acb46ca892ca87ebabe259bdb6cf0e01668b1ba1a2e489a37189ce6890f865e3037bc1390613542be2e02b19a84d45a14581e2d3ba9318538bf5cfb95762647e25df610e83d78171638a9e97952ce773999a5a15c49de946d0945b4df80d77f654918e4fa3a4ccd63797e90ba8c2e78798a898332733b058a9e677ca944f2c3a5ba900359809bd11180f2a02c979090b8a17dd113ddc621e1da8e4d607f616e05acd211d195f97f14751cb2f7fda7e586ee9c7f75f94b229c66609837c6db683c84b46c4968271aa069df65d72933afde0eba4d3cf84ba203cb30e5410398d9e5af6937614ece0562a61b4b629801808e7f377e4690ccf8de5bd4d4643ec7af38c8fc36058b301b1c9420e7fc6f3364815dac4aa72d16b3b13af03054414baba0a78bcc4c83f41a4f75a1511ec1bdd1ed7a74e4a041c42d6cf32355a45f076d8c13a99153f76cb4951fd825e64b87d250caa22ac5af822556f2975fb8da1ae720e7543736776faa4c3ae715c42fcde2911c200f885e3134fd772d4c8afef60f8a019274866f504df86e5c0c6e37c9d1ed5665268470e5bd3b70a6ba81ff094f8bdbe54ad8d79b8ec686a880dd16dedd8706cf8f0ea07ef35a5273d6eef71f934e8cc627bd8897da1c542c73bfaad95da5b4031900e598dfa3d7084530b84c89dbc0d2e6afdd59c72f031c2b9804a3000bff3d2e2bceabc97ed19658affa5a5b34541fb7e20fc222c3dbd1df082dbad6fd26573755454227d2167fda8753dbaab46bed309c584409bd687ab837dd38d8cd07137e81d4868d83205799a1b14fe441069374320eb61ed40d265860d0dfa486b5063d9d08549e7017fd02cd97a2ab7117ae8eb5c48aae9738df751e117aa026d13afb0ec42bf0b7eeb71703cb10fc49dee02a4da08ddd8162980bc891e7206882242fd72b00daad693e57ed1d63db999d99c9b055a753864446265e67c96563653f8b6e941a6d67d24858a41a9773758ea4adc53aeb95b32b49120c63e66bef64ca3d56456db71593a6a4b78c84d922e0ee3659ef278d1b618d8fff3df783b8f80b2a52f082f862c5d222c906666e3a8cea485b73481f2c17de53ea2376e8a15c0f61b9697709093c14b4b2007e37822af6cf0ee3ecdc30d951b12d90f119fd98d3568f5cc4bd27aa224674b3818bfbdb8eb3efec91b660320a5b8d1a599aa00a7176f672134904e2fb76bcc9c80c63f55962a5bbc93a50d29180ab49729836909920a36cedeea646a7b83330d1fd98890d137cdf6dc5454a2aeea167c37bbb29ccebded3c91020a0f4a55924cf74fcf5c1f208794e786f0dd87cf27b553870a2623355c9769b90c50fab17168f7ec10156eb71a12a5a21becff0f94afffed6bfa8b687f395d013d82b227ab11fb3c360263aef65254e6511bccbc2926150a2afe1e86f75deef8f28612416793fddd2345098b3574b5295959bc7c8137cb68f607f8b7ad269fbed97707784fa4d7fbc9313dfd62f41e2c93470bd0f7515fffc223d78e37c377ea868fce1dec08473843624e2377888d07f327f2a063a2c752c6a5f4565c171af315ac299520f8c3c809f8f01dabdbe7fc1d99ef216e0f223d4119827e05149654d0582aa88462c195fcac02f35fd718eb0ae95d9a636659548d35633f535fb4f5c01a95d24600035a58a467eb46bcfaffc6fd16dec1b27e9c8bdc15d3ff83dd5c85c530af76a99b3d0540b2842d29fd2663a50df17f865ec4e1066431ea3c985ae74d06531a9e1d8daf89b2b328b2c325a21648a32c8ba3cda58be9c43b376ac0ae8c22ff36ecb9a5b0f28eb6ae8e99d0a4912d00917b4cc62fd3b8c96b7e877793174c5aa9c1c5d2cbd2852a381920b1d016fe8dad261b68bca364f70a5357eb3aba395aac267292753aea39956da087e3a1566
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.
