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 2c2ae5d17770926f49d96c44bf6a08faf9f3b3e9629efdf3168fb614d3c736d7796a4ebb4e9488897c300c4dc43bcc0254838b1bca6ec8a4553df1daaac4277fd2d3c4b9c7d1bb524627dbd22296388bd5403cd63d73d20207d7ab72e0b2dcd40ea9e104e54e92f8422333a79fd593136b4ec09e02f42b132663c3a95e571248685fdd52e910f58b7cb9feaf7c416668741a1d63efabc0ec960feae64fc71d5b1a86e2867cb514aded7fb504e1cd352bd77a0f45831b903515ab9b17ddcb9425d7fa1e28ce0bbe2cac0d223cf5ea74c78dea986be8e9f1544a501c69dc72a74d40e4675f9c1858fdefba0dae60c9a1aafff75808e0f7a28de6532f519c0bf197068abe3e4ed3b1353165d50fec9e6ffb7f63a32504f329977fa007cbe666ce94044eac7b83f2c7d27472fbd3124df1431a57b0e8fda985f380e4139e0d4172afdeea14777dfae17e52f7c83af4ba15d05e11e2b7e462087d780004a7bbce2ef6eb8ee3294c210217802cfb55e53198fb48e916bcc364688c7db8d2e9d7fd8ec84ce1d854df932c14ca8aee02621ffde61326809609612cddcf564021ea12c9dacfb4317e0a75a2e6afe9fdffb2a468425a6fe935c49d68f6f606b432a89fb7c7c611650a81cef8ff9d9c10a905bca46641806ee495be5b45d337f714727d3ab78ed36b2adb49dd979a416c1444bc287aa6f2949bff21bae3e58f4f564663ea92da204fbd287fc6451450f716cc8f3b6a592cb600dc9f76655427906abaf05041b675733c652e8573c1a95eb58f996d109bd4aa23a70b633ae4b617d581e12845dfccee65fe0cafcae1bf25332734ea06cad7bd038f8d9fc38c2a2eb0f6a2b10d36ec3d3d19b8e0fbe68307f57ea1dd6fd4e61e1178eebbd3a91a1fbc8bda4228d14c3a9533609bf41977ae926ab8bd46e2cc17e6cf60036adbf31b21eb2887ab38f58a0cb0e8475fcf503d0a218d0cb01a12e476edbd8f6ef13610245023db92b63000e1d71d2418fc39137fb5c7a6df517d199ad67f3ce89d0d97760b08a650d3694979c905f7f79a84bbe096d59a9b38cfdb6095071b533351d2e97438e471999dd4e639ec5c7a0348ed66dc13c563b12c88ece13a557d967f21346f0c98bc4a63168568e17397c335f01b59d2ece30424a97cd2ed0e56d381cd999c451d74b52f3cbaee4e2d0d3d2d86f332c56abdf497e311004462c4d561aa88c724cdc6e0160af59381c49295519dfceb032ad4f74b914b311c773a0f789ea9f9fb77a0429358bee2b555a064e77e3bd8fd95910e805e55264d7dfc04977fb43f694645be5c98685d965cb394eea924db79f2deabbfde9905b87ccb9a44ebbe6ecd1985ec630283b68ca8bd3ece62619e0a81880e5ac72292fded87a43ebb57acb3e3bffbb401ce2401568169e7db522e70623cc12cb417adebd9f9e07e229ecef36c0d8e3c1716a3e497b6e3e088f85ec130f27bf83182cb446fac441aa0e3ab2c6b9125fcbd946738f2907164b7fb2d2b41cfbc831f9a94a60e264f007472264a440e482332dec05136eb6cc63ccdd1dd5470ce8af9a699a481f133f944b691f95056d9cc96730a7255ebf8d65b99b10152178de3733514062152dfb688725be89b0ff27e73f29473871cbd8e53da5f8290e9e05f3013564b8f16c43daeebeda278efaba25363611076ed9a13dab82d966ce44c48d2137619f460aba184e55c71fe88bb72b8d313cdb217110c7f31ee3bab42553eb925d43909037de0bae77dd0cd7d23f725a930d60f783e25ce7c36cf31ce4c50849d6e04a96a29d407b3dae21a89c3e38c30b374771ab2439846a726db98d63e38f0b80b2ec8a72cd65c149c93f1690934949ef2cb1c94610a3ddcd1512203d553211ecc18420103e616edfcdff24250e2e5ee2024e7d4fa0ce66a745f0ada231f0cc9d6532238134697c821a5bb9130cc0b04059dca287466c6781894981df4b071b3c88efdd384c7bb97e66f7803ae34d80fe3390b151f631ef4e9630b58a3dd2c6cbd4cca31e4a59ef139e22276558b2783bd1ec27351aa457d152241a11c6398f5f4bc1dcb5c58f01ef565a9b4f290f148dac92bee1145b013a73a8deae870db77551fbb3d1dc257890924f8494cd43126f9945f99428d4647912a856b4c166d6a3b3a8003d464566bcf0459a83af6ba6050068a3d8d058ba9664697f1c0c48c8fe4c744f8069c48ceafb224008bc4caba038590f636bd509937fd2953b4164765a707caefeea2d6f5c36b023738eb7ea23ee4916bf4293c2952133cca90b0813df0a5135c9b99c613e58147eb58dabf58ed5898d415657e980a432d2ee4ffc927ced7f068b992e5be89a6748b67dcfb43ee0c38ea890fdd4fbf070f
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 5d12bebf80556f219c1ab5979c789e9e10046128ebedf6521e6700c334b733c50c7e7100a3735498e5d17703f571ef2b4c4262f378991660d20a3fb49c7d505f05d17dc86d2753d6c59ae7670e0d3a1a8556902622342e6983597801353c34a3660bda80308b39ca0c70550840378692ae56dc05fc884f7708f1aa985687fe1dd3cf16e3fcdc52e8fdef010e55015a33fc98b2956ac151bbe4ab71b0717bd99e147159225c02942b982b77ff47a44b6dc8b5240bcb300dc326e9c8d034a393fe729673fc0473948310059fb45b407456d1b6b633a5824c39062106abb2fa25925404fcbfa44737eb82206894f7c7c4344f3e2cea3453214087b1443334535ee28610d22fd5de9c0c7c618aa47cb2bf2aad111bba612df93d56727b1cbf59db541eea7d19a303622322ef98fab2abdd94afe6616967b515bdb714ed36556999a52def9dae8807e1e6c0b6e2e3e907f1632ae6f6fe670948fe4bfd0874a8975d8afc90afcc01ce09de61340e815961ced04d0a37a8fba76efc7f8f41ff6c1f02a3423bfa179d5e5d9bb91aa4ec98dbd03c98574a2354f47d5d13b0b736afb771ef0dec7043b935859d0686e01530dcd1b89616c637e5b0cfe298d318f610b9ed337160fff8ce60d4acbd668e4d5210f7494a894a97f6eb1b551e8913b83f9b18685973aadbb016ba9b126bd5da1f8a2bd024f121478e914b8ae63e3123e519499a4442e7161f22fb8e81c599565471123e79bcfe04ab7e62c5cd5325d39c4f668d4c9158d70ab7076ba8723010316f4f3770cf9407b3050c5ea5e1f462f0617366fccc96af035c87479e8a79f2d1d0c1864a3c631a5bdf4ec2bf4942e4fe1933610c29f4c2af1deb0980c71454335d3ba21dc263bddedd36ede5cdaa5a200931548012f87c9e292b23a10adab5c3d759fadebfc137800dd01055282253b0565c8f4eaea7fa610638189f4f93f9ce5bbfcd8683d5e44ddc6fd65204d4c9f8082779fc2540023633fdb22dcaec46f167de3c46cb18369d3a093045c6ccda3937e3a0cea338385525980c9997eaaba3c41d73a9d81a3ef4104fdc2cfee04e19db835214dfbecdae9557e137b69484507cc0dffb873bfd402a873115dc825265e8c452e16e3d5c9ce447f36a242e6df7127e884269a304fa5a94f6a4a178390c98ab85d1d8119633d62c5472fa0baf4f0481f29bac77e767b3980044284594bb1aab9f9fcf017d71a93cb2a5a15e746361e7001832aad0d80cfd9e27ee5e40c13fb6a2b95c47199e7833e50b4d2a213a7219c84eff660e22a55da0180530bb749e33f66238933947aad2fcc55da738aea1fac2d6d8683643a0b65cfc161a04e2a421fdba0a54282a977c178c834ab0355feba8ab12cdc36d69a7a58c67689683d0ceb676692cb083868e22283fe84bbe993d8e9609be684d473e3252ef6b4f40c71e139c3782dca12d1699ad8eca23eb24a5687bbcd1608cead9081661c84101df2faef3cae03a9208bb4c1bcbd41c53cab7efaca53aaeee141f21792fff139df55350fe288bce6f86f3ddeaa0c83197d993a6d68120e90bdce92b4f84036e25a4174e65433955802438f207740e25a50f0a8169bba500914fa7b3a3bc454863b1a529a626cf30b2b10f164751c9458c3d644177d55718c760c38b3f7c3fc62e367954ba9a2d629c9bb9fc550e2e17462f5d9c49242363a45144cf53c0b14dc86bd104fb481b638d77219ce755d39c12f5cbd5a2142f354a683181c6fd20b5835e80fb5ee3e31f9056ae34fd18cdae036a8da51e029e624868509403cad100aa9938c345bb68d9cf8d09c4d577e5b49ee9abda0a22ee63a562764eee3000af7aceba9fcad08f9335da9c7db083f0dc8074f93a004b99ea00e7365f6ed5041029776a11eda5eff295e8b78a3c2ef544f7a385736b427c87d92a56bfcc23c1f56a7a01bcba658cf79579a208391e181d46dee7e76c661079532027e67621e809387c638b725bca5a8fa8b172141687664494cb46948b3da5055e78598b70ca97639f1411d12e26fc9f54e95139acc6e4e094dc522b23dce1fc0194e72b512abccb5644c1e73417b8c9d53d275fa2b7830e987fd947fd7b48da2ed64d695db569ec1d9c6e5e2b596e29abc27a197444e529ab7cc11d9435d23f7334c5a1b229e4c3118f5db1789bf6c501e086a8586297f75715faca1a4a28c6ffae74716ccb4dc81a16c9606bcf56ca3d719195c875e66d624dbd4ec5866113842da974b555ab8cae80bbdfa294764c0ad51f8dc853a0d7a27d9a49e8cfd60ff1ae90bdd564ed1847e7a55a738309aa0d9a31b8a41eb4c0291c495465849c561d0a65c71a585d57ea38a0b92295984e9433b369926ae8aaf8306c7932c5b30f654f5bfc0f99d6f37ee53efe6c44e9c2fe5d2912da9ffb91315d50
A notification bar could be used to highlight important outage information.
System status in a notification
View code bee4b96fc5fe22234aa40dc0b847e6c77396ffd13615b1bf2b4a4c4c65173ea375662197e9a810fd0b799e746dd09a01a62da472a54a4475326a42e35a1dc78c65ffa07e32061886575fc13c97012f2f8de395b442ce3a5c553ba40917b7338702cd41946fc52646b3cf35f7bd9ce25af7ef64cd24c8a9daf5ee948d069724862a24ff85c85b546f33ce57e54e50966bfb6f14c29bf3e9b7d939771e78a77809e5c8a9dcfa29ac43801e14d0d51e87cb58ae87a57e4f3676f20709f1768106527510a3f9d22c4c30eda334bde78161547b173633fcf4f0cc64569ac0ce75f19e6cfaa82d4f0e589626c86f5589aac0d7240fb2a860317eee2ce4e433d7fe896c03eacecd25b6eff2b1ed3a1699023b799ec0e14720094183d497c97792f2e5e7d9422e9a4ad7abfaa969e6647d5f6405eb5dcdc3502b7be50232054975a41a671767d3c75cd75393f6c0b40e6f70d4fb57263c21bbe9d4a8da7fee58b5755c785c95290a0f7089727e1a452eb3823781e2b1d32281f51e49b6d944e61a8450a3329fc84f1d07129dd7dd70c970c57185df22208a496c571d881f8c477b4a4f33930d3518bfc3f33ce39c88a0857f74374cffad3da17845e3b8a27d7d507539076bee62c9c74e3324fd5bc8cb7b08bf5fb66015d7010da3e8537e1bb456f786384fee60a989903f76ac02a2bbde9458e8d132865e230a2142a00e81c17b53575a934dd7cd78331b677b26e10f0522488607b48c129281f11bda9b619fc2cf3b832d2847c9be5fb999d3cc6fc9923d9595abdf5c203888a353e92d67ab7e2771767b3b5366f7d4a8642ae98c056ec2402811f1a524cf2bd496cfe6d8e8e0baf01321ee46d87812a0e5fb3ba9d33209e7ffae5d540296d9b43328ad37f1688afa7d4872be830e2fc50d13417bb4d0bef8d54212118dc9e8ff0627d1614add31b5e1f064fdeb7b8f539344ad95b6380910bb93eec996c4bb61a4a2e5e217717467c8d3d52aa18af0ca7c0abca647d161f507ab177d18e31d101d1b1d0500d2c35de47577f004356dc5481ef1a29b7b715e4310bd6c121c94410b484e561c487ba5eaa4fac187d8adce97c670bcb01c34ef4271eda26ea95d697f0f2aeedee43db33730f3c6a5a3acdf5ef8feb5db779b801be7713c098a52bcb95ef2f17d513d07ff21deec92b54e87c5f2f4f4f6dbc027703e218b6fb5ca0e9bf3128b791486573373ba0853e500236d71732109178ed257667fe126c0f73984b914d7e169eb8d37cf5934013a35447d6735694f3a74fe3ac981f4a842b964652e619ff99450b0bc1e245fa47c4d82b11e5f6c4277332a438f23f5d2400145d86607782b6bb5e6b23a10ceb2a9c78cb9a1698fc528a2b9636d538c0bea0ad078cb4b1d01db7f770e457b3453d92f3b4369ab7cd6d701f79da9dc97261f87b1149d06d945bcf7b365e5d2b0bbba09d25bd151e71ce7b33d43cc988d2a8179e8d180f8dfd5b65bd5bcd5c4848d16120cff1d1b537f4b5e25fa08d3f1d2562aa5632a6bad54037e1c1f96f988b3c1aef2b2dcb181cba974f4a346d2547e026358e543bee3116d9bdddafc3598dd224896a41ea3807733c3c191d04461b979312c87f3a8c49da461f99d6044d145627ecd000416d09502053d78536585ce2dcb449f3debbe5cceab2561d77e61d1f0125740cff2f322e83af91cc405a87bb6af05c0b71e9c39ccc00d3d81c4c618a8dbd1bd76af78b9efe671159a2b2c8ce607751dc6f1c126b534e4504cf16cac84c6d757943a1cc2656211003f2e7b72ba4eefe4e125d3d79d514dd0573eb92575db5a56a1dd7fa538d78dc61943a8620c8b52e65329b6fd5a333354b55240f8e0a36474d93dc30967c5db02d0d28086aea0788efe16a69ab4614e90c69cb964bc9919ce67ef83b2193b538e3b693f5cf37d01b5d7d53e49013edcffa09b5f16f547d49e84e6efb67f455b5cb077e4e0338f5681de9e1d161e91c530e8cfcc67bd2feb51d21861255ff1476006a79ed2438721bd7c07da1d97249546db71b78f1f9610a3e92b83bbf7f12ca4b7ef2de16d1b588387bb8b8be4708fccb27868d27e93041e485983c8ff20852a7c42ab8be650af82f63049a7734dd90dc6efebea60f263f9359b4681311be46842ec6915df18c4b3cfb01bbae1ecc0ea9bd1fdee9cfdb122b2cf107a50b67a0a0f0a84853c54f21f1e5abaf6fa295573b84d48f8b8eb8b812022e00691fb544c1581164f47c1b714c1ac91fb39ae0a32a13dc3861a4c43bff56db43ae5fc05865c8b3f66ffcf87da5655ff7e60ff1f94f87a8420a31a582d34771a182589c44ac624e7513b34fba79eba866bbae4071230f6383b3ecc31b2b90d5ab03163dac387921c4b6a7169cfb510bc3167fe978211e4feba388ea72183f37a727994b6e9506bdd09006bdb3f14753324069f768ec05af3fcb9eebc848d81472e9d1c87f01525fa317be883ec0b8e418f7203a9fc0da5fc6f1f3e09c38a425d1e3491294cb63062ffc255d08e37bb4e7aa700b9defebf71385b0a4ae7df069641a1b3d4101412769d20449ceb7d050c963df1aae15939d0d33fe60f008b20b5423ead8a993f1a899c76c9bde17c1b7521b8b89e3db70720835c368dcf1e07cb23a06a861d44ddb4fc30abec1cd6d7689ddc0cfa82e89f927f1254dd82154ee9d824dfc9dcaa868a83826a3dd35d5894dd7373182e2b2aead5995d1638e9ec8dc063833599d19e21dd92b98aca11161a37cd883ad547b79ef2555bb402c81cf6ae9c7539e0c3467693e15589f950673c532520344f98874e4604f111b86b45d648cd77cee4b90256170a8cacce1f0b231e8fb7f44a64ab2f6d94cbc5e2fa2ff80ad841e3a35cc95f6cedf72bb8a0f30999d1e84ee87adca9768738e311c65d5dc0d134cc8844817e2f1c40c25677a7a61ca22b238c81a0d090982c5ddfef9aee950a9a82d910f996687e90e41996c27b10ae4096a3fd7f0fd4b57ea6157995c620faa52a542e4fc54302fcf8d4edbd913c44ecdc1b08373a402b6fcf73159cfc24c0e4077d518d2b1f277fe91d9364fcb6aaaa7bfce3c02884e3cbef0e850b561b7cc7de1695c721760765ad31ae599b8226cedefa7ee9c39d6809acb3fbeae30609c7e85f0e39e7d64959693a1be4734a6c78f92bfa4a1db3d870e6d310667ebecaf2485ab1cb73f6b4b31833f9527c36b6e74b7a9dc4f633ac4c748cdee076f984ee3927565fd1499fb2b702a4efb6c1caf4f55f6fdd473ea51a79397418b05ee5fadbf4b3a746cdfb77b3068940da40f9486ad5cebcbe2c8d1a501718551e519c419543293c66df266f060f5235bdf30d05b9fd899b2d432384a74ccff6e1fa25aec0f2ec449fde0767dcf152545e22b7bcf6451d012f7af43d172cade041392c78a33962618bd4c3942362bb3d97dcd3df9d84733b39afbb6afd12f5ba847f6148abc13a013f7ca4f217c376aaae08319643e8d9c164c86a5711692c82aa8f074c426472a433c64998bd2908326d0fe26246c70b9cbd160cdd92522586d82a8f495a9189d2a6f6e844465b00a1b7a2853715f3a06fa187d3ab09634a88bc49b592b84ee275b59500e6c8107ef045970b5d2546506998fe47fd275e64c6f90380b95f22d9b333fdbecf4b78bb0f3610d03bbb36e388b55a3d669fda3da8c31e33b159e0d946f149f559cbaae3b2f884ff5b142fd0c006b56356784615c9d6014df773869fcf5f868703ab6fb9bdda522c6117dc9d0714e22001a80d726e5f94caf33738e5f59c600f3136b31ab62386152b9528d7aca1a847d081ebbb907bc603db7c97fef424b17e123ed593561c79aaca61979cc3e28f95fccca400465ab0c0da5aaf6b8a858822cdb895dc69eb370d65cf8130d9d5a8469cb9f42176802705c8aac845333d7f027197831bcb93b4520d5bd155d32d31018d5f341dde9d90c5bc9ee7ced70c7242fb4960c3065204a0c13c120541d2aa6fafc9cb82a89decd48140dff8dbb8d40d0244cf7493331cb6a20b59bd2f834ed98efc5c9d8adcf292b4adbb10ee2733ec57d32609c0a8f142615f8db60bdb1b78338a664074865a39685ae491492e7af1f190ffc98ee5a30338d01881a1620c2caf2ab9cf0be108fc7d5ab39d2b412b7a09227e85c669fbbcf3cdb758c3f056ce7667e83f274d382cee35821521e3411bf0576ead36ed05ff7b9f8b
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.
