Button Style
Primary Button
- Is used in Hero Banner for these views:
- Home Page Banner
- Top Banner
- May be used within the body of a page if it is the only CTA on the page; examples where this may occur: Blog page, Press Release, Success Story
- Should be only one Primary Button per page
Secondary Button - White
- Is used in Hero Banner for these views:
- Home Page Banner
- Top Banner
- Offer/Form Banner
- Card Images with Background Image Layout
- Is used on a dark background in the page body
Secondary Button - Color (Dark Grey)
- Is used on a light background within the page body
- Is used in Hero Banner for Offer Banner view, if White Button does not provide enough contrast
Ghost Button
- Is used on a light background within the page body, typically for a CTA in a 50/50 split on the side where the Text appears
Ghost Button - Dark
- Is used on a dark background within the page body.
Link Style
- Next Step is used below Card Carousel or Card 2x2 Section Layout to take users to the View All option for cards
- White does not have any use cases at this point in time, but it would be used on a dark background color
- Mini is used only on product pages in the Hero Banner for the functionality that is tied to Digital Exchange. (Phase 2)
- Body Link is used in all cards, except for Card Images with Background Image Layout, which uses Secondary Button style
- Body Link may be used as a standalone CTA within the body of a page
Action
Regardless of whether the Smart Button is a button or link, select one of the following to define the action to be taken:
- Redirect - Use when linking to an internal AEM web page or an external web page
- Browse - do not copy/paste - to an AEM web page
- Use https:// for an external URL
- A Marketo URL (with engage.aveva.com) is considered to be an external URL even though it is an AVEVA domain
- Download - Use when linking to a .pdf or .exe file type (download behavior determined by user's individual browser preferences)
- Scroll to Section - Use when creating an anchor link; this is used in conjunction with the Section ID field in the Background Container component
- Pop-up Video - Use when a video should pop up in a modal (typically this will be done in Home Page or Top Banner when either Primary or Secondary Button style is used)
- Enable Top Padding does not work for this style
- Form Overlay - Use when a form should open in a lightbox - only 1 Marketo form per page may open in a pop-up due to a known bug with Marketo that will duplicate the form in the pop-up (confirm if only when opened from a button and not from a link in Smart Button)
- Recommendation is to reserve the usage of the pop-up form in the lead-generation Offer Banner used at the bottom of the page in Solutions, Industries, and Products site sections