Snippet Tool

The Snippet tool is designed to help you quickly build web pages using pre-built code components. It allows you to easily select and copy elements like columns, buttons, and more, streamlining your workflow and ensuring consistency across your website.

For comprehensive information on the Snippet tool, including a full library of available snippets, usage instructions, and examples, please visit the Snippet site.

On the Snippet site, you'll find:

  • A complete catalog of all available code snippets.
  • Detailed explanations of each snippet's functionality and variations.
  • Examples of how to implement and combine snippets effectively.
  • Information on using utility classes to further customize your snippets.

We encourage you to explore the Snippet site to discover the full potential of this powerful tool!

Utility Classes

Utility classes are pre-defined, single-purpose styles that you can apply directly to the HTML elements within your snippets. Instead of writing custom CSS for common styling needs, you can simply add one or more utility class names to an element's class attribute to achieve instant visual adjustments.

Here's a quick overview of the utility classes and what they can do:

  • uppercase — Need to give some text extra emphasis? This class will convert it to uppercase. Great for headings or highlighting key information.
  • large-icon — To make your Font Awesome icons more prominent, this class will significantly increase their size (3.5vw) and add a bit of space below. Perfect for drawing attention.
  • center — This class will center text or entire blocks within their containing area. It’s really handy for headings, single-column layouts, or aligning icons.
  • no-bg — If you need to make an element's background transparent, this class will remove it. Useful for allowing elements to seamlessly integrate with their surroundings.
  • subtitle — When you're adding supporting text under a heading, this class provides a slightly smaller font size and a little bottom margin, making it ideal for subtitles or brief descriptions.

How To Use Them

Applying utility classes is straightforward – you simply add the class names to the class attribute of your HTML elements within the Snippet tool.

Want to see how utility classes work in real snippets?

Head over to the Utility Classes page on the Snippet site to explore a variety of snippet examples. You'll see exactly how different utility classes are used to style text, containers, and more. Inspecting the code on the Snippet site is the best way to understand their practical application!

Last Updated: 9/18/25