Components Guideline

There are several sections using HTML component(customer code). They need to convert to components for the page authors without a tech background.

Table of Content

Original UI

Hover & Active UI

Original Code

Rules for Table of Content

• Explained
  • A table of contents, headed simply contents and abbreviated informally as TOC, is a list, usually found on a page before the start of a full-page, of its chapter or section titles or brief descriptions with their commencing page title.
• UI
  • Background color: Synopsys dark purple(#5a2a82).
  • Font color: white & font size: 18px.
  • Left line color: synopsys light purple (#80539c)
  • Responsive Web & Big Tablet: 100% Width;
  • Small Tablet & mobile: overflow scroll horizontal.
  • Removing or adding text will not change the style.
  • Text links on TOC will separate the 100% width of the page on responsive web & big tablets.
  • Sticky to top navigation when page scrolls.
  • Hover and active effect - background color changes to synopsys light purple (#80539c).
  • The arrow function is to scroll the page up, and each TOC content will link to each section's tag anchor.
  • Arrow (Before using TOC function): Opacity(0.2) & Arrow (After using TOC function): Opacity(1).
• Best Practice
  • Work with Anchor Component or anything code/section with a unique ID name.
  • Make sure the each text link on TOC match the anchor unique Id name.
• Authoring Guide
  • Remove the text link on TOC if it is unnecessary.
  • Add the text link on TOC if necessary, and add the anchor component to match it.

Rules for Progress Bar

• Explained
  • A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, installation, and read. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.
• UI
  • Before scrolling the page: The progress bar background color is white (The same as the top navigation background color).
  • During scrolling the page: The progress bar is Synopsys orange branding color (#e07c05).
  • Left line color: Synopsys light purple (#80539c)
  • Height: 5px; width:1170px;
  • Stick to the top navigation.
• Best Practice
  • Work with long content pages.
  • Work with scroll-up function.
• Authoring Guide
  • Build it on the page without any actions.

Rules for Floating Tab

• Explained
  • Floating Tab have commonly been used to create entire website layouts featuring multiple columns of information floated so they sit alongside one another (the default behavior would be for the columns/rows to sit below/next to one another in the same order as they appear in the source).
• UI
  • Responsive Web: Font color(#111c24) & Opacity(0.5) & Font size(18px).
  • Responsive Web: The left side is a floating list & right side is the content/details.
  • Responsive Web (Hover & active effect): Font color changes to Synopsys dark purple(#5a2a82).
  • Tablet & Mobile: Font color(#111c24) & Font size(15px).
  • Tablet & Mobile: The top is a floating list & below is the content/details. Overflow scroll horizontal.
  • Tablet & Mobile (Hover & active effect): Background color(#5a2a82) & Font color(white).
• Best Practice
  • Work with all components (right/below).
  • The limited number of the list (Max: 5-6).
  • The list title should use keywords (Better not too long).
  • Make sure the left and right side height almost equal (Responsive Web).
• Authoring Guide
  • Add the text on the list.
  • Add the content on the content side.

Rules for Little Category

• Explained
  • Little Category is the style for showing the category with an icon, keywords title, and a summary. It uses on benefits, related products, related solutions, and other simple assets.
• UI
  • Icon and title: Synopsys dark purple brand color (#5a2a82).
  • Paragraph: color(#111c24), line-height(1.4em) & font size (15px).
  • Hover effect: icon and title have a link. Title color changes to gold brand color (#fcaf1a).
• Best Practice
  • Work with Column Component.
  • Limit 3 - 4 columns on the Column Component.
  • The title should be shorter than 34 characters
• Authoring Guide
  • Add the Column component first and set the number of the columns.
  • Add the content on the content side.

Rules for Contact Us

• Explained
  • Forms 2.0 empowers Marketers to create beautiful, stable, and flexible web forms without programming knowledge. Forms can reside on Marketo landing pages and also be embedded on any page of your website. The core functionality of a Marketo web form can be extended using Forms 2.0 JavaScript API.
• UI
  • Background image with overlay linear-gradient.
  • Font Size, Color, CTA hover effect and so on style follow the Synopsys web branding.
  • Responsive web: Left side (5/12) is content including Title and Subtitle. Text is left align.
  • Responsive web: Right Side (7/12) is content including two columns Marketo Form. Form and CTA are left align.
  • Tablet: Top content text is center.
  • Tablet: Below Marketo Form is two columns center. CTA is center.
  • Mobile: Top content text is center the same as Tablet.
  • Tablet: Below Marketo Form is one column center. CTA is center.
• Best Practice
  • Use the same Marketo Customer code on each Marketo.
  • Use the same AEM code but replace the Marketo form id each time.
  • Use an additional HTML component to add a background image.
• Authoring Guide
  • Work with Marketo Team to create a marketo form case by case.
  • Replace the placeholder Marketo id with the new Marketo form id number.

Rules for Social Share

• Explained
  • The social sharing is known as social media users broadcasting web content on multiple social platforms to their connections, groups, or specific individuals.
• UI
  • It is located on the middle left edge of the page.
  • Social Media: Twitter(#3AAFD6), Linkedin(#0e76a8), Facebook(#3b5999), YouTube(#BD081C), Contact Us(#80539c) and Close/Open(#fcaf1a).
  • Social Media before hover: box with background color(45px x 45px), color(white), font size(15px), text align(center) and line height(45px)
  • Social Media first box hover: box width(60px) and border radius(0 5px 0 0).
  • Social Media last box hover: box width(60px) and border radius(0 0 5px 0).
  • Social Media between boxes hover: box width(60px) and border radius(0 20px 20px 0).
  • Social Media Open(after close): box (45px x 45px) and border radius(0 30px 30px 0).
  • Social Media Open(after close) hover: box width(60px) and border radius(0 30px 30px 0).
  • Social Media Open(after close) - Mobile: box width(60px), border radius(0 30px 30px 0), Opacity(0.25).
• Best Practice
  • The function can be used on any pages.
  • Highly Recommendation: Add it to Product Pages, Glossary Pages, Event Pages, and Campaign Pages.
• Authoring Guide
  • Before converting to a component, the shared link needs to add to each social media icon.

Rules for Back To Top

• Explained
  • Back to Top links help users navigate to the top of long pages. Other techniques may be more appropriate on some sites depending on users' needs.
• UI
  • It is located at the bottom of the page and the right space is 50px to the page edge.
  • Button background color(#fcaf1a), icon color(black) & border radius(7px 7px 0 0).
  • Hover effect: Cursor(pointer)
  • Responsive Web & Tablet: Opacity(1)
  • Mobile: Opacity(0.25) & the right space is 15px to the page edge.
  • Mobile hover: Opacity(1)
• Best Practice
  • The function can be used on all the pages, especially the long content pages.
• Authoring Guide
  • Use it directly after convert to a component.