Sections

Patterns

Patterns are predefined layouts, ready to copy, paste and customize. Each are thoughtful compositions of more fundamental aspects of the framework like elements and utilities that allow you to quickly create beautiful and engaging pages.

We’ve designed patterns to be copied and pasted between themes or directly from our ever-growing Pattern Library. For example, we provide numerous category list patterns that demonstrate different ways of presenting categories.

  • <ul class="list-unstyled row">
      {{#each categories}}
        <li class="col-12 mb-5">
          <div class="card p-5 h-full bg-white">
            <div class="media">
              <a class="flex align-self-center ml-3 mr-6 align-items-center justify-content-center link-stretched circle transition w-9 h-9 bg-gray-100 hover:bg-gray-200" href="{{url}}">
                <img class="svg-icon fill-current font-size-3xl bottom-0" src="{{asset @index prefix='category-' suffix='.svg'}}" data-inline-svg alt="{{name}}">
              </a>
              <div class="media-body">
                <h3 class="h2 mt-4 mb-2">
                  {{name}}
                </h3>
                {{#if description}}
                  <p class="font-size-lg text-gray-600">
                    {{excerpt description}}
                  </p>
                {{/if}}
              </div>
            </div>
          </div>
        </li>
      {{/each}}
    </ul>
    {{pagination}}

You can use them as-is or customize them to your liking using utilities, element or your own custom CSS. Whether you’re looking to bring an existing set of designs to life or aiming to rapidly prototype ideas, our pre-designed patterns represent a massive time-saver.

Next steps

  1. Review the pattern previews in this section to get a sense for how you can use them to speed up the design and development process. Every theme or Complete Package purchase grants you full access to all patterns and the code to copy-and-paste.

  2. Recommend new patterns for us to add to the library based on your specific requirements or inspirational examples you see out there on the Internet.