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 ec254670da9603279aa6181defda9882e809e8b9184524d858fe6390fb866562121b15c7c055a69be59a63a3aa62fba5d2921fe2edda47fd59fbd22029e67a5dfd8c14dab89aed3a012bc9478ad2aac209427c6f181d03a7fb7c85f245123522b1aa064921e845091b8f75ee807767eec8bac7486305b64225145284fdadf53e038f42182e32f8e1c7dae0d19cc44352d3bf072d4cf454a3bdbd1991cffdd9ccf8f784ac04eb12b32f71687d815ee7cc39e473dbf740a587fe8759268f1f9b65b213b53a2e1af32dc67e468cda6d757c45fd66336bc929ae2abbafd89f4acacad1da3b3bba704cd66b1aaa9606bd97dde4cfd0e9bbf845ea6762920d0043bddd7bbb71dffbd04dcbc533ea03d63de64d72d78de840c2747a80752fd90c2c8f9b4ecd619db7c354bf9b63893d31a9003ec1024d8444030928b786131161a7bdd3fb127869b06650e69fcc77a85f61dd573e20045b303e9e8cc07189844333187792f88875309a27fbaf046ade60fac2cdbeb168677a2e41490e4bde59a693821f971a6282914c305c5fcdc5e950da6098ed49c3fc04b2b9f4bb5039d056a06d953b78fe413828185a3d498923680db9339235856754f4f14129ca9e61727a271674d487c3a2bf26be551f0ef4baa40512f8102dfe704014bcb33745e61ccd88df4606fd64db600feddccf631a7a100f0082196a6d8a4637d105c3156b4055c697c82311ac83f9f82863af38da01a170af143c3a8ad4672585b3ee7a7ba99785ecb6324de232510a0241dde0dce4e8b04eea88818ed3a0eb91c4758db5413fd16ae265e26cbc9298e0398d303d75942cf3794c2dfde58ff3161affba4c5e073fca57b736c507e8016577200c9c3f8f2d4ecd544bae50aeafb594958a3793c025ad844e8812e82724a938c84c8ba278a491492ab841a7acd97755005cb4a123fadc832a3784e7e7ec6d17c5ea4aacdef2315ad419d78afade1506535cf2069d58462367fc01172d626255e1f4b9e6070f3e45c6151c0223c1868687faf1861e912f0aa4fb9c7ff8f630f3f6c7c8314df39db89ad20bc8a214f2d2fc071e1240f34726ca7a5c2f42c755e53021a9c174f53aa2947bfe4b1948ddcbdae71768d7888628d89e491d47ebec06a40dee3bb50dff05eaad1e6565a78c5c98da9646285edfdc1143650055ca5e5568b2a200d156388f99f76875c9479a5e37fb011ee7cbb2dc342d3aca758fc19a411241ce5e6b098ba1c2698e640e24909252cdbeb4ddfb1b58a9b5110e0ec2d43897d4496265d1d58c233b10091916d731bb788b6c4d29d1340c5ef58c94e760cd89cab7bbb8b1da8542fb50d642f6507f858ab98955ad62a427deea8e478bc5e80615ff7ef0c1b776e8c816bb4197583edf14e356365b103280c0e862a78d26fe724c8e9c7647090820c882413620119de4368bde1e93dd30e2ae37e5217bc1e78b846b34394695d3cfa011ec34660c08c95160283716c8e26fcf15da060a1542f0deb620491011ce7819e8590d744d39edaf9d90ecc9a9fb5ffc69b5930edfe33089127f7d5dec11a6e250374e8966dfcb90a2a8b61ddd3f4d95ade22b550447903395cf266829f31eeb386bbdfabf1b9e9b3e733ac1aed06c2fe1c704802fa60f9d7273b95d49a7a5b01d99fbb511201b731cc4796935cfef73b3278b3069ae5a739d8617469c144116177db1f26c24ac67a4b3f670e5ffd67444e8b3387a687fdb8626b9af4f8d986cf2c4b2160ac807d609aac1015d540b560ee530a2679304ecb2edcf05e565ba6376b23cb8c7a2044c876fd7c378b9998f248c0bbabe58a5a5ff572043ae6db6e015532804a5a7c8ed0522481b4d2517f27fa05318f7f5b56dd18d765b8b93159c78e310ed326dff6e70d4de3e6d5243da101bb463cbbbb1d7278f08a1fd698b753a0a803b87f74c66e4e4b616134fe4f6ca4239354759bfe9db8c7a08407dc117b6dbd2fec29747a69a353ad441a19ec0c98f07fb6e42709a9afcd23f4771e204654dfcb425c8bd0cb3fae60b72efa0b24000e1db5af409f177b57cb467be22cc79894e299bb72a0b3521419508502d5d9fb17e20dcd72feedca792b5a5f90104191baddf801adac4c5e2763018d4908a82f8dc12b1b70540d904a72407e7c100c95b604a0031aeba4af267540cdf83a76add5d313b67d519bc8e07b71bd68dcbb5f714700009ab3e1f27fe6c965a76bbc7377b254591b9b372eec8f6a3790e292c72b46350c265b682d8fcc7c35baac561823868e89ddd0327ad5d05a80997785f41a5cfd6d3cca8b7cd11ae19da54ffbec537fb7491d74cbecb6d5efe7c183e579f814b1e6274180720ce59a9b5c79f8d964fe7c6f1f628b8809d37
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 b7ed37492f07a0fbe48fa093c289ff49b1ae43af2777e78eda55b30a91efe23b15cd187381761ef2986b1a76a1b17d25d22de4843dc949c6923a7fb2b74a9e8cc7ca712aec7530f305c786f29c0626fc88c83cc837741053f7cd4c54e94a54cc7602910f2c08a99f0eaf55c851c9ced0d53633f54fbf0b6db19b2b5590ddc712e24df2bdb355be40ad93d34d9988169c3d9f9cfc9668d0d72d62a07ea8f60e6b622330dff45d6c19eb416e0ff5641ca374ae11dffe52d478f4324a14d7cbca129789d312f95b97c2981a633e66be6491ea3f18771cc00248f65c94dec96c6bc85cb55ecda3308c2832fed84cc98614d8c0647ccd38ac19b921be3259364af0574cedcb5cd651a9a7d4cb1238094a5eede5257f8e4072fbc85b712498c43b70022377d3af21a0aa9887ad4dbbae4d524618e693ef2a8bcfad539fab92fbfed4f7c9845944bbae0612a8cdefbe2af7fd903b7a34abb94126f6a929f1d9eb2efea306e7778c95e95623fb6fbe716b4737b72154dbd612baf5d8cf2d42f0812a1a839108e6fc970303749a29cb2395a99d46009199897d5053726826ffaae2411b06f3f1dda372a28fcca9894358b0309c2ddb06ed213bd03d865935bb8e14cae9c71b74df88f7eb2e47b7fa5e7df30e2b2d7a8ed1d74781cb52792a4a6e916f37e01aad89fda1065b577c2f18ebd72c581a79dd693ca18abd962784d84c38d021c0414026f5f16b15e9b711b16ed04f1c84c61ebb04bf7c7dbbc482f33d7f077d386641656ce372ec97cb6ebaf5ac301fcb1bfcf06d13c96b6ab87c3e54816233d9250db7b63ea49424f08a6fe0659998d4fdf35165d368a844babe727b8efe25c0adb194fcd7a9524b610234d270d6e039d517c7cd9f6efc9d447cb896eea3ba6f5393c5f4cc275d6f0681cceca1542899a23158b54a88e81e587034285ca090c917a0eca48a0903786a09861df9027433ca7bf6f04edca945e6b58350de7a971d53733a2be509c052150a716854688caf496bade0e94195c545965022743affbf5fb29f93d331e0bd31b92c31f84194f6a4851711f23f5f5145b8c2866b05ad014b4df5c6f9a94ad89c1b3630af80f84c12f090dbed47a8d4fb08925b026cf25d801c9a9907f9131064652f737e775fa301b248ba859d18e71fac7dd4412a46229395006a68731a7227951b2795b10224c0d5f69225b3c1791f72964edf70d7c0f9c102836be81ad42221f781594d84901e6b001001119c89777807a1816aa74f730efd0139aa43e1c728befa03c45006d60087907a20c7afc809e1e9b126725a2fc8be7dc18fa4222df9345e2cc08a1ac5a71ee9eea66c00e08e062f56c9d258fe523885dbbcbff93b53ab5a820b1048cf0c86ae4b5f72c85452e47e41ddd571e934aa890cabdb0361d72e367e92774b0ad40274ce37d5296cbef758439184014ba655b6f5bab228ed2f7df1bd9fca4cf27c0eef78682578e51b6469d29b5bf51229674e9d12435895e18eb1c104cda53c719d0a8b5b2889f28baf531196319be3f85d65f3a804e2dc9fd18d86d82d341859662d3df45d179b6a21e5e706dc927ecb32b0c717a65d5804a973b460a127c6147fc41835972857dc7a4ac04e410e1f2c06221e68f9e51b4b12d0b3a3110cbcbd8fa8446789637702b8688dc4229969cebd00efcbad3ff9265b4fe9ff8f200e1e8649d3ac74a8b354c5904333dfce394ed2402bf65480e1f2e29bbfbe7f7d0317d6cf7ed6f54372d3338fe3fccc92fd2e0713ff2477cad5eb81fc180a59cf47997b7f766cb7a0a90cbc1682473d6b5f460eb4fcf0e8ac99c73455c84dde0253ca47bff553ea533d5e97e3d6eb63686e739f9f49f123bc5a63f7d2de3dc22356a6e3a8a70b1fffded129b0c8ee77b25c929a78ec1d9d6e51f075babb9f12159ed20ff79785dc5ed67cd73f0984d1de257a8ef607cd568979c64f9dfc57f3efb621a095d7b6a7c875ac6780e9b10459cf25dfc8f8cd39d8e1d9ee376ef1e72e0fc0cc75449b47193ae4c5e0d98f77a4a326120a10a695aa5f3f49c88f20dc8bf5abd162271e1064e5489896b1bf1ea4aa2df850d6f899ea7e155bbc6216fd821364282f031c4e20e34959d6f0b6bbb07caaf81c1739c4e62a44a4b82a5b78524aad5e80a60fd0f1a6d8817d1ac7f544075b0d2b39ae69040a60ee506fc6a2a3fad38a78871fc1d2edc33871dd7dbf9bcb3e39c2e15e20bbb23470831a01e97cb8a63bb43e8846991898f27c36205e2cef98fda5aeb72d369829a8ee8a56741ff2feac4dcd67e0552735417798aa4bc0f7070ede4c394db407ef0d8fb9e69fdd32c823e47c43333101a60d25a5803b4bddae797688ffc702b26c802c5b8bd74f89f88da2e6ef21ae5e8c369012ed40df98e35bc4bb6feb62f782939de71fd36c
A notification bar could be used to highlight important outage information.
System status in a notification
View code 2e78799078d123c85aa1cdb5a74158586cd534b0be2b2ae5fdbd1ad8d18f2ead62f96a0c60a1174aa133e59a45f19a6738f36e1ed1c49b206054675be97a5a5af01d6579bb4dd7b7fea3031d060bed55f4f1303050b3f7062eb955f27003588a7b1f76a76286e8ecf5f7f2d65bfb49ad228cc64b13a18073c1727052f8bde70ea5058b9a53f29439c2171dfdd16f909a9c060e2660d24bd15a15efb62a7956f19a4f8d5e15be4ad85ac013e99d5f0948a48fe569ec02802da603ab5879fdaf8ff0bebb6cd8dc4fc77961fbaa6f98d7f158486ee16505c771adff1bc3723b526fcdbdce6a87b5c356540fa90b1ffe58c925f9c8388ec43509dfa6d3227f4661120e878f7bae9dab807bd51dcf6657449e5640f222c96fa76ee26538c2784f0a692b45f8dd1d0edad230e2781362936f6ec104c9b268220a92cd13ae66fd9dc6d9bc12bc0a1bef524766b58a4043188081cddd3c7976be4f6662782ef3e9f98a24047650b26fab5f4126a88be85eeef2665cb79c56ddc9c5c49396758db8ba833c800e2ac10ff61a4cb6426cb0e8cc5cdaf621c27500a69bef583cad07a2b76004f9a4cccd8b38cc729f6fd93942027833127b4dd0dedebf69428625e23ddd0ce0e125399c2630e6b5e784a1290f92dbbd77762458294ae5e1115cd9ea9306f8d853710854f5c34033fbfbe7e8443e44336ba6b3b65d1ddb01375d73216b17363a863c71defcd04438a8838199d7c9cc70e7e3c8eb1feeb43b32a1255e3f9557f78576af3bc5f410219cdb93bf3b55fb1fea33e7c580dd8aec71bc5dae974b987104a05b0ca5f74eb081a87e61712826642d6194af74f09983fae82ade54c3d794d8b7b96b1630d963651c3063a96744777ff390cca23b88896cf6935cbac1d676629e94268b2f9c330d30248a41527b861b9fee73103d57579defa067adeeb430c60b170f760da10a2bb1af6b364cbe1ae8d67977fbf9221d0b5bef451c0ed077567f55caccd23a2bb30f62293dd7fafaa7acecc82254485967e5c16b1546572dc94f1195dd46ccf4f785c0b712c73692309c6c9865a0403b4958b5f99a2171e844ec747ec125316ab043336a160ee767651fbd06e56772e751c14b82a0503e3ad93ffc26bd4f54f6cf74a1f04de39462f70a7b281d4aa237e4d2d2d1ae167ebabc9bd4a28caf76d88b41f9b0f438d57af833efb3ff1cade4fce8091612acf7111879916553d43618354c9fb072a7bc947a34d46fa909c5c1cd4ecfc4e5f42f7511e4e9914b316d852c6f957a90d4ff87eeb216d8c05f975e79ba082bc982eaa59ebe64ce0d30376e36077bce9267bfd690d2b637d5a13d3a6f547b40295a9c4b0f754764fe065a59da8aace1a28558e0393f1793fc1d685182d8f14d1dd4c567e39f1b763cbd3580007302789d64c5ac050faeb2072887d8a36eaed07d7ddaa36c51887a6ccff77ccb7f83db3603d95a47db35ef1bedbda7fc0f167dfb3a51e2d0d6ce0ff8457ea7214b33847ff5d14b5b77aecf4fb6d39697b5d360868acb5ee3c0d8351929571be992cc36865260678200d50501499699154d1bce35c70ab2a5796de590387abffc3c7639051affa8eca34e9056207ef86bd9b6cdc473c6f5cb4df8e2f9955442f90b5208c067f23962a1649113452b5741ee0703ed7826ad8ea2af3ac7eb26e666e45e2abbef7a12d4052a4fad8fad07afa448afb148bff393729049256bc84e7253620d5fbe924754141bc34d027e8ea550d041816e9150e9e8aecbcf68a08c7fbe6bd8ee08496948ab76286a1965df250cda48352dca64e894f53c7458134609471b7508a6d71efe15c39b3932a74e63b90d4d24b0ba6a2f123707909e19e98731d2a1d078add873d7630c54a29635556190bfcb8f15e9694bc25fb69c477e3dea2ffe2351fa10ceb58d58670b71e01034e2968452a2095a7733446beb56328c338fd1d2350f495639857924880bb1cbcf30ca25d8f40e67c98f5a66fe1742a7809af4032c5738305ccf565363cac46cfeb517e872fa3450342e34cf0d3799105597573f43bd606e313ca3a678be9136193130fd1deb09b598f2ae5595c591e87b31af138cde2db287072c326aa23f2e284c01e5e230f134296e0f921f7d2f9e649f84f8d468d067a1a6f736d455791b58aab5c547009269dba80d802637399a4d96a2162bad593a25f8f29096f26e1f6ce4b7e1195ffd9b946b533a287d59ee3c3882149c24ab342350a0101aa7a5b4b095f119ad64257e86195c10433901b8bf2f719e6b8dd3c5839dd4fb0deb1847851d8fe4332301c9e861a86df3cebbb1f62934971096f1a95a05d429cafcd68f7c86fd38ff840a78bb0630677d36c02e7014e08446d544a07a41e20517a079fff976b4965cfac83aca899e111c5f78e2d44aeeb0001a2c34c62390f064e7fcf98f4ee6838fbde5d5232863e0be6f98fef1af5bd8d041480c8b0f4711cf5c4603d9de4737d3af57f36c3aabe399cee9860406e5e541f5114a24bd983b4d0b6550c3fc5e6f3c08e191154c95df9b64bb0c549b09ee2bc0948cd89d4891b72917ec0b8ae3ab69b29f72c00654874de7e3726c28017ed9dac6413e5d4c1be96e9fce661eb2de5266bfe9f95b9d65a2df7e85ef6ba059b6b64be1f10abbb007c2e1eca95b8552bda296dd2b3cf74f7dfdc9cfac232407e0078fd3dd28d64bf4565caf33747289dd1b725684d6b4ceb65976696e5d724ba1868700b84c06b8714abe63c8187af06b728fad0ed1764699189c5e1373a49693b00c069e0510aa57ae7505fb215e7bdd710aab8116e4606ebdc475d00cdf5d7a1b3f5a44c3a00e926b8f6ae198fe6ec7859717f13a3f16a8b534ed2020700a4a538b43621124c62c3fee255261239564dd2547b8da889420afd353f8ee4dc4e447348b0ba034e611475303139ef123c50f465e1451cbc77fd6455e40442e7255db514dd64f5081e3d1e86267fde276e8103bc14c401a2af68f4adb104ee4deabdb1ff7fd5b3a71f89d8a8b83529d0cacebe8eaca0b204fdcf7a715dc5236cf9c528536ac8855b3784909009dba2baddc1229393d8be872f680cc1fc2cd42b46bba69131e7073645bb379204281b0d3a5f4f325b957f2e8aa6ea1ca6558ae33f326bebc63d4e17dbac5bcda94240e077ad30d0dc1ea37935fcb03f58e0d2713ce86a43a68672cb56134d5018a249a8263c762a660d810cbd8c8817374f84099fc00987b69dc7d96840fb54f56e66ea928546af00e2d4f94fe84dd6472ea2e629b6177cb92b560e5d8c9363e06667610d859aa18f1f559e653baabe62c8ca5a4c65922b46e18bd85036ecd42c951217183618f3e31d2a530e6b5ae47b89f9bc64db27cc207fc2cf75bcb398339ed482398cef1e214802ebcc09d19eb0ef060a62ae91a264f03d9d75e18241276ce0a7f7be6bab3cf049f9c63771bd52961f28ab947421f5cde0d21feabe28c964f9a974e1d95399c48b17056dff3e385ccb30beff800551069258aba4a4946392f94eef86e51eb50a6524f3046f38b900a99b6000aad7bd5b68711f8fa29cf5178017f0cf6d21f2f172541ace5d9a18e37b11c166e44bf7c53842ad09d693f783aaa343691d9e16478ab60ba084db8ecbb0867c6ecdff7a51bcaaf6eea4567cc908d8cecb06a34c834d0bba52f9d72dbc2423a6f84f623f39e84079577e7045c057983d419b63e7439c816512ab01e72ce1edafd38adcf94408fe48985d406fb9837e9707c47bbd58d285a539dd97c238c398a60e1bdd810cb88fb2cf6c9701157355538f261c09c391a82dfbfb3c591e31ee090d7744b643586999920532146cafe2c985c4d9d3409d5abae55fc465f74fcb37b86263dbb6c18aae04aaa5b768804ec4522108cd92720ba7d86a37808ebec7d7485bfe56837ebe93bee01e9a816e4ba2d46a7dd8b4c36901475ca725489b5d90736a4a34bdeb3b6e0cd0ebce73210db77b753e58c0df21a44021f8805185e034cc53000a9cc83957c604acfbab4ddfa09a994ab7703cc3d90887a9bb09604ab8ca1a2dfd797ce4d11cecaa914f704a4b302f27f4cc4aa7084d863669d9dc9d7fe72de161c268e23ef5752a09ad89bc4da45239cd58d18529f297d1e0870767e6c65f90acae6ac0f9ff95bbfec73d4e102b2a788403faa4be9a1366a45e483af3a1d2dce5db98af677583af3eea0011c606a63
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.
