Promo Block with Image - NCIOCPL/ncids GitHub Wiki

This component is a promotional block with an image, title, description, and button. It typically showcases a major initiative or content marketing item.

Character limits and image guidelines

Character limits are strongly recommended to ensure text is concise, scannable, and not visually distorted.

Title: 32 characters
Card description: 160 characters
Button text: 20 characters
Image guidance and specs:
- NCIDS Promo Block 1:1 Image Style
  - Name - NCIDS Promo Block 1:1
  - Scale Width - 890px
- NCIDS Promo Block 16:9 Image Style
  - Name - NCIDS Promo Block 16:9
  - Scale Width - 1280px

Where to use

Use component on home page or landing pages. This component is not available for inner pages.

When to use

Use PROMO BLOCK WITH IMAGE within the body of your page to promote an important initiative or content item that needs to be displayed prominently.
Depending on the theme of your web page, the PROMO BLOCK WITH IMAGE can be set to have either a dark or light theme, which changes the background color of the card.

When to consider something else:

Sharing call-to-actions (CTAs) that do not need to take up much space within your page or are better displayed with other related CTAs.
- Alternative: CARD (FEATURE) (display content items in sets of three)
- [R2.2] Alternative: GUIDE CARD WITH IMAGE & DESCRIPTION or GUIDE CARD ROW
Showcasing one primary CTA that should be more prominently displayed than all other information on the page and communicates the main purpose of the home page or landing page.
- Alternative: HERO IMAGE WITH BUTTON
Showcasing CTAs that should be more prominently displayed at the top of the page and in a set of three. Only use this option if CTAs do not require a description to be understood by the user or the CTA does not demand more space in the body of the page from a marketing perspective.
- Alternative: HERO IMAGE WITH BUTTON + CTA STRIP or a HERO IMAGE WITHOUT BUTTON + CTA

Component pairing recommendations

Consider the content design of the page when pairing this promo block component with another promo block component either above or below it. Pair promo block components with images on either side of the page (one on the left and one on the right) to guide the user seamlessly through the page.
When using two or more PROMO BLOCK WITH IMAGE components, add components with alternating images. Possible components with alternating image options are the PROMO BLOCK WITH IMAGE and GUIDE CARD WITH BACKGROUND IMAGE. Do not add other components in between this type of component; doing so can interrupt the flow of the page causing the user to stop scrolling through the page