Grid Sections
Grids are a responsive, multi-purpose layout that turn plain old lists into engaging visual content that’s easy to scan and understand. Attractive grids add to your aesthetic and brand storytelling.
Grid – 4 Col Icon
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a four-column icon grid. Each item in the grid is prebuilt to contain one icon or logo, a heading, short supporting text, and a button. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to create visually engaging links to either external or internal pages for which you don’t have a photo, because you can quickly add icons from stock photo sites. It can be used to feature services, resources, “as seen in” press links, and more. This component works well at the top of pages, in the middle of pages, or even at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Grid – 4 Col Simple
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a four-column icon grid. Each item in the grid is prebuilt to contain one icon or logo, a heading, and short supporting text. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to jazz up any list, such as features, values, benefits, perks, certifications, partners, or process steps. This component works well at the top of pages, in the middle of pages, or even at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Grid – 3 Col Icon
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a three-column icon grid. Each item in the grid is prebuilt to contain one icon or logo, a heading, short supporting text, and a button. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to create visually engaging links to either external or internal pages for which you don’t have a photo, because you can quickly add icons from stock photo sites. It can be used to feature services, resources, “as seen in” press links, and more. This component works well at the top of pages, in the middle of pages, or even at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Grid – 3 Col Feature
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a three-column grid for photo and text content. Each of the three items in the grid is prebuilt to contain one photo, a heading, short supporting text, and a button. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to create visually engaging links to either external or internal pages for which you have a photo or stock photo you want to use. It can be used to manually feature specific services, products, projects, blog posts, events, courses, and more. This component works well at the top of pages, in the middle of pages, or even at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Grid – 3 Col Locations
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a three-column grid for photo and text content. Each of the three items in the grid is prebuilt to contain one photo, a heading, subheading, address, hours, phone, secondary phone or fax, and email address. The phone and email content can be configured to automatically open a new email or phone app. This component is pretty straightforward because it’s meant for adding locations, usually to a Contact page. It works equally well at the top of pages, in the middle of pages, or at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Location Name
Optional Subheadline
-
12345 Street Name,
City Name, BC V3M 9J3 -
Mon-Fri: 9:00am to 5:00pm
Sat-Sun: 11:00am to 3:00pm - info@website.com
- 1 (604) 827-4486
- 1 (604) 827-3386
Location Name
Optional Subheadline
-
12345 Street Name,
City Name, BC V3M 9J3 -
Mon-Fri: 9:00am to 5:00pm
Sat-Sun: 11:00am to 3:00pm - info@website.com
- 1 (604) 827-4486
- 1 (604) 827-3386
Location Name
Optional Subheadline
-
12345 Street Name,
City Name, BC V3M 9J3 -
Mon-Fri: 9:00am to 5:00pm
Sat-Sun: 11:00am to 3:00pm - info@website.com
- 1 (604) 827-4486
- 1 (604) 827-3386
Grid – 2 Col Highlights
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a two-column icon grid in two rows, making four total icons. Each item in the grid is prebuilt to contain one icon or logo, a heading, and short supporting text. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to jazz up any list, such as features, values, benefits, perks, certifications, partners, or process steps. This component works well at the top of pages or in the middle of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Grid – 3 Col Highlights
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a three-column icon grid in two rows, making six total icons. Each item in the grid is prebuilt to contain one icon or logo, a heading, and short supporting text. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to jazz up any list, such as features, values, benefits, perks, certifications, partners, or process steps. This component works well at the top of pages or in the middle of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor.
Grid – 2 Col Icon
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a two-column large feature icon grid. Each item in the grid is prebuilt to contain one icon or logo, a heading, a subheading, short supporting text, and a button. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to create visually engaging links to either external or internal pages for which you don’t have a photo, because you can quickly add icons from stock photo sites. It can be used to feature services, resources, “as seen in” press links, and more. This component works well at the top of pages, in the middle of pages, or at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Grid – 2 Col Feature
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a two-column large photo grid. Each item in the grid is prebuilt to contain one photo, a heading, a subheading, short supporting text, and a button. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to create visually engaging links to either external or internal pages for which you have a photo or stock photo you want to use. It can be used to manually feature specific services, products, projects, blog posts, events, courses, and more. This component works well at the top of pages, in the middle of pages, or at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Grid – 1 Col Highlights
This component has a text section with a heading, subheading, and short intro text at the top. Below the text content is a one-column icon grid. Each item in the grid is prebuilt to contain one icon or logo, a heading, a subheading, longer supporting text, and a button. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to create visually engaging links to either external or internal pages for which you don’t have a photo, and want to include a longer description on the page. It can be used to list services, resources, “as seen in” press links, and more. This component works well at the top of pages, or in the middle of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Heading
Subheading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor. Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Button Text Heading
Subheading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor. Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Button Text Heading
Subheading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor. Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Button Text Heading
Subheading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor. Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus lorem ipsom dolor.
Button TextGrid – 2 Col Highlight Alt.
This component has a text section on the left half with a heading, subheading, short intro text, and button. On the right half is a four-row icon grid. Each item in the grid is prebuilt to contain one icon or logo, a heading, and short supporting text. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to showcase highlights from another section of your website, and use the button to move visitors to that page. It works great to list portions of an offer, such as your values, expertise, service categories, industries you serve, product categories, and more. This component works well at the top of pages and in the middle of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Pharetra Ridiculus Elit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Button Text Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Grid – 3 Col Icon Simple
This component has a three column layout, with text in the first column containing a heading, subheading, short intro text, and button. The second and third column contain icon items, laid out two across and three down for a total of six icon items. Each item in the grid is prebuilt to contain one icon or logo, a heading, and short supporting text. The text area is great for SEO and to explain what kind of content is featured in the grid. The grid’s most popular use is to showcase highlights from another section of your website, and use the button to move visitors to that page. It works great to list portions of an offer, such as your values, expertise, service categories, industries you serve, product categories, and more. This component works well at the top of pages and in the middle of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Pharetra Ridiculus Elit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Button Text Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam lorem ipsum dolor. Cras mattis consectetur purus sit.
Grid – 2 Col Basic
This component has a text section with a heading and short intro text at the top. Below the text content is a two-column grid of colored tiles. Each tile in the grid is prebuilt to contain a heading, short supporting text, and a linked button. The text area above the grid is great for providing context to the content in the tiles, and can support SEO goals. The tiles are filled with a background color that can be switched to a pattern or image. The grid’s most popular use is to create visually engaging links to either external or internal pages, such as a double CTA to two relevant pages or sub-pages. Examples are other relevant pages in a group like your About area, Contact sub-pages for support or media, related sub-services or resource categories, or related pages in a Get Involved or Pricing/Comparisons/Features. This component works well mid-page and at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Grid – 3 Col Basic
This component has a text section with a heading and short intro text at the top. Below the text content is a three-column grid of colored tiles. Each tile in the grid is prebuilt to contain a heading, short supporting text, and a linked button. The text area above the grid is great for providing context to the content in the tiles, and can support SEO goals. The tiles are filled with a background color that can be switched to a pattern or image. The grid’s most popular use is to create visually engaging links to either external or internal pages, such as a double CTA to two relevant pages or sub-pages. Examples are other relevant pages in a group like your About area, Contact sub-pages for support or media, related sub-services or resource categories, or related pages in a Get Involved or Pricing/Comparisons/Features. This component works well mid-page and at the bottom of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Grid – 4 Col Basic
This component has a text section with a heading and short intro text at the top. Below the text content is a four-column grid of floating text blocks. Each block contains a heading and short supporting text. The text area above the grid is great for providing context to the content in the blocks, and can support SEO goals. The grid’s most popular use is to list a group of short statements such as values, differentiators, benefits, perks, steps, or key points to note. This component works well in the upper and middle parts of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Grid – 6 Col Basic
This component has a text section with a heading and short intro text at the top. Below the text content is a six-column grid of floating text blocks. Each block contains a heading and short supporting text. The text area above the grid is great for providing context to the content in the blocks, and can support SEO goals. The grid’s most popular use is to list a group of short statements such as values, differentiators, benefits, perks, steps, or key points to note. This component works well in the upper and middle parts of pages.
Purus Vestibulum Ullamcorper Vehicula Sit
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Heading
Aenean eu leo quam. Pellque ornare sem lacinia quam.
Ready to go Pro?
Buy Refoundry Pro and gain access to powerful tools like this Component Library as well as Reusable Component Blocks, Animations & Parallax, and Custom Fields.