Docs Block Reference Icon Card

Icon Card

A single pictogram — picked from the icon library, or uploaded as SVG / image — with optional Title, Description, and Link. Behaves as a self-contained "feature card" when text is added.

When to use it

  • Single feature card with an icon + headline + short description
  • Standalone decorative icon
  • Linkable icon as a navigation accent

When not to use it

  • A row of feature icons — use Table
  • An icon inside a button — Button has its own Select Icon control
  • Pure decorative SVG with no card framing — use Shape

Source — Icon · SVG · Image (3-button row, default: Icon star)

Three equal buttons swap the icon source:

  • Icon Card — pick from the built-in icon library
  • SVG — upload a custom SVG file
  • Image — upload a raster image as the icon

When an Image is uploaded, a 32×32 thumb preview appears with a Remove button below the source row.

Layout (appears when Title or Text is set)

Text position — Below · Above · Left · Right (default: Below)

Where the title + description sit relative to the icon.

Vertical align (Left / Right text-position only) — Top · Center · Bottom (default: Center)

Aligns the text column vertically against the icon when the text is to the side.

Horizontal align (Below / Above text-position only) — Left · Center · Right (default: Center)

Aligns the icon + text stack horizontally within the block.

The two align rows swap based on text_position — only one is visible at a time.

Content

  • Title — text input, plain placeholder "Title"
  • Description — 2-row textarea, placeholder "Description"
  • Link URL — text input
  • New Tab — checkbox next to the link input

Colours (2 swatches)

  • Icon Card — icon fill / stroke colour (default: #666666)
  • Text — title + description colour (default: #666666)

There is no separate Hover swatch — hover behaviour is motion (stroke-draw + depth-focus), not a colour swap.

Sliders (2 × 3 grid)

  • Padding — 0–48px (default: 16). Inner padding around the

    • icon.

  • Icon Card / Image — 16–128px (default: 48) for icon/SVG, or

    • 50–200px when an image is uploaded. Label and range adapt.

  • Radius — 0–50% (default: 50). Outer corner roundness.
  • Title — 12–48px (default: 18). Title font size.
  • Stroke — 0–6px (default: 0). Border width around the icon

    • shape.

  • Text — 8–32px (default: 14). Description font size.

Entrance animation

Standard entrance-animation widget at the bottom.

Per-device overrides

Padding, Icon size, Title size, Text size all have separate Tablet and Mobile values.

Common overrides:

  • Icon size — smaller on mobile (32–40px)
  • Title size — drop a step or two on mobile
  • Text position — sometimes flip from Left to Below on mobile

Common patterns

Feature card

Source Icon Card · pick something thematic · Text position Below · Title "Fast" · Description 1-line · Stroke 0 · Radius 50.

Icon-with-text row

Source Icon Card · Text position Right · Vertical align Center · Title only (no description).

Linkable navigation icon

Source Icon Card or SVG · No title / description · Link URL set · Padding 0 · Icon size 32.

Related

  • blocks/icon-card-card-list — for a row / column of multiple icons
  • blocks/button — when the primary intent is a click target

    • (Button has its own icon picker)

  • blocks/image — for raster-only image marks where icon

    • semantics aren't needed