Promo Block without Image - NCIOCPL/ncids GitHub Wiki

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)
    • 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

Accessibility

Component Preview

Code for component