Custom Meta Tags
Hero Banner

Components

Component Documentation

Right Rail Card Dark

Right rail card dark best practices

1. The right rail card dark component should only be used in the right rail.

2. This component can be stacked but will have no spacing in between each component.

3. You should have a green separator line at the bottom of each card except for the last card at the bottom.

       a. If you only use one right rail card no green line should be used.

Component elements

Please note all elements with an asterisk next to the element title are required.

Example:

Enter the title. Please note the title is limited to 70 characters maximum. The brand style for the title is the first word should be capitalized and all other words, unless proper names, should be lower case.

Enter the description. Please note the description is limited to 230 characters maximum.

Enter the CTA button text. Please note the CTA text is limited to 36 characters maximum.

Enter the CTA URL. Please use the following URL formats:

1. To link to an external page: Always begin with http(s):// + URL. Example. To add a link to element14 it would be https://www.element14.com/community/welcome

2.  To link to an internal page: Use the following format: /wps/portal/ + page url. Example. To add a link to this page https://www.avnet.com/wps/portal/us/solutions/iot/ you would use /wps/portal/us/solutions/iot/

*Make sure to remove the word “my” that is in front of the word “portal" if you are copying the URL from pre-prod

3. To link to a commerce page: Begin the URL from the /shop all the way to the end of the URL. Example. To link to this page https://www.avnet.com/shop/us/c/amplifiers/ you would use /shop/us/c/amplifiers/

Select the CTA target. The options are self (default): opens the link in the same tab, new: opens the link in a new tab or lightbox: opens in a lightbox. The best practice is to use self if linking to a page within your site and new when linking to an external site. Lightbox is best used for displaying videos/diagrams.

Click the drop down to select the CTA button style. The options are Primary or Secondary (default).

CTA button style examples:

Select if the green separator should display. The options are No (defalut) and Yes.

Save and Close your changes.

Related Components