Feature card and Features grid

Feature card and Features grid blocks turn a row of structured highlights into a polished, scannable layout on any page. Each card can lead with a crisp vector icon, a photo or badge from your Media library, or both—an optional icon can sit as a top-left badge on the card when you also use an image.

Use a Features grid when you want several cards in a responsive column layout (services, gear, awards). Drop a single Feature card when you only need one highlight inside a column.

For how blocks sit inside sections and rows, see Page layout and content. For sidebar basics, see Page editor sidebar and toolbar.

Prerequisites

• A page open in Pages → Edit → Page Editor
• Optional: images already uploaded in Media (logos, gear shots, award seals, module thumbnails)
• Optional: a Section → Row → Column shell—or let the editor wrap the block when you drop it on the canvas

Add a Features grid

1. In the right sidebar, click Blocks (plus icon).
2. Under Products & forms (or Advanced, depending on your block palette), drag Features grid into a column.
3. The grid ships with starter cards you can edit or replace.
4. Select the grid on the canvas → Edit → Attr to set columns, gap, and section background.
5. Select an individual card inside the grid to style that card—or use Add card on the grid to grow the set.
6. Save Page and publish when ready.

Add a single Feature card

1. Open Blocks and drag Feature card into a column (often inside a multi-column row).
2. Select the card → Edit → Attr to choose icon, image, colors, and card style.
3. Click the heading and description on the canvas to edit copy inline (WYSIWYG).

Most studios start with Features grid for About, Services, Gear, or Awards pages; use a lone Feature card for a sidebar callout or a single proof point.

How a feature card is built

Every feature card is a small surface with up to four layers visitors recognize instantly:

Layer	What visitors see	Where you edit it
Visual	Icon, image, or image with an optional icon badge	Attr → Image and Icon
Title	Short headline (award name, gear model, service tier)	Click the heading on the canvas
Description	Supporting line (year, specs, one-sentence pitch)	Click the paragraph on the canvas
Link (optional)	Clickable image opening a press page, affiliate URL, or gallery	Attr → Image → Image Link

Cards inherit your site Theme tokens for surface color and shadow so they stay readable in light and dark palettes—see Site theme and branding.

Card modes: icon, image, and overlay

You do not pick a separate “mode” in a dropdown—the card adapts from what you set in Attr:

Icon mode (default)

Leave Image Source empty. Choose an icon under Icon → Select Icon. The icon appears in a rounded container above the title—ideal for service bullets, workflow steps, or gear categories when a photo is not needed.

New cards added with Add card on a grid start in icon mode.

Image mode

Set Image Source from your Media library (or paste a URL). The image displays above the title. Clear Image Source to return to icon-only layout.

PNG badges and logos with transparency work especially well for award seals and brand marks.

Overlay mode (image + optional icon)

When a card has an image and you select an icon, the icon pins to the top-left corner of the card as a small badge—useful when you want a category mark (video, landscape, drone) on top of a publication logo or product photo.

Use Remove icon under Icon if you want a clean image-only badge (common on awards walls).

Icon only          Image only              Image + icon overlay
┌─────────────┐    ┌─────────────┐         ┌─────────────┐
│  [icon]     │    │   [photo]   │         │[i] [photo]  │
│  Title      │    │   Title     │         │   Title     │
│  Desc       │    │   Desc      │         │   Desc      │
└─────────────┘    └─────────────┘         └─────────────┘

Integrated asset pickers (no tab switching)

To streamline your studio workflow, feature cards use native pickers directly in the Attr panel—you stay on the page canvas while choosing visuals.

Media Library image picker

Under Image → Image Source, use the image icon button to open your Media library. Select any image you have already uploaded; choosing another asset overwrites the current one (same pattern as the standalone Image block).

• Pull optimized web assets from Media instead of hot-linking huge originals.
• PNG files with transparency are a strong fit for award seals, sponsor marks, and gear cutouts.
• You can still paste an external URL into Image Source when you need a one-off asset, then blur the field to apply it.

Upload new files first under Media if they are not in the library yet—see Upload your first photos.

Vector icon picker

Under Icon → Select Icon, open the searchable icon library. Thousands of crisp vector marks scale cleanly with your site typography and theme colors.

• Search by keyword—camera, drone, award, clock, users—to match your copy.
• Adjust Icon Size, Icon Color, Icon Background, and Icon Container Rounding without leaving the panel.
• Remove icon clears the badge while keeping your image or text.

Icons render as vectors on the published page, so they stay sharp on retina displays and mobile.

Configure a single feature card (Attr)

Select one Feature card on the canvas → Edit → Attr.

Image

Control	What it does
Image Source	URL field plus Media picker button; leave empty for icon-only cards
Image Link	Optional URL opened when a visitor clicks the image (not the whole card); useful for press releases, affiliate pages, or winning photos

The link wraps only the image, matching how award badges and gear thumbnails typically behave.

Icon

Control	What it does
Select Icon	Opens the vector icon picker
Remove icon	Hides the icon container (image-only or text-only emphasis)
Icon Size	Small through extra-large
Icon Color	Stroke color for the vector
Icon Background	Fill behind the icon
Icon Container Rounding	Corner radius on the icon chip
Alignment	Left, center, or right for icon and text as a group

Card Style

