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 b1aa2a1d3e00d321462afae8a7ab094da0405b42735fe0cfc5e4605f392500685dce5cdd6951c151c2025928b629daafa7c8223c376b63650d285b20cd43f485de951e352a3e344aa14d8ca05a5f7d7fc168ea0cf43d0c98944af427409e53ef897eb259b546dea7f177dbfcb636aaf63e296f1aada2201bb8babb26b0326527bf1660d8e1a555af5407f64474a3c9effcf1e6a40470b0b3c8fce84ddc07810e72512f7fddf083ebc54682256ee4efc0ee3cd2aa3c62871d6d9987401325480885cab2c822b718633009decd3c8b34fcb9ef9add05f10d6b67299c60ef78c174068309f24a2d0f1be9e37c7af8bccdeef8df43866fcfc267effecaf24c7a87a90a58e5c95c654181c8f54491873432c3ae4d663e06916025be0da4e7574689ebdc88394a2c2a1f168b7d8a4dae0468be7989f1716d9e4ed62d224e0eafe20d47726fe2545b89e2695dc811514c71a33c42439d78509cbb69724b96f00a4fed1181f5b14f014ee5dcb2452278e56077912d877748c30ebbafe080619496a805c1da1f7650cb357385febdd94a5e94be92fa2e265bd29e20d94bf4522a13e368db663737ed59a59ba029160dd1aa888a2b6fae686bae228fc1830ab9e2cf8b0b3327eb96ffb0d09e31cc181d7b6528927d6cb4ff26246419f6de10e2933188609bb39744252794eb78e37b0ba98fde41c4816be7ec8b197f1844c40ce6ab083727f4c48bc5237883af97a248a5b1b29ada91eb4f3edd74c13d117123e09cea78f2fa804a2a9fc1988768aceea4138183af80c5a0fb462caafa4cfcd1fedfd535187ad751a77df2cd7359d23daccbbde1620c88b260a6933d91f73c37bf56988787624845da1f445ba77118c425f1b527fb2295465fe95eba34557a9ff8fbb28ebe312ed487aae0f6570ca0a684a1c4b377365d738494118f2e19df37942548357f924b6276a42e4a92603270af18a29c287f0ecea3f75b4145bc33e86c3d48fd9fc34a0cdc3af83609326d14b52473ec3cfb77c40061edd4569f0d810e9a545d0d254e8a61490e61a1691cb13e1304ca8f1450f35a41de358d40cdefbc2d48dc63229fcf7712990162e45384635ea06980086c9fad9e6de9fc15234c08d18bc18e4e55f98d201443cfb660ea8d1e4e5b566e5b2eb2024014c4c71a1d89d7484f7be15ed2930286f291ad7764d189f7acaef9f61a67c070340952f036713c5fa2b4df94716a8714571addc085a5e11bc458420d84ea54cd5a50367b285e0a96e97b196515277cfc18593e78d64a172f79ee1ff8f0d074a80302b98e29db0e39d5c070ebd1c41ff0917855191cb29568645c93a6848f2635049929cbb1a1458e0405c82cee4edf12115bb4ad825d3e08d784b8812ab670445ba042249597af3363215b14223aae8d2808640e052196b78b4c25348c6b57e0a8f8e54a6cacb130d2d1c5d3f7d9fd9bd437bdba4768ab8caaa5347eff40f10ad5b903ea4dc35207a18a7a34f49899150d523855e480e07685e4acf5ee9dc659c4656967f153f652b8e4d257bd823b8b9c920331257f44626cf6b1c2e2db5b808b68a1ed5e0369fb587e967632c17357e450f5b01633bd35769a1503218e59e4225b223059ecf66bea333ad53d435873891be88751a799d5852579bafedeb94833ce4823e2332b929e5a09e52a1c16623b0cde9e0621ea6825a49945d06d3a504c252c098966ed87b29380cac2e964752c91e409eeefa821c337e06842be9adb2d100cd40881151606d5aa2ce548a5bf06dd6d95e7651fc59218b73a67c5f87df902bebd6f2fa4bb97457c4024c131172a624b4be2fdfd46aa62da1bb06b989126281393ad4d64002ab48a4f2ac76da092f17bc57a5d6b290d4eddfe8ebe2c2aaff4afb87f38cf5af250c99e2be3072d559a48e46cb8e35f5c9c5e62900413a87c605490610a24ee7f1075ea0cea096392f9da727e9d9038c45884055c7b4b79ab011504b3009cbfe9cfeea59e71d6918b33acca88cccc913150d4f58a712fed66a27463b41c423daf7b6af1525e227181cc77572365cd066a71d7c671667a53d8e203845cd72d4befd7c87ac76f2fb00dd2da95d317d7765223302a1efbc8747d9abbb52b712f99e0abb5d95feccf5ad0b1d00ba1bd862ec77ccc44927a104c159504ad4f95d27a20bcca887c21ac0e51e11d3d6a4d949011c54e0467ee77581db91eace7610d48762a6fbf6cf8b5710a6598e4bc815e64087ea318313553878dd0bf1275de4c3c747b082ed7df5f6072e17db6c1c3d8644aad130b4dbdb27ae5fbab5121a5b61e8c6993ff51944496dad17b60573b2a7efb1f7ba7f6c68e458a267aa0400869abab636e841b328e92ffd22846c89a17b3c9b3
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 f46fb77ce397358058d4820fe6cbee8cdab9cdcc85eb3e5ae44db0cc89f99c358838db72b14510ed69133e35873736d0baba97afa3a33c499212d92447828f36fdea4305e19621105fe106f8f246cd78a2cac099da83ddd1329c973249cf0241d8a042c47b0d9b87a22df6bb54c153b4e0957de13290055bbb8f5d11892de09b8cd9cf9758c4a701005391f9d66e905c1d24d8afdf311fbf1689bcb85744af428f2c8b3e0e1ef968e4cbd3228d8981a2658345f0b26d6a31c45a0b1317139bfdf8245392ad1c0c597bae6682ed56736e54fa46a390115b0d748a559a0a3b6d7e7a815e71e0d8baaffa59e4f5cf59cb557a2944c79b96df591c4adda25f1db46fae86ba3a13b5e9747bdd74ec0519cf12fb5559b1dadbfbc1aa397ad56e6e28b0f01736605f438d4ebcf5afbbb991f891fff51774c76028e0310200b526135f45265bd28b91df727135efa5cab26e081c03862170ff4a22e61c8386dbdddef5133b13b74a5f7d543d61b3a4aa06f227980e53e9d9d4b8571509952504845bea75c73f81b3a789aa6042c3e332d73a710944cb6584ab036ba565892f664da0616b0dac8570060ae01f9042e4b110f78aa97b179165a2a834ec16b972422b7f19df902fbbffa97c3259d420cc0d3d14fa3893bbabe1a38aa5e8b87ffac2fe737ae5f6b1c13497ac89141c3b3c4cd18e38f6e1ada6d98b9e71ad014c585601a3072f6fc6df45670e01ab9065d7f2108316170641e5221f4ca6ef785895b8354b4098ce1c6fd72dc864797c1ba6a8dbe0fe172f51d7e078b7af51dfb71ae83092671188ab58cd1ddf4ead9901e9c820eccfcdf8f68c159bb872f7071829e5610258509d49d96b9d419a7badccb3787aa0062a9399621f4b0212eb4679485e0fcde6fe91ef26fe1ea278decabbe954317549a0b88c5b75642405fd58312c84b67aa7ef2c3081ef11f00f72e4e1b812057b53361cfcea68ce59affbd2f7c4be0a52632b1a9f39903a9667edd762cb37d152be957d5cef08d57bb00b2a5bb087237fd9f5b7aad1d5d87741229c9a1608868f2b17d861286db693a6cb2f2aa27a9f51e6b1121dc492ab11bd019d7d0335e8aa10a5d21e0f9be76451d86363f9c194c16a0c3bb878d4e16982547e16fa3484d1e353146ff09710b100bd5c92233bd60d09a53759e20c0dceddf492eecea88f9a2a002b480f25f98b9dc2776d0ecf325648fbfde3d5fbbda7d7b0143dcbc9a75b55357441e3221be295bf54d6ac6aa7e3f3b6a538cb285809a80f26a6ed625239cc7fccb3a6688e3a2c55a5dbefcbadf029f531f0f1adf1aedc0fd3bcd5e07aff4ba059834e3d491f5eaad2c8e9173e2ae2a12a65bfbe28450d783e1a3d34696a1f05f6ddf5b35704e6876ec0eabccb71034cb64b81aa46a4f31d8ba839501adf57209c69eb097e9b4352e24a52f2bfca6dd0a7662882c6ecd48a0b9bb9e46e380259c39d0dcbe64b72f720b83adb672c8790992fd59fd5d11d67d7775a92d0db31e73bc37da806276d60b1a8a0a16c98fbcd6084e57146779547ab3789eb31f00e248beb8959e2fef3c96056e97321f4e063e2cd9080620958599526e950cd346a1821638c13a0c5280a31e00757f1a0d9b3014b4a255c6880ec84c41808355c20f5ee3d1cd85f0bb3ed58843122a11d6f10f6f9eb211914d4b2f02b5f298fa7f6e69dbc417823ed9948385b80593b7b3608d3c5dadbfe182d99444b377af1d3e36e9b9be1c35b3a242e3601006ae9837131e6048d43bea58ad7ec49d024438439c67639dcfb3cd4ec0583fdc3f0c5ee9f044d95ebf612e2f9b214de1d7cbfe06f0c88c4ad09c6e42a672bda1076a1eca5affa32cc1328389a81eb894ff266636808ee97522108f2860b704782dd72159b1b218079ba1c6d7aca28b1b8c881acaff1d75766cb098b93e4d009b572cc900d5fed6cd73fa46855612d993d260865e4af63769ba86f1a3e3797fc807c486620127cf985c73c2ff58fb0037496c2300799c79a738f6c78efe9232ff68f526b4e76082ad09cc750b0c88052bb98a33762640330c4aad882e2f828fa36e126e4f081f2d2cf4f2d9db5ae40b6498502e94ff96569b4fde9c598076fe6a3d9127e4b27635de496abe750af589de59166929fd4aaee9a40778728a84297c79e127ff8ffd7dc750ba69af3a0b256ed95cf93ffcb555c59cd1ceb983efc61e3ec0ef3c0684b3c244a1fb19f37e34d96bc13ac242ad232cbdf3eeabd543b7849c2cb6513fca2204429a5e7b7cbc94afc278e55ab667968b8203d1df1e27a195292c9b55556e87bf61a83f42be0a3b5adaf91e9d048f19338f63cc1204aac80068e0f8823ba156c18e198639d71d33aa96da900e7f47f15ec108784c2aef2af7ce11624ae67bb9265f1200cb4ce9c65ac1b4c175cbf
A notification bar could be used to highlight important outage information.
System status in a notification
View code 1816c13f7147abde2de725a790866a683c7333ebb6b95e0cd3c214758cd58c59f38944c81a3e01fbc3e1f2040c6d65c17a5e8e98edaffb31e87c3381c7ed9a2a9ce38bf373856763119584bff190d6e3ef6e7534c6320b19fc2232eca1a06343b9ed18923c6fc05e10f7d900f85bbac95117b12c45718a186d11e614cc245f6f27065009017507cdf61762656d49ef6c6e3b38d32dc467fda24fe3eeccb71e80416da173a6ed8ba05ec287a8ef9b97212e8ab8d0e4fa6d8cd7c06a34c37632e73b65672601dff3f021dddd02f86ea1d2d4435fe298cf7f70e023be2de87f9063b9800adae696b1d877de5cdd0002ebd69b44901e3a75098d65a8b5d7a47b414385fb8d1a683e56e597344d98c417bd7ca4baeae2d3d7ac6559b8007c674ae9058edd097ab03230a49d5605d78c3f8dbf725cf455dc969d67d8e7fdf82d3722fb2306c765cb06e09193e9e1190bfb9159593a85cea9cf4117c0027e5752289daa1d5e001299d36cf491a119c5be4ed54179fa95bec7fe6b0721e4e9d791aef5cc8a6e151f36fa0fb4bc3b9392aa899b8fa4d467814c5b5258c54dc8cba452d66a73b677551c8d40b99ef77dc76b072335232769fe3960564ed99d16f8ef49312e11679931016ee2e11b1d0fdf2816137e2647e5d7641e875b5eb706b6c8f388662b3b7bbb823f0ea1e3e9557c516c9b42635ed3cfd22322b8d6555bc278778f816e466d4c9331b2015e48f298243cc32671f5bf42eb583845a0dee1ba849993f4b59e6a7106cc05e210178af558b9cca89db3b627da9337befae45487bc352e1090028b12c543c821ab57664b2c18ad83f7f4781b30f6ac70f170d7eff494046f6ba93709fb2e29feab9509bbf8729481fa9bb57f186584e40eeef46248afcd5b2aeeefa6c06b06b552989ad85f5524b73e39c9dc93218ace6af522b3522455d9fcced25fa80b0bf74536df95775cb32ad0fad3c7f1e5fbe6ab682c10debdbdfcbcf1b1dbf824d2bdab9a1ddc40ffdb3737d76feac90ea7009378f6e0515a68343aaee5d1c811373b82ede69e361200648a7043a3bfb49d184d8439cda191d7adacadc9bb1ad9ea1f50242ad7fc65a47b3206763859e27921d0ae1f2cff70f88c7efeeb0f0cf7471b4ec3da7585ccbc1515fcfc4d14d01f4dd761abf5dffde440ac8e50e93428177d72818f11d99f0ccec707d2f7f5f79ab050acac639de8753683a2d2f6f8f0035ed7f4a92f1fedaa6de905be7b81deb6079a137967dd09786b1c8c90940d1c9e06b49d38eaa348450f70e988bb2abad1836f81b603ef799bdd8837c32d061c5d99aacb2b554cb1641f7cbfc78b3ed3593c0ecd14b05e8fb1cd3f6cb91e036e318c8b7f877b71d064def3a79cb702918b0e1092d23c83dcbed290420343464faf572768138efcc5c7ef306cdc5c08f51726cfabd39a7e63846ee566b5aee6ca64e62b2de04ee2acfe97a4aac7c3ccf26c9696e86f786a4917de9311e6b0ad89332dc6cab76ada523dfba5bef769be178e958612e2311c64b033fbe392b7816d1f6cf715d75b57cd1c10144e3c62fbcda16587c1cbe82b60e2e91a6f6a5141ff1281a8581117cf517bc1e2910a3110b346808ddf032b8702bf9b533d9b6f62accc0092d74b768177fd7d95f497138d313179a5b590266f53a3ae9349c86b068fa45b621d7cc9c9b030427bc0517520fe829aae40c5f39dbc26f14e1b9907efa583644517c0d89ab5443f295396b7decde90cdea74eaee05e5c3c1715c74b2593c735bb22745699fd8825e4d5fb93be4f5239700d7ce70287cbf6999c2a2a7920f8a19bba41596a0b023dda4a27e7a1500ce2baea4689f10179695cabc07a7ab7d65d01bb758955afb5a50600e0a0e055cef82a45a73b265cdf2b35239bbccbd90ff9a18052e98a649bb0f80d1ff29688be4633452380891074279fddc5ae178ab4b28df83953345ceaabd085e8efbfe3868650a6f8c8143b96e27723730a0fba281202cf4880a9b009d11a2f194b246bd494c5a984bb5ebc841b5dba247db2b65cee85efae668a5d33eb26956a7a8ca0726cd3b2111d48a2b9fb6a610eb27aedfe432de75163e6de2ff3bc2fb5427d2103538a93bb01ab1536e110e2df39d75548fee2c41be5b09df43186b9a551e266b15cd92ff676f95e2993f7341faa1671fcec86505bb3c503c8db1a7269582a6707bde7924706b9afa602bdb9357745a443830673c3e1d807f5965cad716c1718ab1087dc2896f2d0dae16eca7cef65a45174f1b6e5ca9e1de66b41f70a254c73f14b27460ae832970b8cb9c32906b673898e3ab0658329884e440163bb2a52b0e93d2f691a6e5bd90c6427ec80de9c797eb92102457582e148b989509678a2822765b3880958705c6d1db2bbc6f03237d9e7828ed1aaf38754c19d77153a10653d635a2fe9311b12bca332d10e20260147736fecfe5b409f485ad52c63fd59fbf811f8ce59aeb8d720c07de35ec8ab7e09390ce2390f8fc2dc3b74601b4edf26dbcf29f8a3058534cea238a742f3218289fd44558f74103bd605a14be20304c2fd72c5e05dc8893ed8965900c85ccb4caf48a159825e1a64ed2d9728fcd70359340c64866307f12e105196ed159fae8ed3dcd840b1424ca1cb3ea891811de1e20adb14b559c22094b0306396a2d7054dd8220007627f9fb3321c6c0ef6c685a60a94d397e39657748c15bb88a61930dc8c28c0050e8ace4838fbf8d985c090b5c1919d35b4b619b83505b6d4f0bb98d43463fe8b3d64a6153af696df7288f240843ab3da0addd5b34b09f737de2a730afdee0a50fdc4d908ec0234d330cdcee3bc3f4a5c61a88a09cffeb7e954705c4672168ae328e8485f9b37a731be2fd58399bc2efc28ccba1354b42a89bed55d3e59d66a0d4b0ddd5b793d23fe469b125adba66f563e3e113f8000debf4179d66d74472cd723932a4ec85ccda7b9fff9584d9c91037bf03a1259cbddd4587208c0c088d7a4a388ac241601d550abc18968488631520274ea38094136d600a7c60ad1554bc4832afd6cd92db152d42e8c6b4020c1b64abe3b5c315e1c68f11bdbae9aff1d9decab0992303c39f7786af31ed16c5d07cec3134ae6a818899a6f5af08d851ecb6b6b37fc7c32a488366d31de79d55baed7938e2e52edc4f890f76bae4b8c461c07f3443aa454ff1d286287f0c9f398b68cf2ba69c6967a46ce07e0e5999d55b9ff73d4daac361e12cf689dbaca8c9060bbce46f173f413d7412398698ff139aa98c6fd37596beffe4ffed7205f5b31ebd1a23857efa64466f04772105a629871f43a44ba5bf2beba82f7d4b1004152e018322b0aaea7d957b0833678c8ed2a943f0c73c31b4cd43e6b44c44e641d26607cf392527998687177df8d6b9f260ea26186373a336d604e16d2a570e46a0577264e5b4610c0151ad6d0ae740ee5a4b783b3b25cc8b50d19bf349f8e8ca61a1c83a5cfb16df6457f84b86222d896c6218f126e4903a0f84cc9b95b40ffe45d4799a148b465ec291f4353fbe252d3ca1e94ab5f8686d9bb291ecd8a9fd00372ad32264a459160a54e6f87a4293ccd830546f753d535e2948049bf02aa8f68a01dcde675db873f1dbaa7558be31ef5695b45a35e80bc73993655936b376d31154e303098ba605ea17a7effa3a934bd963f1e0e3120cb4a0a1b44437d80b688e42f0be6e0fd71c8d73a6db14dcb9a3f8bbadd5ea8fde48d2d74086c6af9c5715227f69f2db54493357843edddc2b9de2c098db948081af1b90da01d3e0b957383f87008ec19ffd11f2d8db36080c561b13002005cac118923a30bb04e584a9c31c88efecf152a991f2e408f11e0f72fd1d5f9670afc6461147abca86202c523a02799ca0c47933fcfb67288f5c0c5b04080a73b8ee335e977b703d90c098d2c283415d6c348b74e247906d61e928745fb7b9d36c6319e8985f5f210b83127b0e25fe32a5109a91855657569f27bffbb6132fbfa0316bdcf0f925229cc88ee87ef58f41424cce0e37d2145c0c7d7a9c923dbb766a1f3149f0517f8a4da5c00dbf33fe5a00c8517f6530aef2f5aa721b2a37eb8d00de9479b414a60a6aebfc2eaf0ca0ef3c524f4e7572565dbb8693a00c8e65bd5b856c6cc6267e58ed3c5b0b60e2ab54f989a16cfd0c4927b516b4ec35b51bcfda40028c562986b8821eb1240e475f78b85d33576
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.
