Card

Ready

A card displays related information in a concise, visually grouped container.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdCard } from '@fbin-web/neighborhood-core';

Usage

<nbhd-card surface="secondary">
  <nbhd-image
    slot="media"
    loading="lazy"
    provider="widen"
    crop=""
    src="https://placehold.co/498x280"
    css-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>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdCard } from '@fbin-web/neighborhood-react';

Usage

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"
        imgClass="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`	`startcenterend`	`center`	The alignment of the card content.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	The surface theme of the card.
`reverse`	`reverse`	`boolean`	`false`	If true, the card layout will be reversed. This only changes the visual order: keyboard and screen reader order still follow the markup, so don’t reverse content whose order matters (e.g. focusable media before its text) (WCAG 1.3.2).
`aspectRatio`	`aspect-ratio`	`squarelandscapeportrait`	`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`	`stackedinlinefeatured`	`stacked`	The layout of the card.
`ariaLabel`	`aria-label`	`string`	—	Overrides the accessible name of a clickable card. The card is otherwise named by its visible title, so only set this when needed, and start it with the visible title text (WCAG 2.5.3 Label in Name). Without it, a card with `action` is named by its title, or else its content, or else its media (such as an image alt).
`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`	`booleanundefined`	—	If true, the card link will open externally when `href` is provided.
`action`	—	`functionundefined`	—	The action to execute when the card is clicked. Requires clickable to be true. A transparent button stretched over the card takes the click, so the card’s title keeps its heading semantics; the button is named by the title.

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: a link for link cards, otherwise a div.
`action`	The transparent button stretched over an action card (clickable with action).
`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.

nbhd-card::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-card or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Card

Property	Token	Value
`--nbhd-card-alignment-center`	—	`center`
`--nbhd-card-alignment-end`	—	`end`
`--nbhd-card-alignment-start`	—	`start`
`--nbhd-card-blockSize`	—	`100%`
`--nbhd-card-borderColor`	—	`transparent`
`--nbhd-card-borderRadius`	`--nbhd-border-radius-none`	`0`
`--nbhd-card-borderStyle`	—	`solid`
`--nbhd-card-borderWidth`	`--nbhd-border-width-none`	`0`
`--nbhd-card-boxShadow`	`--nbhd-shadow-none`	`none`
`--nbhd-card-clickable-action-alignItems`	—	`stretch`
`--nbhd-card-clickable-action-display`	—	`flex`
`--nbhd-card-clickable-action-whiteSpace`	—	`normal`
`--nbhd-card-clickable-content-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-card-clickable-link-display`	—	`flex`
`--nbhd-card-clickable-link-host-display`	—	`block`
`--nbhd-card-clickable-link-textDecoration`	—	`none`
`--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`	`--nbhd-space-6`	`24px`
`--nbhd-card-detail-paddingInline`	`--nbhd-space-6`	`24px`
`--nbhd-card-detail-position`	—	`static`
`--nbhd-card-detail-textAlign`	—	`start`
`--nbhd-card-detail-zIndex`	`--nbhd-z-auto`	`auto`
`--nbhd-card-display`	—	`flex`
`--nbhd-card-flexDirection`	—	`column`
`--nbhd-card-host-display`	—	`block`
`--nbhd-card-justifyContent`	—	`start`
`--nbhd-card-maxInlineSize`	—	`100%`
`--nbhd-card-overflow`	—	`hidden`
`--nbhd-card-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-card-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-card-position`	—	`relative`
`--nbhd-card-shadow-boxShadow`	`--nbhd-shadow-sm`	`-4px 2px 16px 3px rgb(from #000000 r g b / 0.15)`
`--nbhd-card-title-color`	`--nbhd-context-color-text-primary`	Adapts to surface
`--nbhd-card-title-fontSize`	`--nbhd-typography-subheading-fontSize`	`1.125rem`
`--nbhd-card-title-fontWeight`	`--nbhd-typography-subheading-fontWeight`	`700`
`--nbhd-card-title-lineHeight`	`--nbhd-typography-subheading-lineHeight`	`1.3`
`--nbhd-card-title-marginBlock`	`--nbhd-space-0 --nbhd-space-4`	`0px 16px`
`--nbhd-card-title-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-card-title-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-card-title-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-card-title-textTransform`	—	`inherit`
`--nbhd-card-visual-alignSelf`	—	`auto`
`--nbhd-card-visual-aspectRatio`	`--nbhd-card-visual-landscape-aspectRatio`	`498 / 280`
`--nbhd-card-visual-blockSize`	—	`auto`
`--nbhd-card-visual-image-blockSize`	—	`100%`
`--nbhd-card-visual-image-host-blockSize`	—	`100%`
`--nbhd-card-visual-image-host-inlineSize`	—	`100%`
`--nbhd-card-visual-image-objectFit`	—	`cover`
`--nbhd-card-visual-image-transitionDuration`	—	`0.5s`
`--nbhd-card-visual-image-transitionProperty`	—	`transform`
`--nbhd-card-visual-inlineSize`	—	`auto`
`--nbhd-card-visual-landscape-aspectRatio`	—	`498 / 280`
`--nbhd-card-visual-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-card-visual-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-card-visual-mediaInset-inline-marginBlock`	`--nbhd-card-visual-mediaInset-space`	`24px`
`--nbhd-card-visual-mediaInset-inline-marginInline`	`--nbhd-card-visual-mediaInset-space --nbhd-space-0`	`24px 0px`
`--nbhd-card-visual-mediaInset-inline-reverse-marginBlock`	`--nbhd-card-visual-mediaInset-space`	`24px`
`--nbhd-card-visual-mediaInset-inline-reverse-marginInline`	`--nbhd-space-0 --nbhd-card-visual-mediaInset-space`	`0px 24px`
`--nbhd-card-visual-mediaInset-stacked-marginBlock`	`--nbhd-card-visual-mediaInset-space --nbhd-space-0`	`24px 0px`
`--nbhd-card-visual-mediaInset-stacked-marginInline`	`--nbhd-card-visual-mediaInset-space`	`24px`
`--nbhd-card-visual-mediaInset-stacked-reverse-marginBlock`	`--nbhd-space-0 --nbhd-card-visual-mediaInset-space`	`0px 24px`
`--nbhd-card-visual-overflow`	—	`hidden`
`--nbhd-card-visual-portrait-aspectRatio`	—	`280 / 373`
`--nbhd-card-visual-position`	—	`static`
`--nbhd-card-visual-square-aspectRatio`	—	`1 / 1`
`--nbhd-card-visual-zIndex`	`--nbhd-z-auto`	`auto`
`--nbhd-card-zoom-hover-transform`	—	`scale(1.1)`

Media overlay

Property	Token	Value	Description
`--nbhd-mediaOverlay-color`	`--nbhd-color-overlay`	`#000000`	—
`--nbhd-mediaOverlay-opacity`	`--nbhd-opacity-overlay-media`	`0.35`	—
`--nbhd-mediaOverlay-opacity-end`	—	`0.85`	—
`--nbhd-mediaOverlay-opacity-middle`	—	`0.5`	Strong enough that a title wrapping up into the middle of a featured card stays legible over light images.
`--nbhd-mediaOverlay-opacity-start`	—	`0`	—

Dependencies

Child components <nbhd-card> renders internally. Import them too when you tree-shake.

ImageReady <nbhd-image> TextReady <nbhd-text> CTAReady <nbhd-cta>

Used by

Card ListReady <nbhd-card-list> Product CardReady <nbhd-product-card>