The call out component can be used to make a shorter paragraph/section of a page standout and includes an optional CTA button. It always has a grey background and two CTA style options.

Component elements

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

Example:

Enter the body copy. Please note the body copy is limited to 400 characters maximum.

Enter the CTA button text. Please note the CTA text is limited to 18 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/

Click the drop down to select the CTA target. The options are Self (default): opens the link in the same tab or New: opens the link in a new tab. The best practice is to use self if linking to a page within your site and new when linking to an external site or a document/video/download.

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

CTA button style examples:

Save and Close your changes.

Complementary Content

${loading}