Cards
The <pines-image-card> component renders a visually framed content block combining an image with a title and optional body content. Use it to present items in grid or list layouts — such as product listings, team member profiles, portfolio entries, or news articles — where each item benefits from a visual thumbnail paired with descriptive text.
Properties
| Attribute | Type | Description |
image-url
|
string
|
URL of the image displayed at the top of the card. Use a high-quality image that represents the card's subject — thumbnails, avatars, product photos, or cover images work well here. |
title
|
string
|
Primary heading displayed below the image. Keep it concise and descriptive — it is the first text the user reads and should clearly identify the card's content. |
class
|
string
|
Additional CSS classes applied to the card container. Use to control width, spacing, or shadow within a parent grid or flex layout. |
Named Slots
| Slot Name | Description |
PinesImageCard.CardContentSlot
|
Custom content rendered as the card body. Uses a static string constant defined in the PinesImageCard class.
|