Feature Cards - NCIOCPL/ncids GitHub Wiki
This component contains clickable content about a single subject.
Character limits and image guidelines
Character limits are strongly recommended to ensure text is concise, scannable, and not visually distorted.
- Title: 20 characters
- Card description: 160 characters
- Image guidance and specs:
- NCIDS Feature Card 16:9 Image Style
- Name - NCIDS Feature Card 16:9
- Minimum Dimensions = 1408px x 792px
- Usage - Tablet breakpoint (640px px < breakpoint < 880px)
- NCIDS Feature Card 4:3 Image Style
- Name - NCIDS Feature Card 4:3
- Minimum Dimensions - 700px x 525px
- Usage - Widescreen, Desktop, Tablet Large breakpoints (breakpoint >= 880px)
- For Mobile Large and Mobile breakpoints, no image will be displayed
- NCIDS Feature Card 16:9 Image Style
Where to use
Use component on home, landing, and inner pages.
When to use
Use CARD (FEATURE CARD) within the body of your page to showcase multiple content items such as articles, blogs, news, or events.
When to consider something else:
- Showcasing call-to-actions (CTAs) for major initiatives or content marketing items that should be described further through an image and description.
- 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 multimedia, like a video or infographic, that isn’t nested within its own page, or to extract and highlight key insights from multimedia assets.
- Alternative:
INLINE VIDEO COMPONENT,FACTOID WITH IMAGE,FACTOID WITH LINK TO INFOGRAPHIC,QUOTE WITH IMAGE, orQUOTE WITHOUT IMAGE
- 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.