Promo Block without Image (Dark or Light) - NCIOCPL/ncids GitHub Wiki

Promo Block without Image (Dark or Light)

This component is a promotional block with a 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: 49 characters
  • Card description: 160 characters
  • Button text: 20 characters

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 WITHOUT IMAGE within the body of your page to promote an important initiative or content item that does not (and will not) have a related image.
    • Note: Text should be impactful and striking, as there is no supporting visual, while remaining concise and scannable.
  • Depending on the theme of your web page, the PROMO BLOCK WITHOUT 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) (to display content items in sets of three)
    • Alternative: GUIDE CARD WITH IMAGE & DESCRIPTION or GUIDE CARD ROW (to provide users with sets of related CTAs)
  • Showcasing a CTA for a major initiative or content marketing item that does have an image which can be used to describe this item further.
    • Alternative: PROMO BLOCK WITH IMAGE
  • Showcasing one primary CTA that should be more prominently displayed than all other information on the 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.
    • Alternative: HERO IMAGE WITH BUTTON + CTA STRIP or a HERO IMAGE WITHOUT BUTTON + CTA
      • Note: Only use these options 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.

Pairing recommendations:

If used on home page and landing pages, use cards in rows of three to maintain the visual consistency of the site.

Accessibility

Component Preview

Code for component

Multiple-link Card

This is the multiple-link variant of the NCIDS Feature Card.