Card
ready
A card displays related information in a concise, visually grouped container.
Example
Loading
Code
HTML
import { NbhdCard } from '@fbin-web/neighborhood-core';<nbhd-card surface="secondary">
<nbhd-image slot="media" loading="lazy" provider="widen" crop="" src="https://placehold.co/498x280"
img-class="media-css-class-card-1" image-focus="center" alt="Fun ALT Card 1 for images">
</nbhd-image>
<nbhd-text tag="h4" slot="title">
Card Title
</nbhd-text>
<nbhd-text slot="content" tag="div">
Donec ullamcorper nulla non metus auctor fringilla.
</nbhd-text>
<nbhd-cta slot="cta" variant="tertiary" href="fun-test-link">
Some Random Link
</nbhd-cta>
</nbhd-card>React
import { NbhdCard, NbhdImage, NbhdText, NbhdCta } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdCard surface="secondary">
<NbhdImage
slot="media"
loading="lazy"
crop=""
src="https://moen.widen.net/content/qvmrvyj220/original/smartsprinkler-controller-app-campaignslider.jpg"
img-class="media-css-class-card-1"
imageFocus="center"
alt="Fun ALT Card 1 for images"></NbhdImage>
<NbhdText
tag="h4"
slot="title">
Card Title
</NbhdText>
<NbhdText
slot="content"
tag="div">
Donec ullamcorper nulla non metus auctor fringilla.
</NbhdText>
<NbhdCta
slot="cta"
variant="tertiary"
href="fun-test-link">
Some Random Link
</NbhdCta>
</NbhdCard>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
cssClass
|
css-class
|
string
|
Additional CSS class names to apply to the card. | |
shadow
|
shadow
|
boolean
|
false
|
If true, the card will have a shadow. |
alignment
|
alignment
|
start | center | end
|
center
|
The alignment of the card content. |
surface
|
surface
|
none | primary | secondary | inverse | inverse-secondary
|
primary
|
The surface theme of the card. |
reverse
|
reverse
|
boolean
|
false
|
If true, the card layout will be reversed. |
aspectRatio
|
aspect-ratio
|
square | landscape | portrait
|
landscape
|
The aspect ratio of the card media. |
zoom
|
zoom
|
boolean
|
false
|
If true, the card media will zoom on hover. |
mediaInset
|
media-inset
|
boolean
|
false
|
If true, the card media will have an inset style. |
layout
|
layout
|
stacked | inline | featured
|
stacked
|
The layout of the card. |
ariaLabel
|
aria-label
|
string
|
|
The accessible label for the card when it is clickable. |
clickable
|
clickable
|
boolean
|
false
|
If true, the card will be rendered as a link or button. |
href
|
href
|
string
|
The URL for the card link when clickable is true.
|
|
external
|
external
|
boolean | undefined
|
If true, the card link will open externally when href is provided.
|
|
action
|
function | undefined
|
The action to execute when the card is clicked. Requires clickable to be true. |
Slots
| Name | Description |
|---|---|
title
|
Content for the card title area, typically text or heading elements. |
media
|
Content for the card visual area, typically images or other media elements. |
content
|
Content for the main card body area, typically descriptive text or other content. |
cta
|
Content for the call-to-action area. Only rendered when clickable is false. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main card wrapper element, rendered as a div, link, or button depending on the card configuration. |
visual
|
The visual container that wraps the media content at the top of the card. |
media
|
The media slot container for images, videos, or other rich media content. |
detail
|
The detail container that wraps the text content (title, content, and CTA) below the visual area. |
title
|
The title slot container for the card's primary heading text. |
content
|
The content slot container for the card's descriptive text or body content. |
cta
|
The CTA slot container for call-to-action buttons. Only rendered when clickable is false. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-card-host-display
|
block |
--nbhd-card-blockSize
|
100% |
--nbhd-card-borderColor
|
transparent |
--nbhd-card-borderRadius
|
0 |
--nbhd-card-borderStyle
|
solid |
--nbhd-card-borderWidth
|
0 |
--nbhd-card-boxShadow
|
none |
--nbhd-card-display
|
flex |
--nbhd-card-flexDirection
|
column |
--nbhd-card-justifyContent
|
start |
--nbhd-card-maxInlineSize
|
100% |
--nbhd-card-overflow
|
hidden |
--nbhd-card-paddingBlock
|
0 |
--nbhd-card-paddingInline
|
0 |
--nbhd-card-position
|
relative |
--nbhd-card-detail-alignItems
|
start |
--nbhd-card-detail-blockSize
|
auto |
--nbhd-card-detail-display
|
flex |
--nbhd-card-detail-flexDirection
|
column |
--nbhd-card-detail-inlineSize
|
auto |
--nbhd-card-detail-justifyContent
|
end |
--nbhd-card-detail-paddingBlock
|
24px |
--nbhd-card-detail-paddingInline
|
24px |
--nbhd-card-detail-position
|
static |
--nbhd-card-detail-textAlign
|
start |
--nbhd-card-detail-zIndex
|
auto |
--nbhd-card-title-color
|
var(--nbhd-context-color-text-primary) |
--nbhd-card-title-fontSize
|
1.125rem |
--nbhd-card-title-fontWeight
|
700 |
--nbhd-card-title-lineHeight
|
1.3 |
--nbhd-card-title-marginBlock
|
0 16px |
--nbhd-card-title-marginInline
|
0 |
--nbhd-card-title-paddingBlock
|
0 |
--nbhd-card-title-paddingInline
|
0 |
--nbhd-card-visual-alignSelf
|
auto |
--nbhd-card-visual-aspectRatio
|
498 / 280 |
--nbhd-card-visual-blockSize
|
auto |
--nbhd-card-visual-inlineSize
|
auto |
--nbhd-card-visual-marginBlock
|
0 |
--nbhd-card-visual-marginInline
|
0 |
--nbhd-card-visual-overflow
|
hidden |
--nbhd-card-visual-position
|
static |
--nbhd-card-visual-zIndex
|
auto |
--nbhd-card-visual-image-host-blockSize
|
100% |
--nbhd-card-visual-image-host-inlineSize
|
100% |
--nbhd-card-visual-image-blockSize
|
100% |
--nbhd-card-visual-image-objectFit
|
cover |
--nbhd-card-visual-image-transitionDuration
|
500ms |
--nbhd-card-visual-image-transitionProperty
|
transform |
--nbhd-card-visual-landscape-aspectRatio
|
498 / 280 |
--nbhd-card-visual-portrait-aspectRatio
|
280 / 373 |
--nbhd-card-visual-square-aspectRatio
|
1 / 1 |
--nbhd-card-zoom-hover-transform
|
scale(1.1) |
--nbhd-card-shadow-boxShadow
|
-4px 2px 16px 3px rgb(from #000000 r g b / 0.15) |
--nbhd-card-alignment-start
|
start |
--nbhd-card-alignment-center
|
center |
--nbhd-card-alignment-end
|
end |
--nbhd-card-clickable-link-host-display
|
block |
--nbhd-card-clickable-link-display
|
flex |
--nbhd-card-clickable-link-textDecoration
|
none |
--nbhd-card-clickable-action-alignItems
|
stretch |
--nbhd-card-clickable-action-display
|
flex |
--nbhd-card-clickable-action-whiteSpace
|
normal |
--nbhd-card-clickable-content-marginBlock
|
0 |
--nbhd-card-visual-mediaInset-stacked-marginBlock
|
24px 0 |
--nbhd-card-visual-mediaInset-stacked-marginInline
|
24px |
--nbhd-card-visual-mediaInset-stacked-reverse-marginBlock
|
0 24px |
--nbhd-card-visual-mediaInset-inline-marginBlock
|
24px |
--nbhd-card-visual-mediaInset-inline-marginInline
|
24px 0 |
--nbhd-card-visual-mediaInset-inline-reverse-marginBlock
|
24px |
--nbhd-card-visual-mediaInset-inline-reverse-marginInline
|
undefined |