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
orGUIDE CARD ROW
(to provide users with sets of related CTAs)
- Alternative:
- 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
- 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 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 aHERO 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.
- Alternative:
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.