skip to content

#
Snippets

A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.

The example `visually-hidden.md` snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The `snippet` shortcode lets you do exactly that:

    {{% snippet file="visually-hidden.md" %}}

To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does.

## Visually hidden snippet

The `visually-hidden` utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:

    .visually-hidden {
      position: absolute !important;
      clip: rect(1px, 1px, 1px, 1px) !important;
      padding:0 !important;
      border:0 !important;
      height: 1px !important;
      width: 1px !important;
      overflow: hidden !important;
    }

Use it sparingly since, in most cases, what is identified non-visually should also be presented visually. Bear in mind that not all screen reader users are blind users.