Call to Action Strip - NCIOCPL/ncids GitHub Wiki
This component is a call-to-action (CTA) block with three buttons to feature three different CTAs, which lead users to different pages.
Character limits and image guidelines
Character limits are strongly recommended to ensure text is concise, scannable, and not visually distorted.
- Button text: 20 characters
Where to use
Use component at the top of your home page and landing pages. This component is not available for inner pages.
When to use
Use a CTA STRIP (in conjunction with either the HERO IMAGE WITH BUTTON or the HERO IMAGE WITHOUT BUTTON) when a page needs to prominently display multiple CTAs. It quickly directs users to important information on other pages. If a CTA strip is not paired alongside a hero component, CTAs should not require a description to be understood by the user.
When to consider something else:
- When CTAs are not relevant to one another and should not be grouped together, or showcasing CTAs for major initiatives or content marketing items that should be described further through an image and description.
- Alternative:
PROMO BLOCK(S) WITH IMAGE
- Alternative:
- Showcasing one primary CTA that should be more prominently displayed than all other information on the page.
- Alternative:
HERO IMAGE WITH BUTTON
- Alternative:
- Showcasing multiple content items that rely on their title and description to convey a message.
- Alternative:
(FEATURE) CARDS
- Alternative:
Pairing recommendations:
This component can be used alongside a variation of the hero component (either the HERO IMAGE WITH BUTTON or the HERO IMAGE WITHOUT BUTTON). If used with the hero component, CTAs must be related to the CTA featured on the hero component. CTAs must also work alongside the hero’s tagline and primary CTA to communicate the main purpose of the site or section.