Patterns Gallery

A foundation to start from

Patterns Gallery

This site has a built in simple pattern library for anyone to use. Below are instructions for when to use the different styles and suggestions for how to customize them.

General Notes

To use the patterns on this page, you can copy and paste a block you need from the editor on this page onto your new page, but for best results please clone this site, delete this page, and access the patterns from the patterns section of the block inserter menu on the top left of the editor.

To access the patterns library:

Open the block inserter menu
Select the Patterns tab
Choose a category to browse.
Click or Drag the pattern you want to use onto the editor.

Using this theme template

This site runs on a custom child theme with the patterns built in on the site level not the theme level. To use this setup, you will need to clone this site.

The patterns built into this site work best with the structure of this theme, and additional features are added to this theme’s code, so it’s not recommended to change the theme after unless absolutely necessary.

Overriding the page title banner on a page by page basis

By default, all new pages on this theme have a built in simplistic top banner that just contains the page title. You can switch page titles off on the theme i n the customizer and add your own banners for each page, but for teaching and learning sites, you generally won’t want distracting banners on every page.

A recommended approach is to override that setting on the page level for a specific page such as the home page. When setting up your page, at the top right, click the “page settings” icon, then select the options to disable both the Page Title and the Content Vertical Spacing as shown in the graphic here.

Most patterns in the patterns library are based around the Row Layout Block. You can learn more about this and other blocks in the Kadence Blocks documentation.

You may notice that some of these blocks don’t align along the central column in the block editor. Always check on the front end before making edits to fix that. There are some discrepancies between how things display in the editor vs the front end. If it’s not aligning right on the front end, first try resetting the left and right padding on any row layout blocks in your pattern.

More info to come

Getting started

Look at references! Pre-made pages are available in the patterns library under the “Pages” category.

While you are certainly welcome to design right in WordPress, it’s often recommended to mock-up your designs in a dedicated tool if you plan on making your layout more complex. Tools like Photoshop, Illustrator, and Figma all work, or you can use a free tool like PenPot to work on your design collaboratively with others.

Quick dos and don’ts when designing a web layout

There are plenty of times when you can break these rules. They are just a guide for when you’re starting out.

Do use more spacing if necessary.
Do keep it simple especially on pages you want people to read a lot of content on. You may not use any patterns at all on information heavy pages.
Do be consistent with your styling on the page and your site regarding border radii, drop shadow size, card colors, etc.
Do reduce a heading’s size if it’s too big for its location and wraps too much. Just be sure to reduce ALL the headings if you’re doing this in a set of cards etc.

Don’t alternate your row background colors, Instead, try to use variation on the page.
Don’t use outlines and drop shadows on the same card item.
Don’t set text blocks to go beyond the central column of the page (ie don’t set a text block to full width)
Don’t center text more than 3 lines or 750px wide.
Don’t forget to check your design on mobile and tablet views.

A further note on spacing

In the patterns library, the patterns are all saved with a default margin of 2xl on the bottom. Full width containers with colored backgrounds have an additional 2xl padding on the top and bottom. You are welcome to adjust these to suit your needs, but when designing a home page you want your blocks to have breathing room. We rely on proximity and repetition to show relationships. Good margins and paddings help the user see that they are looking at a new topic on the page.

Overview

In general, choose images that are relevant to your subject matter and feel consistent together. If you’re using an image in one of the patterns, check and see how that image will look on various screen resolutions. Many of the patterns are set up in a way that might crop your images strangely at certain resolutions and you may want to choose another option.

Photos

For photos, the following all have beautiful images to choose from that allow users to use on their websites for free without attribution. Be sure to read the licenses to know your limitations.

Before uploading to your website, make sure your images are no wider than 2000px and be sure to optimize them using a tool like tinypng.

Icons

For icons, if the built in icon block doesn’t have options that will work for you, you may need to upload your own icons and use the image block instead. You can find options at SVG repo, but you’ll need to check the icon’s license. Use icons with CC0 and Public Domain licenses only. Try to use icon sets from the repo so your site is consistent. If you’re using the TRU theme, your icons should also be line based not solid in order to keep close to TRU branding.

Illustrations

For Illustrations, be mindful that sites that are stylized with illustrations require a bit more work. Illustrations should be a consistent style and might not look good if you have a site that has a lot of photos on it as well. Some providers of free and non attribution illustrations are the Manypixels free images gallery and Themeisle’s illustrations gallery. Be sure to review their licenses first.

This base theme has the open font “Inter” set for both headings and body text. To give your site more personality you can change the fonts. A save bet to maintain readability on your site with fonts is start by just editing the h1 and h2 fonts on the theme. Depending on what font you choose for those, you may need to adjust the smaller headings to a lighter or heavier weight.

Examples to come

You can come up with your own color combinations or you can use one of the options below:

Color sets to come

Headings

Overline text

Heading with overline text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar dolor vel turpis egestas, in volutpat nunc vestibulum. Donec quam lorem, mattis a egestas tincidunt, dapibus porttitor purus. Suspendisse dapibus quam ut urna lacinia dignissim. Cras id risus vel nisl pellentesque feugiat nec sit amet sem. Ut tincidunt ante at erat tempor, vitae sodales ex dictum. Nulla facilisi. Quisque porta eros sit amet sapien vulputate rhoncus.

Heading with subtitle

Subtitle text here – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Noteboxes

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Buttons

Button

Button Button2

Button

Button Button2

