Featured articles

Display a list of featured articles from your help center that have one or more labels.

Promoted articles are a great way to present important articles in your help center. Featured articles can be used in a similar way but are more flexible because you can filter the list of articles not only based on whether or not they’re promoted, but by other properties like labels.

The example below demonstrates the use of a custom article template showing articles with one or more specific labels.

Featured articles by label
View code
ab42bc5123dd2732e2878afb048d11a03e4ca038f9f865fbd420289c17b53cb3d9e163ccacab5dcdb535af4b924895d920cb779e6c2fbb02dd027688dca2e17146991aca94f3a549f41e744bb10bb6ed1026eee043460599bdd65aa013f6b8f60b1afe681225e20e0e0c2848df117d10cfec07ff5299656642fb60ebcf4a31a7d37178ee2df4ece848131d92785dd067b1ab82aef5a0a7e93733585403802016c3803e70ad71e82bd4c4e2bd2cc1194782331f095376a5b0f7a13bc3d8678e39081e86328bd9aa8d45e7196bcbbe145603263af1a6062171ef06e7bb28428cb0bf41c1568f4f4dc82ffa865136bf7ac75224adec7fbe65523f712dd1ebe907b33cc68a7bbdba047415c6edfa8f63f359efb7b6c34ed5c50643aef50ab6196cf69e3a8eeb97c8196e1d6a5f3e3576806c57e8eede96e46252924f711ed55de9ed332564fa3ef4f031955bcdcc880795de84651944c339fd94c0e48ce51cde666e600bdb120ffe7fd8bddf90cb66392fb1134fe9b4d7f5424e0c83154847dfe2a859b92927445fb225e7a73693c9f4ed64536305e53be7c0cf6b06a2f62304df8a0b244dec5e1cd23b38662cc902a608f7e312cced0302050fb8049b086e3c09f52ce5b16e0b229a3422cfffacdd6f381915a326cf2e5792d69bcb9ed74c01b00260c160c888c8915dc78d1dd36c4da4f8b30db2526f6d0888a0a0fed6d7bf678013cd4b5eff6df7ff0d80e790751aadd7c682cccfaf0a3f91aa26b1371e7c353dcb93adeb1b16adaa5d7b406b63b846bf1acf02da9697529200f372e16a3a858b9c13bed5d6e94f52d806e30207ce63d5f5206f6744150f579d43ef0978be589a99530f4439e700bd282532c5a4a4458d2edf19dfde268a9a60254d2fe13e9f4168d58d4f6880f7f1f9a2414fab59608ce04bf678dc3744ae6a15def60c2ab480255fec08f94ff54afe4974ec85009fcac3053231feeffea7ebe0c4ddf9b1f18b55633e7dc2e4951d4e567c046eaa760282b1cdb90d2d900b2fe13cb34cbdb7da8221c38ead1f8cf681030db6d6c4d84eff734148d35e9c24a1e6c23e906a372a5e1e76154ca0cf7ed8bd896833d40e2c02cb8519382a3a1f9825d6e4f405ea60b807954e791a99e58153cb8316310fafcbf3574bb31e3079a1c841e178b8245bb213b0383137b73c43b8002354f6f8cebc7436c4444f9398e0173a2a6677279633b6da586ce719b56c58708ab537ae193b910dcdd545b4c56d25a7826eacda30c105c0a70309e3423f607728475625e553a2388066929f9f19abd8a66745f0319fa223dbd7ae81cfd5e27fb8ef71b5a5ebf5289992883f215c01d201e527c7cfa411f29f5fecbd55e8b1d4d3133cc2518e95f517afa427101889485d373970b7cce12be0ccece13d648ccfb92f3199b693f5a847202d311c15e353df0a11eca6cb881556c6f4ea2d27bc4304bf9304b71c0b3b9459a447ce75ddbffbeeae8329280ed2043f12cb8844178d2530e0b16058e4820c9dced2fe3aae428f7b25209371b85d8ece7edba7770ddc0e9609e1c59a2c96bb6288e868ca0f925c501bf47351465349fabb88bd38a2121ca70340f65b5af2fc3d6d85c53d12e233260d431482b1ffe39e46004f6afdb9e15604df86ad040e7722048f852e8da9eaa148bb3d648dec2479b95037f4ee6eddf3762968d9c13b23c2ddd015311062abc8309aa9de33e1f25185a4732cbbbb9c1d24a68a64808e54f34a3dd036214f33dc33d1666b2233f0ffca72ed7ed18f526bc80e99dce3956be2c7557c24df069c826faf7339da424c4c7413448794537f7e33a3b7123f99ede770d99912d5c92c3cfb1cc1787593caa4c50fb21c21ad04dbc04fb1150d297e3efea52dec6c5498bebc0212faf0907028b6d5b976f2508918a67a1f1a24388e812cca51aa5d7ebf625cdc2606a9737ec3045e89d99749a3555efc7352afed9f2789e37def21383b921aa4c18210d959f418306576bb6a11d91378a720dcea0f755e8afc7c2a4a21e46f11ef0ff491403c31cb54757c50384906ca24fcbf6808b47d584496be6dfb871537a5a15dc7e1f6aa566434d9317387055b831ea3eb8f5c10a5459f28c70023ec911d1c31afc2fc40632586f9469f81dd8cc52038a270bb2c8ca1bcb1695f5a38db4cb7f16275dc05e51dad2906a3c4ea5f5af4b995fec62b28319510ccaa30634d1cbe926e00d946e051f29304bdbaee18c69e5af35934ebb3087d709cd833feab54b84726b8a0bda727597660a98c92419786a602e76ea7aff4336a3fe7501440d270674bb57a8cfd9292f2fd1915cde627a1d9f5fcc2a8342708bce23bc67a78330776f914b6e37f3bd7d1d7e7c4a7a10d0fc292608de2ff22f5812a6c06e839cdf1dba51e77e273bcad1f59a097950be9d640e0227f3ee99c1077ccb57a933ec6b13cf6a6694131801ad76600bb8ea82bead83b32407e9d3775146846274a1e5e69e9a332e748f2fcee16840c2fab6dd93a5fad6b2412767ec9a408718e8965bc8dca43a759848b483131645f652fea2afead9872b3262913c986ec1d7510bdbcc9f9b6e0cc45f39988c713752f9cbee91b88767d6da4b2513c630283ad9f052cac5eac1bf3417a872bdaffedd1e7601ec16f8375d70de1a1c9c4ed380bc6f7ccbd138a2ba3dd120366493e829adb6140d169516bedbc692e010a6eff38d6ebe98f37f0eeb30de6c5f64ec84b78b442d88978f057e83fe9d3e1b2ed6860aae7edc402e7a2269c066271be881dec8bd11085a76e35f3f352e361bb708c6fcb73ecd732012e5045796ce506acd61cef967db13b1a3b375a3f19e50c3043ebde1434974e73b8d7b27e43d21f733f2277d9aff3158dff72c5359a94e8a696fbee685f46429e91b90b87b7380c613a79cd0b2a5e2cff2668ff22ab1d54fec2db4aab8c990f2b19d25f6d0fd7e7ac087e8a1a9a5a8a3d42797a1cf5bd708b116da71d5349d6389b2c92733e2c2d8568f27ed1be0b18f19386df403ae42e0cca17ee0ab83be78e2b38a93355bf3407e128aa203f8460d13e5dd6a20b9916fd0357abc462a8d0c605c3c78fef48268dcc1d06604c300b93f020b957bcf6e0bcb7f7c59a8e88dd0ea21201880589be66a1326f3220dca89e4216d565263568133de59e03c921a130201670975555502ee64e374eda777f935f4f91f8e057aed0707cfdf5233b67e39eab752d9c72320aaf8a9031e5d15fcb57f8904ffae22b7710e43b86cd3bffb901dc80ca0666007af46aef7b6d0d883222a7cda585328f8634313a96b9fa9745b6b7e71f2475d6c6442c0ef9ba7bc0b179701028cfd89db95c0f5130a5f90b185d85d8c5067361dfbdc56f4b9cb1c4ff9f782dbc50f9223dea07a46b65f5735452531443fb1fd388bbee5213c63e70b36147e1354919c17be5fe865096da7a0ca8267be0f9ec1ac6c0d780f37641ba6a6bb2b70562080d23322957462608e57b9064ff21bec1f6eb1c24f27c5e0700af43db2e38b409ee5589622180defb9a15d942048d1a9e20c2796ad45d7b11390b9eed13ef7ddf5665ee3ab309b7a8cd7e91084fe6c7e2364f695151faea8c2eef7679e48139526b13fcf37b55247d2ac5f0f662cc2aaf68c22697c44da2a8e9742ee365ab3748023926a73b3cddb787b878120e77580400aad1da75be4a13b1371cbc341c5683b6129459ea8eb96bdab75b118918aa103c7aeda09815d518ee8675f3388f1ed34f272f6f1cf62159ab4bd74cc27d4ef3222ac558aa7c95f73ecbc3f8c0ee3b527b265b59f8e941a778812ce7dd52b908619addd891df7a158eeab5c1e456e41e7cd7f5a2c4ffd89292f3b1d244e7202a07bcbe3fb5aa31e2535ae0738f54e9d54c342edcc2561315b3a215ddcd839ee93ae51c5c57795dc11ac210d66cc648fecc5eeac57b5a8ad5e3ff97f36e2c72e800ea7efc99f889b0ad797116f478df419a3fc1ddec0ec4395d7174315c529dbc160d400414d62082ce3763096aa485887bc2b020f08163a1287e594a3bd3570be374a8f62f1b1f302fcb91a5af78e94a7ff64529c0384395a15be10ca230aa817bd42871b96f707c3dd3c091db1ab2292b1133049022ed4393c31e3b5a9f2194b3e647c2da8480b98c49ad6b767516a68a3ac9fd3d6ba42c12c5daaf9fc8bcfbd218d44a9c20c6314c4c64c7554ba59f53d4fbf300b37025a2c50eaa00d52ad3a0a0232af327123eebe4c185c0a72f3ec4b319768f95d7b086e0b8a11967d33292f88185942eb3a69ff940fe2b6398818b38d1bbb37e27a6d5a3fb3ef7b2ee78c2e2f262f76ec4f74a226854d02144e4a922b242046b5471b6c319cbc1e68fc280838ec842ddc2d983de5733fb7a84f3d2d5066a1e48180111d85d4dc151403c0e262b2080cf1572e7fa0276afdf899104252bde33378a848783eebf2f41fc1ecb3787549cad1e0563aeda5175215eb70f2fab69ea65801f290ab047a4c792ba667caa4324c05ea77a12e5f44391959f10f4902e3f98620a72a3ce81cdf3da4309fe296db6d0caf6335df635b4ca158bad69ee26d5bc76e474c09fcb35c1ddd62157767a67650b2a8357646414cbe581627722dddd6983927f4757ab5aaddc9297fca77eec464b6a4a0a058cd8e978dc07dc5fd01f73c19005887edd18d9e09ab837f4ca901d0d79cf0b3f971714f850b46699c670a5fc365ec1a049b831799e4080e30ce7ad0b02d8e358cb386426f131911f1d4087dd2f4d66d28702aca396d7dbd49d64b801c4162eb9df36d8c16b3db148a777f5fffae6fe3406ab2d47269672dbc8ccbcd2ff9d85be742ea245424be4221d32eb1aa3219681428a655b724e9130516bf1a4be5d6b95530f3c86a9520ba0a9163ad7cd3f78b7becc75c30173c71f2b8432291d71ae7c46cbf597cf454c8a73e326af5644c58da1b12c03ed25ef749edbbe3105da477af69ed17f4a0106a58aa8920837125ff7678779cb6805e78044b3c2a94c62c5351213466474d3d5d41276035a9cc2aaf105b01020cd8b4b80dd5102191b38763e11cac19ddd428a20d7a3d60aa84802a7c63c46879808889a041b976ca01c80e7fee5b7471c7b75952dd254e5343d91e366513ee612263fed6459efea58b681949184244fb5b136ab7f34e30c2a5b230f4a5d6b8c9d32b422e069f78e48efdd36f28448849c0af7d3febcd9ea6a9a2182cfbf6e0970d80ae0b3379b3f62f5baf77d80d15b9d69d64eaa0a7e04