Control	What it does
Card Background	Surface fill (defaults follow your theme)
Border Radius	Rounded corners on the card
Shadow	Depth preset from none through extra-large
Show Border	Optional hairline border
Hover Effect	Subtle lift on hover when enabled

Use Style on the same sidebar if you need one-off spacing tweaks; most card polish lives under Attr.

Configure a Features grid (Attr)

Select the Features grid wrapper (not an inner card) → Edit → Attr.

Layout

Control	What it does
Columns	1–6 columns on desktop; cards reflow on tablet and mobile
Add card	Inserts another starter card at the end of the grid
Gap	Space between cards (slider)
Section Background	Band behind the whole grid (transparent by default)

Changing Columns adjusts layout only—it does not delete cards. Remove extra cards by selecting them on the canvas and deleting, or use Layers.

All Cards Style

These settings push the same icon and card styling to every card in the grid—fast when you want a uniform awards wall or gear catalog.

Control	What it does
Icon Size / Icon Color / Icon Background	Batch icon styling
Alignment	Batch text and icon alignment
Card Radius / Card Shadow	Batch card chrome

Select an individual card afterward to override one row (different accent color on a “featured” service, for example).

Editing titles and body copy

Headlines and descriptions are editable on the canvas—click into the text like a word processor. You do not need a separate rich-text block for card copy.

Keep titles short (award name, product name, service tier). Use the description for year, category, spec line, or one supporting sentence.

Real-world creative use cases

The Features grid is one of the most flexible non-media blocks in the editor. Beyond generic “three columns of bullets,” these layouts appear constantly on professional creative sites.

Awards, honors, and accolades

Celebrate industry recognition without a cluttered collage page.

• Image: Publication seal or winner badge (PNG from Media).
• Title: Award name and placement (2nd Prize, Fine Art — Video).
• Description: Organization and year.
• Image Link: Winning image, press release, or competition gallery.
• Overlay (optional): Small category icon (video, landscape) in the top-left when the badge alone does not convey medium.

This is the same pattern studios use for pages titled Awards and Honors or Recognition.

Camera gear and production loadouts

Commercial, astro, and landscape clients want proof you can execute technically demanding work. Dedicate a grid on About or Gear to your field kit:

• Image: Clean product shot—body, drone, filter holder, tracker.
• Title: Model name or kit role.
• Description: One technical line (Phase One IQ4 150MP — large-format back).
• Image Link: Affiliate program, manufacturer page, or your long-form gear review post.

Icon mode works for categories (Lighting, Support, Filters) when you prefer symbols over photos.

Studio services and retainers

Break hiring paths into scannable tiers—often three columns on desktop:

• Card 1 — On-location production — Hero frame or BTS still; link to portfolio case study.
• Card 2 — Asset delivery and archiving — Drive or gallery graphic; link to client portal overview.
• Card 3 — Post-production and printing — Color or print detail; link to print product page.

Pair the grid with Testimonials below for social proof—see Editor blocks and layout reference.

Workshops and education modules

Outline curriculum blocks for field safaris, online mentoring, or course upsells:

• Title: Module name (Night Sky Planning, Processing Complex RAW Stacks).
• Image: Representative frame or diagram.
• Image Link: Checkout, waitlist, or syllabus page.

Use Events on the section if you want modules to fade in on scroll—Page editor events and interactions.

Layout and mobile behavior

Place the grid inside a Section with comfortable vertical padding. On narrow viewports, multi-column grids stack into a single column automatically—preview with Mobile in the editor toolbar before publish.

For row max-width and column balance, see Page layout and content.

Tips for a professional grid

• Consistent image proportions — Similar aspect ratios across cards read as intentional; crop in Media before selecting.
• One idea per card — Visitors scan; avoid paragraphs in the description field.
• Theme-first colors — Prefer theme surface tokens over hard-coded hex so dark mode stays legible.
• Meaningful links — Image links should land on content that rewards the click (gallery, article, product)—not generic homepages.
• Reuse Media — Store seals and gear once in Media; reference them across pages and blog posts.

Troubleshooting

Symptom	What to check
Icon changes in Attr but canvas looks unchanged	Card may be image-only with no icon yet—pick an icon or use Remove icon then re-select; save and refresh preview
Icon sits between image and text instead of top-left	Re-select the icon or replace the image once—placement syncs icon to the card corner when an image is present
Image picker is empty	Upload assets under Media first
Image Link is disabled	Set Image Source first
Grid columns look cramped on mobile	Reduce column count or shorten titles; preview Mobile
Styles differ between editor and live site	Save Page, publish, hard-refresh; see Troubleshoot publishing issues
Migrated WordPress page shows dashed placeholder boxes	Re-import or rebuild the page with current migration tools—contact support if you manage a legacy import

Related articles

• Editor blocks and layout reference — full block catalog
• Add media to pages — wiring library assets into blocks
• Page editor events and interactions — motion on grid sections
• Site theme and branding — colors and surfaces cards inherit

Verifying your setup

1. Add a Features grid with three cards to a draft page.
2. On one card, set an image from Media and an Image Link.
3. On another, use Icon only with a distinct color.
4. On the third, combine image + icon overlay.
5. Save Page, preview desktop and mobile, publish, and confirm the public URL matches the editor.