Tabs and Accordions

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum sodales ipsum vel varius. Nunc rhoncus tellus sit amet diam vulputate scelerisque. Quisque iaculis, arcu at laoreet pharetra, libero lacus vulputate nunc, et aliquet ex tellus nec magna. Proin eget pretium sapien. Donec porttitor venenatis risus, quis sollicitudin risus porttitor quis. Maecenas vitae magna et nibh viverra feugiat. Aenean finibus accumsan ultrices. Nam a tellus iaculis, laoreet risus in, condimentum elit.

Suspendisse egestas euismod dolor ut fermentum. Vestibulum mollis odio ut lectus iaculis lobortis. Fusce eget ante sit amet augue lobortis pellentesque ut vel risus. Nunc id nibh congue, dictum enim eget, viverra quam. Nunc porta sit amet nibh et aliquam. Pellentesque a magna scelerisque, finibus eros maximus, viverra purus. Nullam ornare tincidunt velit a fermentum. Morbi eget ligula nec nisi viverra tincidunt non eget neque. Praesent efficitur nisl dui, at convallis justo viverra nec. Etiam rutrum nunc sem, ultrices sagittis tortor interdum vitae. Cras eu dui tempus, dapibus ex ut, molestie dolor. Aliquam erat volutpat. Sed commodo lorem dui, vel sagittis nisi semper vel.

Morbi libero purus, tempus ac vestibulum vitae, volutpat eu libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Nulla varius id nunc eget pulvinar. Duis blandit dapibus nisl at feugiat. Quisque gravida sagittis mauris sit amet iaculis. Quisque facilisis ligula quis rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum lacus nisl. In vitae turpis efficitur nisi maximus scelerisque. Vivamus suscipit nulla semper mi malesuada tristique. Sed rutrum est sit amet sem rhoncus convallis sed eget enim. Aenean at enim ligula. Donec gravida dolor at turpis porta gravida. Ut vulputate felis in diam imperdiet ornare ac vel metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Contact/Meet the Team

Type 1

This pattern only contains one bio row. Add as many as you need.

Person’s Name

Person title or whatever you need here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh. Sed a nisl dui. Praesent fringilla pulvinar tristique. Phasellus sapien ante, congue sit amet turpis eget, facilisis malesuada massa. Nunc ornare felis semper risus porta, at aliquet risus elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris dui odio, malesuada nec ante lobortis, placerat suscipit magna. Vivamus consectetur ipsum tortor, ut tempus ante tincidunt et.

someone@tru.ca

Person’s Name

Person title or whatever you need here

someone@tru.ca

Type 2

This pattern only contains one bio row. Add as many as you need.

Person’s name

Person’s title

Person’s name

Person’s title

Type 3

Duplicate or remove the inner sections as necessary to have more or less users.

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Person’s Name

Person’s title

email@email.com
###-###-####

Displaying Stats

Stat bars

These bars are very narrow, you will probably want them up against another larger full width color bar. Remove the bottom margin from whichever full width color row is on top in the pair.

50%

Stat title

10yr

Stat title

8/mo

Stat title

50%

Stat title

98%

Stat title

8/mo

Stat title

20yr

Stat title

Progress bars

Stat 1 Progress48%

Stat 2 Progress23%

Stat 3 Progress31%

Banners

All project title banners are set to h2 below but h1 in the pattern library. Adjust accordingly for your page hierarchy.

Card banners

Overline

Project Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum aliquam diam mattis suscipit. Morbi rutrum, turpis sit amet consequat varius, nunc dui imperdiet ante, vel ornare lectus orci a nisl.

Dark and light gradient banners

The section on the right is set to hide on mobile don’t put content there. If you repurpose these for somewhere else on the page you will need to turn that setting off if you choose to use that section.

Overline

Project Title

Overline

Project Title

Overline

Item 1 Title

Button Link

Overline

Item 1 Title

Button Link

Overline

Item 1 Title

Button Link

Overline

Item 1 Title

Button Link

Overline

Item 1 Title

Button Link

Overline

Item 1 Title

Button Link

Info banner

Don’t use this as a top banner on the page particularly if you are using the TRU theme. We want to keep the right alignment for those. Use this further down a page to draw attention to something. Include a brightly colored call to action button to get users to view something or fill out a form.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Columned Content Groups

Group related content you want to highlight with these blocks. Usually this content replaces short bulleted lists or groups summaries of different services you provide or are proud of with a call to action to learn more.

Add an overline text

Brief title for section

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Heading

Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

3 simple cards

Note: don’t use the floating style for these unless you’re going to make them overlap something as above. Floating style look best when there’s some kind of image associated with them somewhere.

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Heading

3 column strip

Add a descriptive title for the column.

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Add a descriptive title for the column.

3 columns with icons

Note that with TRU styling, we want to try and use line based icons. If the icon options available won’t work for what you are doing, try svg repo and check for icon collections that have public domain or CC0 license.

Heading

Nulla neque erat, aliquet nec pellentesque a, lobortis a nibh.

Heading

Suspendisse mollis nisi mi, consectetur dignissim mi tempor at. Mauris ac rhoncus elit.

Heading

Lorem ipsum dolor sit amet, consectetur
adipiscing elit.

Image topped cards

Use these to highlight certain topics you want users to read more on where an image will help add context.

To change the background color of the card for these, make sure you’ve selected the correct “section” blocks. They are stacked with extra sections and groups to force the buttons to the bottom.

Set of 4

Heading

liquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Button

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Button

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Button

Heading

Button

Overlapping Cards

You can use these in pairs representing groups of content or as single items. You can also split them up with other content between them.

Heading

Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh.

Learn More

Heading

Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh.

Learn More

Constrained banners

Use these to highlight a single item of content.

Heading

Checkerboard

Keep the content in this section concise and the content relate

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.