Sections

Add custom blocks

Many of our themes already display categories and sections in custom blocks. They come in a variety of shapes and sizes and, like everything else in our themes, can be easily customized to your specific requirements.

Custom blocks can also be used for other purposes, for example to highlight contact options or other areas of the Help Center like the Community forum.

Some examples include:

  1. Ruby, which has a border to add visual interest but no icons:

    Ruby Zendesk theme

  2. Ada, which features icon and a box shadow effect:

    Ada Zendesk theme

  3. Thora, which uses custom category blocks with icons alongside static blocks to present important links and actions:

    Thora Zendesk theme

Whether you’re looking to present categories and sections or arbitrary links and content, our ever-growing Pattern Library contains elements that can be used or easily adapted. For example, the blocks found in our Category Lists section are designed to present categories but you could use the same blocks for literally any purpose.

  • <ul class="list-unstyled row justify-content-center mb-0">
      <li class="md:col-6 lg:col-4">
        <a class="block link-plain text-inherit p-5 h-full mb-4 text-center transition-fast md:mb-0 md:bg-transparent hover:bg-white hover:grow hover:shadow-lg" href="#">
          <img class="w-9" src="{{asset 'custom-block-image-1.svg'}}" alt="">
          <h2 class="h2">
            Custom block 1
          </h2>
          <p class="text-base">
            This is the text for the first custom block
          </p>
        </a>
      </li>
      <li class="md:col-6 lg:col-4">
        <a class="block link-plain text-inherit p-5 h-full mb-4 text-center transition-fast md:mb-0 md:bg-transparent hover:bg-white hover:grow hover:shadow-lg" href="#">
          <img class="w-9" src="{{asset 'custom-block-image-1.svg'}}" alt="">
          <h2 class="h2">
            Custom block 2
          </h2>
          <p class="text-base">
            This is the text for the second custom block
          </p>
        </a>
      </li>
    </ul>

The beautify of these patterns is that they can be used anywhere in your theme, not just in specific places like the Home page. You can also have as many as you like without being constrained to a predefined number.

Questions or feedback about this guide? Let us know