The articles can be filtered and sorted in any way you like, for example by created or updated date or on the basis of how many votes they’ve received.

By making updates to the micro-template you can change the look-and-feel of the list or add new functionality. For different article list styles that you can use with this extension, check out our article list patterns.

The featured article list is displayed using our built-in Navigation extension. You can use the options described on that extension’s page to make additional design or functional changes, regardless of whether you create the article list using attributes or JavaScript.

The example provided uses the data-element="navigation" attribute to create a list of featured articles.

<div data-element="navigation" data-template="featured-articles" data-properties="..." data-template-data="..."></div>

To make design or functional changes you can either edit the default micro-template or replace it with one from our Pattern Library, updating the template ID if necessary.

If data attributes are used within article content you will need to ensure that the allow unsafe HTML setting is enabled within the Zendesk Guide settings.

You can create the list of featured articles using JavaScript:

<div id="featured-articles"></div>

<template id="tmpl-featured-articles">
  ...
</template>

<script type="text/javascript">
  ready(function() {
    new Navigation(document.getElementById('featured-articles'), {
      properties: [
        "id",
        "name",
        "title",
        "body",
        "html_url",
        "position",
        "promoted",
        "draft",
        "section_id",
        "category_id",
        "created_at",
        "label_names"
      ],
      template: "featured-articles",
      templateData: {
        heading: "Featured articles",
        labels: [ "a_label" ],
        excerptLength: 120
      }
      // Additional options go here
    });
  });
</script>

The example above supplies the same option values to the plugin as the data-attribute example. This may be desirable if you need to fetch additional data to pass through as templateData before rendering the list.

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Article navigation Free

Article navigation

Display links to next and previous articles.

Carousels Free

Carousels

Present content in well defined and easy to follow steps.