Portfolio Sections

Grid layouts to showcase your work

Portfolio sections are grid layouts that focus on imagery and alignment.
Each of our templates comes with several portfolio sections:

  • Products with Captions
  • Project Masonry with Captions
  • Project Masonry
  • Project with Captions
  • Logo Grid

Products with Captions

A simple two column grid that includes images, headings, and prices. This is a variation best suited for ecommerce.
On mobile, the columns go full width and stack. But you can easily change that by adding a mobile column helper class next to the "column" in <th class="column ..."> (see mobile column modifiers).

Example

Product grid with captions

Project Masonry with Captions

An image grid with different sizes, great for showing off a portfolio, or even shop products.
On mobile, the columns go full width and stack.

Example

Project masonry grid with captions

Project Masonry

Similar in concept to the previous section, but a little less complex.
It includes a header that goes inline with a hamburger menu, which you can use as a 'project filter' by linking menu items to different pages on your site. On mobile, the columns go full width and stack.

Example

Project masonry grid

Project with Captions

A simple two column, multiple row grid, that includes images and headings.
On mobile, the columns go full width and stack.

Example

Project grid with captions

Logo Grid

The Logo Grid is a multi-column grid layout, ideal for showing off partner or sponsor logos.
On mobile, the logo columns go full width and stack.

Example

Logo grid

Customisation

You can easily change the looks of a portfolio section by changing its background, text, spacing, and images.

  • Background — change the value in the bgcolor="" attribute on the parent row table
  • Menus — change colour, alignment, font sizes, all with inline CSS
  • Text and links can be changed with inline CSS
  • For the images, simply change the src and the dimension settings inline.
  • Top/bottom spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section

Next Up: Call to Action →