Featured Items
A featured item is a card that highlights and links to content — either another page on your site or an external URL. Featured items are commonly used in grids and carousels to create visually engaging navigation.
What It Looks Like in Contentful
| Field | What It Does |
|---|---|
| Administrative Title | Internal label (e.g., “Card - Summer Program”) |
| Card Type | Visual style of the card — options vary by site |
| Background Color | Card background — options like neutral, sage, cold, midnight |
| Feature Image | The image displayed on the card |
| Blurb | Short description text shown on the card |
| Badge Label | Optional small label overlaid on the card (e.g., “New”, “Featured”) |
| Referenced Content | Link to an internal page — clicking the card goes here |
| URL Link | Alternative: link to an external URL instead of an internal page |
| Author | Optional — links to a Person entry (for news/blog-style cards) |
| CSS Class | A styling hook used to customize how this card looks. Your developer manages these values. As per-site documentation is built out, available CSS classes for your site will be documented there. |
How Featured Items Are Used
Featured items are almost always placed inside a section (Pure Aggregator) set to Grid display mode. This creates a grid of clickable cards.
Example: Homepage Feature Grid
Pure Aggregator: "Explore" (Grid, 3 columns)
├── Featured Item: "Our Programs" → /programs (image + blurb)
├── Featured Item: "Get Involved" → /volunteer (image + blurb)
└── Featured Item: "Latest News" → /news (image + blurb)This renders as three cards side by side, each with an image, title, description, and a link.
Internal vs External Links
Each featured item links to something when clicked:
- Referenced Content — pick an existing page on your site. The card links to that page’s URL automatically.
- URL Link — type in any external URL (e.g., a YouTube playlist, a partner website, a registration form). The link opens in a new tab.
Use one or the other — if both are filled in, the internal reference takes priority.
Card Types
The card type controls the visual style. Available options depend on your site’s design, but common types include:
| Card Type | Typical Use |
|---|---|
| Default | Standard card with image and text |
| News | News article style — may show date and author |
| Story | Narrative content — may have different image treatment |
| Discover More | Call-to-action style — prominent button or arrow |
Ask your developer which card types are available on your site and what each looks like.
Tips
- Keep blurbs short. 1–2 sentences works best on cards. Long descriptions get cut off or make the grid look uneven.
- Use consistent image sizes. Cards in the same grid look best when all images have similar dimensions and aspect ratios.
- Badge labels are optional. Use them sparingly — they’re great for highlighting “New” content or categorizing items, but too many badges create visual noise.
- Featured items are reusable. The same card can appear in multiple sections across your site.