Global Ecomm Pattern Usage Guidelines
How to put our patterns to work for you
We love our patterns and there are guidelines to using them so they can be as consistent and maintainable as possible. So here are the Dos and Don'ts of using our patterns in general
DO
- Use patterns that coorespond to the content to go in them. ie. The features of a product should go in the features pattern
- Try to fit your content in any of these very diverse patterns BEFORE utilizing the general content type
- Try to use an icon from our ever growing icon library before utilizing an image if at all possible
- Keep river headlines (h2s) under 65 characters
- Have all pages should begin with a lead that is not included within a river
- When reusing the same nodes keep it on the same background and in the same style
DONT
- Bold, italicize or alter any text in any way other than centering
- Include buttons within any patterns other than the cta
- Put in any hard coded styles on any elements within patterns
- Include any code within the patterns. columns, colors or otherwise
- Copy and paste or write titles in as all caps. THIS HEADLINE IS BAD. This headline is good.
- Copy and paste copyright, trademark, registration marks and ampersands into the cms. They should be created with unicode. See guide on typography page.
Lead
Required Fileds: Headline, Body
The page's h1 is the title of the lead so only one lead is allowed on a page, however you must have one on the page in order to have an h1. Please make sure this title is as succinct and helpful as possible for SEO purposes. Limit text to one paragraph. All pages should begin with a lead that is not included within a river
DO
- Put your best foot forward when writing the title as it is the H1
- Include at top of page
DONT
- Include more than one on a page
- Make the title just the page title
- Include and hardcoded styling or code at all
Example:
This is the Page H1, the Most Important Words on the Page for SEO
Bacon ipsum dolor amet minim tri-tip pork chop fatback pork loin, salami shoulder pastrami cow id tongue aliquip nostrud. Nisi in magna, flank picanha eiusmod lorem jowl swine frankfurter do. T-bone meatloaf chuck prosciutto biltong. Eu jowl pariatur id, ut pork belly aliquip ipsum shoulder swine est. In dolor qui pastrami, proident velit laborum prosciutto shoulder. Cow in cillum, dolor kielbasa ut occaecat aute irure.
- Item one.
- Item two.
- Item three with a link within a list
Split Lead/ Corner Pocket
Required Fileds for Corner Pocket: Pre-headline, Callout
The corner pocket should be used to feature pricing. It has three available fields but the first two are the only required fields.
DO
- Include compelling pricing
- Use with the left aligned lead
- Put lead and corner pocket in a subpanel well in order to get alignment
DONT
- Use for promotions, that is to be used with the anouncements pattern
- Use for PDFs or other call outs. Only to be used for pricing.
- Do not use with an equal height container
Example:
This is the Page H1, the Most Important Words on the Page for SEO
Bacon ipsum dolor amet minim tri-tip pork chop fatback pork loin, salami shoulder pastrami cow id tongue aliquip nostrud. Nisi in magna, flank picanha eiusmod lorem jowl swine frankfurter do. T-bone meatloaf chuck prosciutto biltong. Eu jowl pariatur id, ut pork belly aliquip ipsum shoulder swine est. In dolor qui pastrami, proident velit laborum prosciutto shoulder. Cow in cillum, dolor kielbasa ut occaecat aute irure.
- Item one.
- Item two.
- Item three with a link within a list
Starting at
$0.015/hr
High availability without a long-term contract
Text
Required Fileds: Body
The text pattern can be used for text areas on the page when you do not want it to contain an H1. It should also be used in any text splits. ie. a mini panel that has text/video or text/image split.
DO
- Use for text areas
- Use in text splits
DONT
- Include any images within the code
- Include any hardcoded styling or added code at all
Example:
Nisi in magna, flank picanha eiusmod lorem jowl swine frankfurter do. T-bone meatloaf chuck prosciutto biltong. Eu jowl pariatur id, ut pork belly aliquip ipsum shoulder swine est. Flank picanha eiusmod lorem jowl swine frankfurter do. T-bone meatloaf chuck prosciutto biltong. Eu jowl pariatur id, ut pork belly aliquip ipsum shoulder swine est. Nisi in magna.
Value Prop
Required Fileds: Headline, Body, Icon/Image For each card
Character Limit:
Headline - 50.
Description - 200.
The Value Prop pattern is to be used to showcase the top few values that the product or service can bring to our potential buyer. They should be short, sweet and to the point. It should introduce the value of the product or service to the users business in easily digestable chunks. This pattern should not include a link or button.
DO
- Keep each value prop short and meaningful
- Utilize rsweb icons for icon images
- Try to use in groups of 3 and not 6
DONT
- Exceed character limit
- Add a link or button
Example:
This a value headline with a max of 50 characters
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
This a value headline with a max of 50 characters
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
This a value headline with a max of 50 characters
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
Infrastructure and Services
Required Fileds: Headline, Body, Icon/Image For each card
Character Limit:
Headline - 50.
Description - 150.
The Infrastructure and Services pattern should be used to showcase a service or product and link to it's page for more information if there is one. Infrastructure and Services is not the same thing as a value prop and should not be used as one. This should summarize a product or service that we offer in an approachable and not overly technical way.
DO
- Keep each infrastructure and service card focused on a product or service
- Utilize rsweb icons for icon images
- Try to use in groups of 3 and not 6
DONT
- Exceed character limit
- Add any links or buttons, other than what is included in the pattern
Example:
Name with only 50 characters
Non-links will not have hover state. commodo ligula eget dolor. Aenean massa. Cum sociis natoque
Key Offers
Required Fileds: Headline, Body, Icon/Image For each card
Character Limit:
River Headline - 65
Headline - 30.
Description - 350.
The Key Offers pattern should be used to highlight either key offerings or the product the current page is about or key product offerings of the section you are within. There should always be an icon in the lower left and never any additional links or buttons added to the section. A link is not necessary within this pattern. This pattern should never be left on a white background.
DO
- Place on background color
- Always utilize rsweb icons for icon image
- Try to use in groups of 2 or 3
DONT
- Exceed character limit
- Add additional links or buttons within the content area
- Use as a 4-up
Example:
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Features
Required Fileds: Headline, Body, Icon/Image For each card
Character Limit:
Headline - 30.
Description - 200.
List Limit: 12 list items
The Features pattern should be used to showcase important or key features of the product or service. This pattern should be placed on a background color and the feature copy should be appraochable and not overly technical. There is also the list pattern which can be used to add additional features so that the features section doesn't get overly heavy.
DO
- Always utilize rsweb icons for icon images
- Include a headline as well as desciption
- Add supporting features in lists
DONT
- Place on a BG color darker than light-gray
- Exceed character limit
- Try not to use more than 4 cards whenever possible
- Use colored check marks in lists
Example:
Example Title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.
Example Title
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
Example Title
consectetuer
Example Title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.
Optional List Title
- Live, US-based support team
- Remotely log in and troubleshoot Virtual Machines, OS and Apps
- Dedicated account team
- 15-Minute Response Time SLA to monitoring notifications
- This is an example of a link in the List pattern.
Optional List Title
- Live, US-based support team
- Remotely log in and troubleshoot Virtual Machines, OS and Apps
- Dedicated account team
- 15-Minute Response Time SLA to monitoring notifications
- This is an example of a link in the List pattern.
Optional List Title
- Live, US-based support team
- Remotely log in and troubleshoot Virtual Machines, OS and Apps
- Dedicated account team
- 15-Minute Response Time SLA to monitoring notifications
- Live, US-based support team
- Live, US-based support team
- This is an example of a link in the List pattern.
Testimonials
Required Fileds: Quote, Attribution
Character Limit:
Split Quote Text - 150
Full Width Quote Text - 260
The Testimonials pattern is to be used for customer or client testimonials and quotes. These should be to the point and support the product or service for the page that you are on. For use at bottom of the page above a cta or resources. It should be one of the final proof points for the user.
DO
- Keep quotes focused on a proof point for the page you're on
- Place towards the bottom of the page
DONT
- Have against the footer, since they are similar colors
- Have a dark color or black logo
Example:
Because of Fanatical Support, we knew we were partnering with a best-in-class company that shared our vision of getting it done.
Brian McManus
Senior Director of Technology
Example of Split Quote:
Because of Fanatical Support, we knew we were partnering with a best-in-class company that shared our vision of getting it done.
Brian McManus
Senior Director of Technology
Title Here
Video
Required Fileds: Video Link
The Video pattern should be used to add dynamic and more visually impactful content to the page. This content should be supporting or explaining the product or service for the page the user is on. It should only be used full width on the video landing page. All other uses should be split with text, a lead or a cta.
Event Tracking:
There are events for play, pause, watched to end, 10% complete, 25%, 50%, 75% and 90% complete.
DO
- Use videos the support or explain the rest of the content
- Include in splits or in a corner pocket
DONT
- Include full width outside of video landing pages
- Include a title if the title is displayed within the video overlay
Title Here
CTA
Required Fileds: Headline and/or Subhead, Button Type
Event Tracking:
There are events for chats and form submits. Those are listed (for chat) as
- Category - CTA Click
- Action - Chat Started
- Label - Button Label
There are events for chats and form submits. Those are listed (for form submissions) as
- Category - Site Submission
- Action - Form Click CTA
- Label - Button Location (on page)
Tabs
Required Fileds: Headline, Body
Character Limit:
Headline - 15.
Content - no limit.
Event Tracking:
There are events for tab clicks. Those are listed as
- Category - Content
- Content - Tab Toggle
- Label - The Tab Title
The Tabs pattern can be used for pages that are content heavy but can be organized into sections. This can save significant scroll space while allowing for content to be as lengthy as possible.
Vertical tabs are only to be used for product showcases. All other uses of tabs should use horizontal.
DO
- Place on background color
- Use any available content, splits or panels within the internal area
- Use to categorize similar content in an efficient way
- Use horizontal tabs for anything other than product showcases
- Use vertical tabs for product showcases
DONT
- Exceed title character limit to avoid breaking the container
- Place within a container. The white area should be full width
- Use horizontal tabs for product showcases
- Use vertical tabs for anything other than product showcases
Horizontal Example: Used for reducing content scroll and Use Case Examples
Pain Point / Use Case
Expand on Value Props or Pain Points
Text goes here for pain points or use cases for the targeted product, solution, service, or industry. Pair with a related image, screenshot, or other asset to the right. Finish off this section with links to relevant product/service/solution pages. Solve with: Use Case Examples
Pain Point / Use Case
Expand on Value Props or Pain Points
Text goes here for pain points or use cases for the targeted product, solution, service, or industry. Pair with a related image, screenshot, or other asset to the right. Finish off this section with links to relevant product/service/solution pages. Solve with: Use Case Examples
Alternative Title
Expand on Value Props or Pain Points
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean moon.
Pain Point / Use Case
Expand on Value Props or Pain Points
Text goes here for pain points or use cases for the targeted product, solution, service, or industry. Pair with a related image, screenshot, or other asset to the right. Finish off this section with links to relevant product/service/solution pages. Solve with: Use Case Examples
Vertical Example: Used for Product Portfolio only
Single row
Maecenas placerat odio libero, porttitor rhoncus enim pharetra eu. Praesent in porttitor nulla. Nunc consequat metus sit amet magna vulputate suscipit. Proin justo libero, fermentum sit amet ullamcorper non, sagittis ut eros. Etiam vestibulum, mi quis posuere laoreet, purus nisi maximus massa, non varius felis arcu vel nulla. Nam sollicitudin suscipit augue, eu hendrerit purus vehicula ut. Curabitur efficitur consectetur interdum.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Double rows
Maecenas placerat odio libero, porttitor rhoncus enim pharetra eu. Praesent in porttitor nulla. Nunc consequat metus sit amet magna vulputate suscipit. Proin justo libero, fermentum sit amet ullamcorper non, sagittis ut eros. Etiam vestibulum, mi quis posuere laoreet, purus nisi maximus massa, non varius felis arcu vel nulla. Nam sollicitudin suscipit augue, eu hendrerit purus vehicula ut. Curabitur efficitur consectetur interdum.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Another single row tab
Maecenas placerat odio libero, porttitor rhoncus enim pharetra eu. Praesent in porttitor nulla. Nunc consequat metus sit amet magna vulputate suscipit. Proin justo libero, fermentum sit amet ullamcorper non, sagittis ut eros. Etiam vestibulum, mi quis posuere laoreet, purus nisi maximus massa, non varius felis arcu vel nulla. Nam sollicitudin suscipit augue, eu hendrerit purus vehicula ut. Curabitur efficitur consectetur interdum.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Another double row tab
Maecenas placerat odio libero, porttitor rhoncus enim pharetra eu. Praesent in porttitor nulla. Nunc consequat metus sit amet magna vulputate suscipit. Proin justo libero, fermentum sit amet ullamcorper non, sagittis ut eros. Etiam vestibulum, mi quis posuere laoreet, purus nisi maximus massa, non varius felis arcu vel nulla. Nam sollicitudin suscipit augue, eu hendrerit purus vehicula ut. Curabitur efficitur consectetur interdum.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Name with only 30 characters
350 max character count here. Pro gravida dolor sit amet lacus accumsan at viverra justo commodo. No hoverstate will appear if there is no link present.
Announcements
Required Fileds: Headline, Body, Announcement type
Character Limit:
Title - 150
Text - 250
The Announcements pattern is to be used for short-term announcements. These should be at the top of the page and never more than one on a page. They should be used sparingly to increase the attention on them. The types of announcement are:
- New Product: To be used to announce a new product or offering
- Alert: To announce an outage, warning, or discontinuation of a product or offering
- Promotion: To announce an applicable promotion. This should be for finance approved promotions and should not run long term
- General Announcement: This annoucement should be used sparingly and to bring attention to things like new login page, ect.
DO
- Use at top of page
- Suggest new announcement types instead of trying to fit in an annoucement that may not fit
DONT
- Use more than one on a page
- Include a title, alter text or add any buttons to the pattern
Example:
Standard Announcement
Announcement Header
This the announcement body. You can add additional words here.
Webinar Announcement
Webinar: Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
April 13 - May 1
Awards
Required Fileds: Headline, Subhead
Character Limit:
Headline - 5.
Subhead - 50.
Subtext - 50.
The Awards and Certifications pattern can be used for featuring awards, certifications or honors within a river.
Example:
300+
RedHat certifications
including 122 CCNAs and 44 CCNPs
300+
Hosting engineers across Linux, Windows and VMware
including 122 CCNAs and 44 CCNPs
300+
Content Management Specialists
including 122 CCNAs and 44 CCNPs
Blog Feed
Character Limit:
Established by Pattern
The Blog Feed pattern is to be used by developers only on main overview pages only. It will dynamically populate content with a character trucation established by Drupal.