Go Back to Parent Doc

Card & Icon Blocks

Cards are the workhorses of marketing pages — features, services, USPs, team members. Bloqra ships a family of card blocks, each optimized for a different shape of content, plus the icon blocks that power them.

Which card should I use?

You wantUse
Icon + heading + text, compactIcon Box
Image-led card with a CTAImage Box
Flexible mix — icon or image, plus a buttonInfo Box
A card that flips to a second sideFlip Box
An image card that reveals content on hoverInteractive Card
A person, with photo, role, and social linksTeam Member

Info Box

The flexible all-rounder: icon or image, heading, text, and an optional button. Style it with the native color, border, and shadow controls, add hover effects, and use it for features, services, tips, and notes.

Icon Box

A compact icon + heading + text card for feature lists, service grids, and USP rows.

  • Icon badge shapes (none, circle, rounded, square) that scale with the icon size; stroke-width and size controls.
  • Icon positions: top, left, right, or inline on the heading line.
  • Optional whole-card link (accessible — the link lives on the heading, the card is its click area).
  • Hover effects: lift, grow, glow, border.
  • Styles: Default, Boxed, Outlined.

Image Box

An image-led card with heading, text, and a call-to-action — services, features, portfolio teasers.

  • The image is the hero: full-bleed with the same aspect-ratio options as the core Image block, plus an optional hover zoom.
  • CTA as a text link with an animated arrow, or as a button with its own colors.
  • Optional whole-card click area; an Overlay style stacks the content over the image on a gradient.
  • Styles: Default, Overlay, Boxed, Outlined.

Flip Box

A two-sided card that flips on hover or click — front for the teaser, back for the details and a call to action.

  • Image, title, content, and button on both sides.
  • Flip directions: horizontal, vertical, diagonal.
  • Falls back gracefully for keyboard users and reduced-motion preferences.

Interactive Card

An image card that reveals extra content on hover or tap — portfolios, services, category tiles.

  • Front layer: subtitle + title over the image on a color or gradient overlay.
  • Reveal layer: any blocks, sliding or fading in (slide-up, fade, or zoom effects).
  • Keyboard users get the reveal on focus; touch users on first tap; reduced-motion visitors get a simple fade.
  • For a two-sided 3D flip, use Flip Box instead.

Team Member

A person card for team pages, about sections, and speaker lists.

  • Photo with circle, rounded, or square shape presets, size control, and top or left position.
  • Name (any heading level), role, and short bio.
  • Social links are the native Social Icons block nested inside — every service, style, and control WordPress ships, pre-seeded with X, LinkedIn, and email.
  • Styles: Default, Boxed, Outlined.

Icon

A single icon from the 1,900+ Lucide icon library, anywhere on the page.

  • Size, color, background, border, shadow, animation, link, and accessibility-label controls.
  • The same library powers icons across Bloqra — Icon List, Icon Box, tab icons, timeline markers, star ratings, and more.

Icon List

Feature lists, checklists, and benefit bullets with an icon next to every item.

  • Vertical, horizontal, or grid layouts.
  • Set a default icon for the whole list and override it per item; add links per item.
  • Icons and text are styled independently; each item is its own block, edited inline like the core List block.
Shopping Cart
  • Your cart is empty.