Build
Feature Card
An icon or image, a title and some text — the widget most pages use more than any other.
NovaKit Feature Card is the workhorse: three across for a services row, four for a benefits grid, one on its own as a highlight. It looks simple because most of its range is in how the pieces are arranged rather than in what they are.
The media #
Media Type decides what sits above or beside the text:
| Icon | From any installed set. Icon Style controls whether it sits bare, in a tinted circle or a filled shape. |
| Image | Your own picture — a screenshot, an illustration. |
| None | Text only. |
With an image there is one further switch: Use as Background (Overlay). Instead of sitting above the text, the picture fills the card and the text sits over it — the same widget, a completely different look.
Overlay needs the right image. Text over a busy photograph is unreadable. Either choose pictures with a quiet area, or add a dark tint under the text in Style.
Layout and alignment #
Layout puts the media above the text or beside it. Above suits a grid of equal cards; beside suits a stacked list, where a row of icon-left cards reads faster than a column of centred ones.
There are two alignment controls, and they do different things — worth knowing, since it is easy to reach for the wrong one:
| Alignment (media) | Where the icon or image sits within its own space. |
| Alignment (content) | How the title and text align — left, centred, right. |
Content #
| Setting | Default | Accepts |
|---|---|---|
| Title | — | Free text, or a dynamic tag |
| Title HTML Tag | H3 | H1–H6, div, span, p |
| Description | — | Free text |
| Card Link | — | A URL. Makes the whole card clickable |
| Show Button | Off | On or off, with its own text, icon and icon position |
| Card Padding | — | Inner spacing |
A Card Link and a button together is a trap. The whole card is already clickable, so a button inside it is a link inside a link — confusing to use and invalid markup. Pick one: the card link for a grid where every card goes somewhere, the button when only some do.
Hover effects #
Under Style. Applied to a whole row they turn a static grid into something that responds:
| Lift | The card rises slightly. The safest, and reads clearly as "clickable". |
| Zoom | The image grows inside its frame. |
| Overlay Fade | A tint fades in over the image. Pairs with the overlay layout. |
| Content Lift | The text rises while the card stays put. |
Use the same effect across a row. Three cards with three different hovers looks like a mistake rather than a decision.
Building a row #
- Add a horizontal ContainerThis holds the row and controls the gaps.
- Build one card properlyMedia, title, text, padding, hover — get it right once.
- Duplicate itRight-click the widget and duplicate, twice. Every card then matches by construction.
- Change only the contentIcon, title, text. Leave the styling alone.
- Set the mobile stackOn the Container, so three across becomes one down.
If the cards are driven by content rather than typed in — a services grid built from a Services post type, say — use NovaKit Smart Loops with a Card template instead. Adding a service then means publishing one, not editing a page.