Brickslab.Tools

@brickslab./ui-web

Feature card component for bento grids with optional icon, description, CTA, and hover effects. Renders as link or div based on props. Perfect for showcasing features.

Aperçu

No hover effect (default)

Simple Card

Just a title and description

No Description

With hover="lift" effect

Lift Effect

Hovers up smoothly

With CTA

Interactive card

Explore →

With hover="glow" effect

Glow Effect

Emits subtle glow

Linked Card

Click to navigate

Visit →

Props Table

Prop	Type	Défaut	Requis	Description
`name`	`string`	—	✓	Card title/heading.
`description`	`string`	—	—	Optional extended description text.
`Icon`	`React.ElementType`	—	—	Optional icon component to display at the top.
`href`	`string`	—	—	If provided, renders as a link element with this href.
`cta`	`string`	—	—	Call-to-action text (e.g., 'Learn more'). Shows arrow suffix.
`hoverEffect`	`"lift" \| "glow" \| "none"`	`"none"`	—	Hover animation: "lift" (translateY), "glow" (box-shadow), "none" (no animation).
`interactive`	`boolean`	`false`	—	Enable interactive cursor feedback.
`className`	`string`	—	—	Additional CSS class for custom styling.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  name="..."
  description="..."
  Icon={...}
  href="..."
  cta="..."
  hoverEffect="none"
  interactive={false}
  className="..."
/>

namedescriptionIconhrefctahoverEffectinteractiveclassName

Usage

tsx

import { BentoCard } from "@brickslab./ui-web";
import { FiCode } from "react-icons/fi";

// Basic card
<BentoCard name="Development" description="Build faster" />

// With icon and link
<BentoCard
  name="Documentation"
  description="Learn the basics"
  Icon={FiCode}
  href="/docs"
  cta="Read"
/>

// With hover effect
<BentoCard
  name="Feature"
  Icon={FiStar}
  hoverEffect="lift"
  interactive
/>

// Interactive callback
<BentoCard
  name="Action"
  onClick={() => console.log("clicked")}
  hoverEffect="glow"
  interactive
/>