Tabs

The Tabs component is used to build tab based content in a horizontal or vertical format. Both formats can optionally use a fixed height, meaning that the content inside the tab can't expand past a certain value. Instead, a scrollbar is placed inside of the tab when needed. Examples of each format are shown below.

This is the horizontal tab format.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

This is the vertical tab format. Note that there is not much room for long labels so it's recommended to keep the label character count to a minimum, ideally around 26 characters.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. 

This is the vertical tab format with a fixed height of 250px. Note that there is not much room for long labels so it's recommended to keep the label character count to a minimum, ideally around 26 characters.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. 

Reiciendis! Debitis cillum diam rutrum deleniti! Possimus platea atque? Autem! Dolorem nesciunt per blanditiis quia esse! Magna minus congue minima fugiat tempus occaecat magnis itaque. Accusamus possimus, reprehenderit? Quod iaculis! Ut qui. Curae amet quisque montes! Natoque natus nisi, ea iaculis, architecto. Iusto explicabo consequatur, cumque malesuada aenean. Posuere felis ex illo placeat, ante sollicitudin aptent nunc hic perspiciatis, reprehenderit reprehenderit. Nihil aliquet dignissimos, perspiciatis, ullamco debitis nostrum omnis aliquet? Deleniti etiam. Ornare non natoque dapibus, nulla nec vehicula euismod velit. Similique aptent modi quo. Arcu diamlorem primis anim blanditiis, ullamco. Nulla curabitur leo, dis, aliqua lectus ac. Lectus consequatur.

Accordion

The Accordion component is used to build content such as FAQs and other click-to-reveal lists. An example is shown below.

Consulting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

Planning & discovery

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

Scaling & additional support

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

Cards

The Card component is a versatile component for creating blocks of content in a grid format. Cards can include a combination of a featured image, an icon, a title, content and link. Linked cards can be set to have the entire card clickable. The card border can be toggled on and off.

Cards typically work best in groups of 4.

Unlinked icon based cards


User Experience Design

Building engaging user experiences that drive sales and productivity.


Discovery & Strategy

Uncovering your precise business needs through immersive collaboration.


Technical Development

Specializing in sustainable solutions built on our Drupal expertise and proven technology.


Project Management

Building collaborative partnerships through Agile methodology and continuous improvement.

Linked image based cards

Must Have Requirements for Your Ecommerce Site

Read the Blog

Ecommerce Business Life Cycle Technology Requirements

Read the Blog

How to Create a Product Catalog with Search API, Solr and Facets

Read the Blog

Cards can open modals!

This example is a card that opens a large modal.

Open modal

Stacked cards

When cards are displayed in a column, the Stacked Cards option can be enabled to make the cards 100% wide and stacked.

The cards to the right show an example of this.

Card one

This is an example of a stacked card.

Card two

And another one to show how they stack on top of one another.

Icon tiles

The Icon tiles component is similar to a card but has been stripped down and streamlined. Where cards work best in groups of 4 or less, Icon tiles work with up to 8 tiles. An Icon tile is made up of an icon, text, and optional link.


B2B


Manufacturing


Retail & B2C


Wholesale


Memberships


Health & Wellness


Telecom


Drupal & Drupal Commerce

Learn more

Content management migration services

Learn more

Content management demo

Learn more

Embed code & HubSpot forms

The Embed code and HubSpot form components lets you add in a code snippet provided by another site or embed a HubSpot form directly into the page. This is mainly used for embedding things like forms, YouTube videos, Google maps, etc.

Embed code

To embed a YouTube video, Google map, and any other script, simply use the Embed code component and paste in the provided embed code. Then, set what type of code it is (script, iframe, etc) and optionally set a maximum width for the embed.

HubSpot form

To embed a HubSpot form is even simpler. All you need to do is include the ID of the form you would like to embed. This ID can be found by editing a HubSpot form and finding the ID in the page URL. It's a large, random string of numbers and letters like this: f1660491-bc97-42e4-abdb-c8abc35259c5.

Reveal Tiles

Image on the front > copy on the back