Live Component Guide
Your guide for building sweet content pages!
The purpose of this page is to display all of the different components that you can use to build a content page using the Page content type.
Page settings
Each page built with this template has a variety of page-level settings.
Page header settings
These settings control how the site header appears on the page.
- Display mode
The theme of the header based on what will be behind it. Use dark when the header is transparent and will be placed over a dark background. - Transparent background
Remove the background color from the header so that the first page component appears under the header instead of below it.
SEO metadata
Add basic SEO metadata including the page title, page description and an image. This information is then used to prepopulate SEO metadata for search engines and social media sharing. More advanced metadata control, such as whether the page should be crawlable by search engine bots, can be found in the page's Metatags tab.
Segmentation
Tag the page with taxonomy to build a visitor's personalization profile. Before adding any new segmentation labels, be sure you understand Acro Commerce's Personalization Policy.
Components and modals
- Components
Components are used to build the actual content of the page, starting with a Section. More information on Sections and other components can be found below. - Modals
The page modals area is where you can build pop-up dialogues (modals) for the page. More information about Modals can be found below.
Sections
Creating page content always begins with a Section. Sections have a number of settings that can be used to alter the section to suit the needs of the content. Multiple sections are used throughout the page to achieve different content results.
Layout
Select the number of columns to use.
Display options
Control the width of the content area, disable margins, and set the amount of padding above and below the section.
Background options
Change how the background of the section appears and the content within it.
A section background can be transparent, a color, or an image. Color options available are as follows.
| White | #FFFFFF |
| Salt | #F5F7F7 |
| Puff | #E8ECED |
| Anchor | #54595C |
| Diesel | #26282F |
| Cadmium | #F95E27 |
Column options
When multiple columns are used, column options modify how the columns work together. In the examples below, you can see that a dividing line has been added between each column. The last example also shows how the column order can be reversed for mobile devices, placing the last column first when the columns stack instead of the first one.
Layout configuration
When multiple columns are used, this is where you can define the width of each column to achieve different layouts. The examples below show equal column widths (default), but this can be changed in layout configuration as needed.
1 column
2 columns
2 columns
3 columns
3 columns
3 columns
4 columns
4 columns
4 columns
4 columns
This example has the "Reverse Stacking On Mobile" setting enabled ...
... meaning this column will be shown first on mobile devices. Scale your browser window down to see.
Basic content
The Basic content component gives content creators a simple WYSIWYG editor for adding content. This editor is fully featured and includes a number of text formats and styles, image uploader, links, lists, icons, tables, etc. This content here has been added via the basic content component.
Typography - Standard styles
The paragraph format dropdown lets you turn any text from a plain paragraph into an HTML heading element. Heading examples are shown below.
Heading 1 (h1)
Heading 2 (h2)
Heading 3 (h3)
Heading 4 (h4)
Heading 5 (h5)
Heading 6 (h6)
Additional elements (default styles)
Block quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a metus a magna elementum hendrerit in vitae neque. Proin gravida finibus ipsum, interdum egestas metus hendrerit at. Suspendisse potenti. Morbi nec sem ipsum. Phasellus cursus egestas nulla et ullamcorper.
- Bullet list
- Bullet list
- Bullet list
- Number list
- Number list
- Number list
List - 2 columns
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
- Unordered List Item Four
- Unordered List Item Five
List - 3 columns
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
- Unordered List Item Four
- Unordered List Item Five
| Table heading | Table heading |
|---|---|
| Tabel cell | Table cell |
| Table cell | Table cell |
Below is an example of a horizontal rule (hr) element.
Typography - Custom styles
In addition to the standard HTML headings, lists, and other elements shown above, we've also included some custom styling classes for these elements that can be accessed via the editor's Styles dropdown. To use these styles; add your content, place your cursor within the content, and choose the style you would like from within the dropdown. In addition, all styles can utilize a noGutterBottom class to remove their bottom margin. Below is an example of the available styles.
Small H1
Overline
Subtitle1
Subtitle2
Lead
Body1 (default paragraph)
Body2
Small
Caption
Hero
Monster
MonsterJr
- Chevron list
- Chevron list
- Chevron list
- Checkmark list
- Checkmark list
- Checkmark list
Utilities
The following class names can be used to hide elements at specific breakpoints.
| .hidden-xs | .hidden-sm | .hidden-md | .hidden-lg | .hidden-lx |
|---|---|---|---|---|
| Visible | Visible | Visible | Visible | Visible |
Image
The Image component provides an alternative to adding images through the WYSIWYG editor.
This component is unique in that it allows content creators to link images, including to modal popups, within the component settings. This is something that isn't yet possible through the WYSIWYG editor.
However, in most cases, adding images through the WYSIWYG editor may be more beneficial. For example, if you're trying to mix text with an image and want the text to wrap around the image, you will need to add your image through the WYSIWYG editor, not the Image component. The Image component is for standalone photos only.
Image (aligned left)
Image (linked and aligned center)
Image (SVG, opens a modal, and aligned right)
Divider & spacer
The Divider and Spacer components are used to help separate content within a section.
Divider
Dividers provide a visual separation via a horizontal line or shadow. An example of each is shown below.
Spacer
Spacers provide an invisible separation where you define an arbitrary amount of space that the spacer component takes up in order to push any content below it down. Spacers also have the ability to be hidden from either desktop or mobile displays.
An example of a spacer is shown below. You can see that it's pushing the next piece of content down.
Buttons
The Button component is used to create call-to-action type links. Buttons can be horizontally positioned left, center, or right, can be styled in a variety of different ways, and can optionally include an icon either to the left or the right of the button text. Buttons can also be used to open a pop-up modal.
Variant options
Color options
Size options
Icon options
Linking options
Modals
Modals can be added to a page to provide a pop-up dialog that can be opened from some components. Buttons and Cards are typically the components used for this. When creating a modal, you first assign it an id (i.e. contact-form). Then, when adding a component that supports modals, such as a button or card, you simply use the id as the link (i.e. #contact-form) and check the Link opens modal checkbox. This ties the two components together.
Adding content to a modal is done in a similar way to building a page. You can choose from many of the same components to add text, forms, video, etc. into the modal. Modals can also be created in a variety of different sizes. Examples are shown below.
Banners
The Section component and its various background and layout options can be used to create a variety of different looking banners. Inside the banner, a Basic content component or many others can be used to add the banner content.
Hero example
Your essential digital commerce solutions powered by our experts
Paper example
Collaboration, not compromise.
A strong content management system brings your brand story to life for your buyers and allows a powerhouse team of content creators, marketers and editors to work together behind the scenes.
Smudge example
Retail & B2C
Straps
Similar to the banner examples above, basic straps can also be created by combining the Section component with various content-creating components. Additionally, some components are available for specific types of straps (Strap and Logo Strap). Examples of different straps using all of these options are shown below.
Basic content strap
No matter what stage you are in, we would love to talk to you about your project. No pressure, no obligation, just straight talk and helpful insight.
2 column basic content strap
We know talking about how a system works doesn't always do it justice. So, we built our own demo site, complete with a Drupal Commerce content management system to show you how it can work in real-time. Book a demo so we can walk you through it.
Strap component with image
Open Source ecommerce solution that respects and safeguards customer data
How a cost-effective, flexible architecture helps clients securely manage their customer data within a regulatory framework for online sales.
Your partner
in digital
security
Strap component with 2 colors
Open Source ecommerce solution that respects and safeguards customer data
How a cost-effective, flexible architecture helps clients safely and securely manage their customer data within a regulatory framework for online sales.
Strap component with icon and dividing line
Open Source ecommerce solution that respects and safeguards customer data
How a cost-effective, flexible architecture helps clients securely manage their customer data within a regulatory framework for online sales.
Our technology partners
Carousels
Similar to the banner and strap examples above, carousels can be created by combining the Section component with the Carousel component. The carousel component provides a slide-based way of displaying content where one slide is shown at a time and additional slides can be looped through using either arrow or dot navigation. The carousel and its slides each have options such as transition effect, auto play, auto resize, etc. A few examples are shown below.
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
Ecommerce Business Life Cycle Technology Requirements
How to Create a Product Catalog with Search API, Solr and Facets
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.
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
Happy clients make happy projects
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Happy developpers make happy projects
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Happy PMs make happy projects
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Happy projects make happy CEOs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.