Site Guidelines
Components
Grid Box Light
Image
The image size for grid box light is 768 X 432.
*Please ensure the image is optimized for the web. File must not be larger than 100KB.
Grid box light features
1. The title, image and CTA button are clickable with the URL added to the URL field
2. Grid box light can have either a white or grey background
3. You have two options for the title color: Black or Green
4. You have two options for the CTA button style: Primary or Secondary
5. You can position the image at the top or the bottom
Component elements
Please note all elements with an asterisk next to the element title are required.
Example:
Enter the category. Please note:
1. The category is limited to 50 characters maximum.
2. If you select to have the image placed at the top, the category will not show.
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.
Click the drop down to select the title color. Options are Black (default) or Green.
Enter the description. Please note the description is limited to 250 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 (default) or Secondary. *Please note the secondary button style washes out when the grey background is used.
CTA button style examples:
To add the image, click the select button. The library selection box will pop up.
Find your image in the library, select it and click OK.
You will see the image is now loaded. To change the image, click select again and follow the same steps.
Click the expand arrow next to Image Attributes and add the Image Alternate Text.
Click the drop down to select the image position. The options are Bottom (default) or Top.
Click the drop down to select the component back ground color. The options are White (default) or Grey.
Save and Close your changes.
Related Components
Title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Learn More