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 8613ecbafaa5621028bfe6444d74001aa8ac035c1b70ba779d9c1d9cceb2a7f4b23709f7da736d972799e4e4091e935e857f2e39bc9761d8f6034636f2f1c3da3aee437fc08ae4f5a319daab2bab2671934a199e5ba10e9c44ef19bf4a133288c31bf28cb176d58444a54bd1125726497f5d1786af1ff3a76ad1e342a2f19f50e5e98f0581d1a2c08f90c67acc473913e1eb14e477c92a2e39741cd05f95338b339b514aca428142e1c68f378ee5f18ef3dacf7a44968cf68c84fb1eff151c8ae85ec9a58db4d5e00498bb93bec3010b21fccc5a06ff42fe29a4275fa5fea64a721025dc171965ed7f073e661e4e5f04b520a6c424a09dd15ea78f473abfb6e3280503555c888f2c641c88891e840fb46f93c8c406745600588e282b7c09b6ea8504b1709cb955ed0a1f0f8f5a1eb6ce352d3507fb214bd06523cf75eab682704e7245bbfd99e50e6210d2296a7a1004103428e9ae1fa886491633e565712fe31015b699d49fdaae4c1e7a723848361fa25c1ffbc25af0830d08ee9e49899e188bc3185027eb3fc0a412a80ad7f65b09fb3a18cf914f40cae4bc540f53d252e1aeb584140a356e6c02abbd08866f1eb1895200469001807ba5a80b8ea960b8a08798efea8cd8d056ff12ba6328b82ef650b782af7b5d427eecaf01703e6a582631315a0859434914c49ec76dc6f3c0ed7cfd929bebb8adfd70cf26bd99ec066d4602c20f461303f5e82961681bf473ba1932159c3c40a2a767e786b4f6ddf301af5256ba0db687846506afab7d348642f56bf30dfbf4b711cd24e7a794fb514128c8b54bc02ddf60ae7f3125cf10929b221d41278a0b196c0be4bae12bee786570c52d167bcdfb3e753284f8694a087644db176749a8f37a412d2fba95e867ad8bf56d8aaf0f89b764e56ae9f3471aefc98cac24c9d9d9334abcf145d941b0e747ec1bc36dc0df5896e95e430de2e76890152f1061aa05d4e9dff258ade06159e6a6065f8af7ba876076146d15418c6fe929469efbc423a17512be3adbd6538ceb7d2b6422a3797bf5497d06e2bee118389610935a225a401c5190def48a0511fb2e28e6c1dacea66c01cf248e3aaf9bf4db778f91904a0968ec71a4314d5cd9090a02ead14847b13c22ec04a47d5743f65341f253f7cfc38c688ba37bb2b443ac957246d995a8d932271f18019102868b2bb991333fd94af9ab8fbe396d0bb45e68d6fedb0627c8732007a39462001160140d3f0a9e2d5b2de8b9ca3515b1bdbce7e6f3e6260729b0c3d5f71435deb5af0034b2e0b7433d2ec3f2db0decd825bbc1aa5b7085a1806dcfe64a803f71fe87a36e5c3eeb32ebccf08b76925e8da1e2ac25e9c6b5f146c5094744b0ac8193d1658f1251fa6586fdbf61b4e81e5e9090fd1914f942b5ca0fca7bd64d8742b6ec606923854bbc9e5a8226e033a724797cb38302f9f35641b038a571aac943093282a8771c54493c59d481d2c5da1d7a2906b7eddec292ca04d1d638b2f2e78dafae6f5c99e0487836d3bc9bc559fbad5912439ef0c3b60eb915d180992813756f3933c47187063c6f83c92aabd137dfa96c6df3ac564257039d90828caa493a3f5e5bf9a357c7b0a42b40a80ae37ad251e8905581e4eee0676649a4456211eef07f6cbc8ea10aa5d8b3f5c039f0bbf01c83bf483313e60e83781fa59c251fa768ed002e1b979505745944f55d80ced5dd0a5d0d31063015656239e9637d2e329a18f545c64583b8c6ec2352c877af3646e37a6226ecc8e08153f1ca1b28f64c5c05754b7a1c876bb039ef10d0028c173ff1d328ebaeb14730b53d00358b9912912e5f4e171c7a18ed80814a4888c9cc2b68d7a6deb4e4e8173cfc4a1f375d5efce9449dc5c08cd948e757d0fa0319a3db38032b7a7ad64fe177ec52e03e270551d3300ebcd3fddf6cb61be0ac62cfbf92c71db32329b75e69c2e617d88283dbee39aee27aeec9f9e569d4146c15a1c5b88bae761a9eeca96a5683929f89f362e347262e64c636b128e965d1e57a054b706ef392d46311e06268224468698df312a636b40953098a0e9889b9590c071d2018c189e924c1e57bbbc5f951de537a6330efb08024702a85c720f245be84861022af540de26859bb1e273886f7cbe4c7d1b80b1229f1a85c3f2ebd779b006cbb90ac218b2b9713c0eda02946d5310c5abd3033dbc513a1dc921a1c8eb56c728582da3f7438370636c26314de920779e3447b6887ffd10e55f147e3bb546aef885024ea533e8796a3dde027e174ffcbf7d61430565eea65b5e63cc6c0635e23fc80af03b680a8ed72cc4eac9036baa961f8fbdccc7685659bc3b329219aa980ae2e67021dfad074981d06f474396ce3
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 bda7c908162257a5a0f95d97d8fcd9cca7505cd4e8d44ba5342d025ce94a2235eee589f588e43c8b0938e20d3223ae2d4ad7f7bad0964f161184624b65a7aa28198fc65cac500f15ad54b50cb4f20992d72c9bcf6232f3c971398264befabbe93f800984d7fab45d13695f94203ff3c0fe591321b1739f07c109a70df8a6bc392334325c59e99cecc9e313bd9535534dafaa90f55880cfb70ed3f8f9b1113ab6349108a358a13f05b90622411fb36f2fde1e99af3a4b983efe63533e0da2080d667503402a2fae91d6051e49bc9c3c3a02625467d0bb90969fa853494a066aa3639d95460b2ffa7da71fee044b22449663c9182888e4a7d80f83af6a98ab40c18428409f16e9d024f8b2f4dec4a476df641b2a6cbf1b7624f1b84cd01f0508f4a83f33d43ac322730dd1bb516c0452ede957abdc8c7650f03a7722c903d79073660e533f8e522080f1652a6cbfce21140ce686cead662c647fac64ecaae42b9e8feac963e1216f44672270c3efc0340705feabb717328af59fe6363c507a1f045c7448c8efafe4f1657369b3bdcc0d422e3b4fe57c7fbd9410ec8ae12b06c8a4787c0e3976b930a26dd11300aae034d8db484a9d3f10f1de53cc594919810c0ab15b898143e01e16a3df115bb67a28bd4dcd03f603861c99b70de8e889c7b7d16938a054f7f618ed03cc5f06c84aeba76729e26a98ffa050965f7772d978fc9edbd866070f71defe020fe93062b2dc12d3f1f7271cfa4a48fdb8c8f8f2aea893ff7d604b9c08f4e927f9d278343c60074a9e6cf37188254486cf6d79664f53c78e9de91038931efad414268787a0ba90d4cff17a4c9257e338c9c78e811da28c7575e58b6dc34785f792fa208a4f680a9a8e0628d0ec6bc5a60fae28113c7d163aa9ac13a1d6d1553a70310d9aa567b3baf50672ae96c2e1d30c6637b4bdb426f2f1da26fd62f570a64d0a3b3f0cbe077663c65f7ffbc3d082b9390ae2021e08cd452bcb29554e12e408a308924cdb8b32f9bf5ccc4efd38ec57ccb4a6eb8166acb4bb990e8b6cf93a4f116ddb426f11b1349ab40ce17e0539451d5c511b9e0a7d85f48bb4b2e1e7044965d7f43af2acf2fbd2666e09f63c1dfc38e0e3957a0901ec04fbb560c9bcbb484b38708e3fdae645bba43e0aeba922cc9947b97ed7936101f3656a92dd89b09d57ec71b62cf876d6ac28ed47448fa114f2529a2d49c8c7b37353def65b9de1353c33ed2038b73c323cef7f4a18997577a386183c6c67c0159cc90c7dd488f78ea11632e700b198a755704bbfe208bf12d34109bc0c55c292d838d75c8f717246209f381a8255302b76068d499aa11405948747c1f0eae434ecb3b67517392df2e3f6980d97080af2cc93348b0bd41fb05629de93e07419f36500eeb1349e976057018389300b87513c701500da8d9539194185c1bc5713739ae7fc30f9b332aa0c7a99ae51a03f49abd6417734ae4cfad25b3110e11270f4f38f590d19d5067663ba841ddb6184cfd11aa91b9c42e9328d948a9a95cf46f7b9c9166ef4588e5267eb5b16f460db51462ff04000cd8a4e7719ee8140d05d27328f02a12fc23633e45fc001221db2972709e9dd2270fba10658fe31a8c975037d5f736047483dad3bcf8bd581767111c751c50ad731314afde65637f429ebfb7440907116aaf8704564c9d14c8a4f25382868e9883dd11b5114a4a16d50c09139388c7df19a8b8acef94f56cfc653e46d00a4c69e15204bae3590fe68c65e5f8b6da22a972984d3a573561e89d190f0a710a6cc86795dda0e0b3c57a220b29ae3509588a0d562335b5f8fb09ef937dec5ad3bfefd09b73e031226ca05234a7d580ceacc197188fb95e2d4d6c85d425575d2653b1921ae8cc04325e957d3431cc7340104dd5c46b4edb22083030dd97bb1648341773b1d64e7b2b03cabe1c74490d39d8dadbb8fbf1c5484d52958181bb825c039f27a13b8874af3d44c9436dc2050eed3dc37d50fabde4ab7eb567bcea5eccb0281477ca641089fd4335daef57cc3d877a83bcad86337e8807a9fda4cb75ddc471f8c0ff6caccef2307e1b8239aaa98a4abdf967a44f5cae96fff5fa03b93cf8fe15c34e972f19dbb7102823e39cc06757090b1fbb86711302117d7c642cccbb01ce2bbe03c5c9b13726bf62b8c97771ca261bd3bea2d3f9431c4b9e1e15f27a76bfc1a4c9ba3bcf2950138ab5eea64513990ba5f8c42dbd785b7913fc1aa51a8c52f5c757baa9e0a706e99e8de78c5e16c421a42e774645156c6026f3f4b7f3192d4970523cc342242b4be278dba957e5a80dc41b7eb39215dccad95b58ffee1c820d7363112044ad03582b66c7a8ba6d8b4a1546231e88b5709740a97a0fe700a79c926279225bf696f7629a18116838ecd22687fb25da9e6d7
A notification bar could be used to highlight important outage information.
System status in a notification
View code 0c296bf988ab5212505390f4955676e55a5993b83d4234c874a1e58f07b77759f5593cdbe2fa0cc833b6a83aa66d3dbf74c3a7831388c9aa463c48495bd978c6e65cdee7d6fffb71e6c13fea780f1e790a1a79c35fbb257369244cb537686d4d450ed51745efe22294c69a6cfdbf1b2cb71b228b361882d246fc2e3ff51bae80947fcf31eb70d263998d1c4e7d3ee30e579fa7fa5c0b8a6e5093e23c4b2808c54a90d07b3983bc7a6bc9ff0d4f4559f96751c5889c4694781d74e2d8ae46f471572695c43818c65532523a1728962a00d87b261d4d3b1a02b5c841b63232acf994b124b332b7a0aa545e45a10d0701e8f4254abeea9404f86138c7e6280fc3549fcaccd73c29321db48f4c5da0e3037bd61246a262bdafcb73ea1a14e3fb4d81676b12dec607abe96996cb623016469191202e15b0d79b8baa995fd2653304956bf2fc49ef0106fb2efd4d9a61cc8d6165a538feb027162583863658f32c3127eb8813b456ec566d4440218d9841b5aa286bfc7aed9b7e7407eec73dcc6895b52664bab527c0f13e3d2dd7b6390be5363cdefbf2db7ae4f8caff26948f7bc47dfb2d771ca1d9d3ea77d07bc2d3d92e44d5b2bdd0303969f8e2331ec99a5498df023206b6b5c42c771a3d3e5dfe463bae90456284c95fd576099597246c3e50978dd637d76538edf5b9aa7c29c812eddbdaac0be4a84b57b0e0192db762e390da17185f9baddb04c0faaa6bcba019c5b07fdabe46472c436255105ea8392a2db258505cc26e494aa73d2cbb4ffacdfe2c7dd778208c89cf464a56ca5a98c0fa0d4670778439141d716fe166575797cd40207fb5c138abe0df97db9427aec08baaea61412e245dc976a3ac8a2e85c5c73799e5b5d7199b57751e77e81bcebd6fd6894ed6f50ec166b9b044882cc56da7939a874bc9b64144f4dbce1aec959212ccec356c956687d987b3cc73455a9850adc1b413b3321dd9de47f3123afe2f960cc67071ab8545813fd7896ff65c4e7fba55d3ec2fa2683745eca5159a2d5e1441e9102e797084db4f830169c5a7d7d391a3dbee1aafac195ab4e6c7e49454634ba98ed3cb9e9e80a0be799d5205fc8405e598d3e2211744b4dd9ec941d807d797701b3221473486a031e72e5a739b7247acbc317cca69493a1b411bbd6edc3f3d6e7e7db0630710e9c8849457d036e9427197f6d14437ed5d2320906c455dee688f54819e8755409515699faf6c0ae165e27638f87146c10f023afe5809bf59ec00819db320406a6431a03ce48a28d01f9b185f1a1aeb38e6cdd99eb83bc70a28b3c20b80070c06185ef63633f685857b96d0b29f9a43f7d990d572c359bf8d899b6f44e1a2ab026d584df55ce258e56b8bc23fb38705cb9ca1fce6f17b125cf36cd0473b44def262dbb40e2eabb258ce1c8fc632da289e3f3bb4d5c43fe76497b0f16145a31bd514b28fb9f963a6faa6a0cc70cdd4904c5ae19d2241c80f6e93188497ac3278203e25640a5882490352f3c22dbc0135f501c8dad59fec4a9dad7c804d1302347f23e470a429d6673d8af60153a73429ce04f8fbe5ac73552d962c08c29f3d95af77416c0c55abc67d2185daff7004507188d5092a9ef733ce6e095f9a0af980bbdd0d9d7a96644bd55f8d1e80813dc4925af858d228fedfb28de1d8c59d103d95c0c0fddffe70ecde23a47d03779dd7f2e27105ed64872f9cb86ae5eff3b51dd6918d0701ccf4439398c062316a697a208c3b1f8c54f1d2625cc6e53bd1597edba4095ede2e8138bd7678a67255b3cd3cba39d88f6f3c11d783f45e442b6595df6c02193ef6a9bab0b764bdb35aa2fce5a295701152ffc8f29cee089ec5661d513fe8fdac63154018a4b522d1fc2b59b352f1b16357f160a16f8bdf863f3e0d13ca8c7569c0a48664acbd4b99bf4b1d85d95927e8c947c1ed7065f0f5e4828ec556f472a4af141b2982d25424d69b6a69c570ea7fb51c49e39a63248875e87c732372774122a16f34a5693d107bef914531d2b84c99e6e68e4ceb64b96f38a49df3616e501496e90744c52fa09a28d5198fc4f6eacd0955482b13ef7143576f52ad436989618fcee7c050a9393a4be9ae001380124a1e2e6bc9d121020dde2bdd47c4f0e5c9a35827422e0c22f650e0f48b697a4aa1e784442f89e3abe8a39d135121ddb174f03df0497efa6b3f33d0bb501345bc8bd8712f2d6d39827dfb57faab61bcc1d074cb3367f3f43cff4464d4ed499415afde7d6f280606ba7f69f0c9c023f2787238b64c760618d6494e86c147b30a3d77c6beb92f6edb7a4c809d976e348b87bd102b72d837f3dc216683ff6e5ebd0a6c8c8189808fb0e49affe2d823ed0ab0e1c5a74ff7370bd45a58611165d666b503f4519217a80b11581ebc366b54ee21713a78f1d2deb83f9977feb33a0e26b678413a86ce6fd5d5aebc45c00864fee54dbe65c0e0428884195c27256ab839fe41745d70f2db57a824f5f91dec1e256e6975142b7c8874118116a827ea48969a6d099e1d88ea2cc624eeaaa50829a6e724314e36aa525cc115b26c6d15159fbca74c849ce6f41bd77efec5ea3733e1ce912fad31a4f0ee0cb3d5d8ffe684e31679369b75a6ac56867c12fc7752d51c7fda3ccfb1c737fc214c6306fc8848e427f900d9af6e5e3ac6af64beaa5c3dbb117273678b706634a060d13141ebc9b93f50ccf987f57716e9d17ad0d12a25fae19ddd9e27bba5f22bf63a6f689c6307f78b00f35316f30e47726b0d50a140dd638b435940d3a0d300cb5e7ca68b1bbb0f539c458a818b7094e51778efc2256a44441196e4c8e49c71a81e90f3cca5ed8afc53fc047687fd687ab6316c96a85151961d42463a8890299c5142dfb5cc593f67db9bbb89265299a13a15c6f60a4523440566ee94fa34149ab5d3059d68bd5bbf91b304c164dac6137531df1bbe167ebb54a83f156dd752f22e786a4afb23e5fd260edf38a1849a03e7941d14106607aa7984cc7a4eb0c077e754452071ab56c2d8d773b340156586135041f010fce7bad5ac47c5c40a2d1fb9cfad205c86593f351614db5b7ece6389f4934a284b3b65289ba8f4e9abb557947130439b5c23ebc7e1a72cb686798cd7efb215de30297dc0e6b0181faf0e56a766847637f2bf2aadfd17f24a5d5068f227cb272781861418eb65a434be06c5d46f0a01cfe63480153f254d921c807d54a7657383cca5d49fd9f0d6fa13a7f3512c70d0ef51a915e495c9c62c8a702c267ea440a10667dfb24641c99a26acd10da9824116b6f356ce5597a05b64e83abb46c185843554aef4073531e7ccd499a75468a76b9b4013ece4833fd1bb06897e9638868ed3de7464555176a99c47ef133ba3096942e934329493dcadc2d4024a95e78f1442c69cb1b981efb9f839aceda2ee1991bd93dba8cf1a5ad76ea813d04ef7845851082e0a1aeac16868aadbb7e4af4553b5dc26c9bdc5c7c6288cbd9bdcd916c52d9fc74d410142b70ee6d329b243cc448f204589d247c54810bcbf30a73b30f4aef7b31a6d37dd102b5883c0a6f2833b62188d00c0f8ece16a981e04c71ad2c52c25ad516a000468ba00c25ca1e61fc1d245c69be83c3427d7b397b1233efc9c95516db8039f99479ce5e1f929bf297d65b211e4f0ea943a54a0374bc74185a6302b78794d58175197443fa6203d671c10c341007563ae9d6dfa3050ba7e0856a6c221f4b848a42edad8173e7256fb0bbb68b35d92d6581589c140a2659b28d3aab31843a500c375dd4f9b4cf625c448d60587246356755d54945c54b33de356025238f2289442a603b3d2159cf40da4b1670a16e8b372105b706b20bebe39c67c4567f769afd0a7ad27c0b6fe0a372f314dc05d4666db2a69d48b1a7d3da31701eeae95f5580402a8381aa4771aa6ad2beea56f66eb31bcfbfb2f292d8c4dbf9dfc79c2484b86d27a8bd6726e2ef6616f6cd60c6c1f840f1023bca90e11195b418a96165be208e58c7f8fcdec29eb44388a418e42210849b01721864970f015617625bfd2dff2e8ed2782823e28244bbc55f9e5537a9c486ed2adbd285da0e538f34ae7862a89ce87d8c8ca044008e266d38404923e02fd65b7eaeb1f9c6a4d27b9a04a14e5b1d71d63a6f257069719569c6c4ee269f463579197f1187149dcca81bad516395dd26a60f211868bc880698c6ef2d0717f
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.
